我在我的C#项目中使用Google Charts API（使用CefSharp的WebBrowser），并且它适用于硬编码到它的数据，但是每当我尝试使用data.addRows（）填充它时，我都会遇到问题。我需要一些简单的东西，比如外部的csv /json，所以可以在C#中运行（WebBrowser真的很有限，有时是错误的），但是每个解决方案都告诉我通过php服务器或类似更“复杂”的东西来做到这一点。那么，有没有办法只使用JavaScript和外部文件（或不同但可行的文件）来填充该图表？如果有用，那就是代码：<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {packages:["orgchart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('string', 'Manager'); data.addColumn('string', 'ToolTip'); // For each orgchart box, provide the name, manager, and tooltip to show. data.addRows([['Alice', 'Mike', ''],['Bob', 'Jim', 'Bob Sponge'],['Carol', 'Bob', '']]); // Create the chart. var chart = new google.visualization.OrgChart(document.getElementById('chart_div')); // Draw the chart, setting the allowHtml option to true for the tooltips. chart.draw(data, {'allowHtml':true}); } </script> </head> <body> <div id="chart_div"></div> </body></html>Obs：CefSharp WebBrowser只是将上面的代码作为普通的HTML文件调用，并在C#应用程序中运行它。谢谢！
1 回答
holdtom
TA贡献1805条经验 获得超10个赞
我做过类似的事情，但我一直在使用谷歌图表API的方法，但我相信这也可以类似地完成。不过，您需要依靠 C#。我想彻底，所以这是一个很大的问题。我非常乐意澄清，因为我相信至少其中一些措辞不当/令人困惑。arrayToDataTable()
断续器
创建一个类来保存数据点，并创建一种将它们表示为列表的方法。
在 Controller 类中，创建一个返回列表的方法，该列表包含表示为列表的数据点。将列表列表转换为 JSON 并将其发布到 URL 终结点
在 cshtml 中使用 ajax 从该终结点读取 json 数据
将读取 json 放入 AddRows 方法中。
党
这将涉及：.cshtml，主控制器以及“无论在哪里提取数据”。
无论您在何处提取数据
我的情况有点复杂。但基本上我有一个方法，它只返回一个类型的列表，用于保存这些对象，表示为列表。（例如。object[<Timestamp>,<Temperature>,<Humidity>])
public class WeatherEntry
{
public string Timestamp { get; set; }
public double TEMPERATURE { get; set; }
public double Humidity { get; set; }
... Other stuff ...
}
如果可以生成数据点列表（表示为 c# 端的列表），则表示您从事业务。
控制器类
假设您使用的是 ASP.net MVC，您将有一个支持控制器类来保存您的控制 C#
一旦你有了一个类型对象的列表，其中包含表示为列表的数据点，你可以使用Newtonsoft.Json的方法非常轻松地将其转换为JSON，如下所示：JSonConvert.SerializeObject()
public ActionResult GetChartData_All_Week()
{
var dataPointsList = this.myDataSource.GetMyDataPointList();
var convertedJson = JsonConvert.SerializeObject(dataPointsList, new JsonSerializerSettings()
{
//Not Needed, I just like to throw out any values that are null.
NullValueHandling = NullValueHandling.Ignore
});
return Content(convertedJson);
重要我们将在下一步中使用ajax，因此我们需要此操作结果方法上方的神奇属性，如下所示：[Route]
Route("Index/Path/To/Post/To")]
public ActionResult GetChartData_All_Week()
所有困难的事情现在都完成了。如果您启动应用程序并访问上面定义的路由（对我来说是），您应该在那里看到类似于以下内容的JSON数据：/Index/Charts/All/Week
[["07/04/2020",25.5,44.0],["07/05/2020",25.600000381469727,45.0],["07/06/2020",25.5,44.0],...["07/08/2020",25.5,43.0]]
如果你不这样做，那么下一部分就不会成功。永远记住，这是我们需要的列表列表！
.cshtml，AJAX和jQuery魔术大部分图表已经存在。如果它正在处理您发布的示例数据，这将是超级ez。在您的方法中，您将在调用之前添加以下内容。drawChart()data.AddRows()
var jsonData = $.ajax({
url:'Index/Path/To/Post/To',
dataType:"json",
async:false,
type:"GET"
}).responseText;
var asJson = JSON.parse(jsonData);
data.AddRows(asJson);
现在你应该拥有它！页面和数据源将需要刷新以绘制添加的任何新数据的图表，但这应该为您提供动态大小的点列表。我遇到的最困难的部分是将数据格式化为列表列表。我建议添加一个方法，以将所有重要的数据点按顺序放入列表中*。这使得做这样的事情变得很好，很容易：CS List<object> ToList()Weather_Entry
public List<object> GetMyDataPointList(){
var myDataPointList = new List<MyDataPointType>();
myDataPointList = this.GetMyListOfDataPoints();
List<object> turnMeIntoJSON = new List<object>();
myDataPointList.ForEach(dp => turnMeIntoJSON.Add(dp.ToList));
return turnMeIntoJSON;
}
添加回答
举报
0/150
提交
取消