仅使用 Javascript 动态填充 google 图表

Question

我在我的 C# 项目中使用 Google 图表 API（使用 CefSharp 的 WebBrowser），它使用硬编码的数据，但我运行每当我尝试使用 data.addRows() 动态填充它时都会遇到问题。我需要一些简单的东西，比如外部 csv/json，所以可以在 C# 中运行（WebBrowser 真的很有限，有时还有错误），但是每个解决方案都告诉我通过 php 服务器或更多 "complex" 之类的东西。那么，有没有办法只使用 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# 应用程序中调用它。

谢谢！

Answer 1

我做过类似的事情，但我一直在使用 google 图表 API 的 arrayToDataTable() 方法，但我相信这可以类似地完成。不过，您将需要依靠 C#。我想彻底，所以这是一个大问题。非常乐意澄清，因为我确信至少其中一些会很糟糕 worded/confusing.

TLDR

创建一个 Class 来保存您的数据点和一种将它们表示为列表的方法。
在您的控制器 class 中，创建一个方法，该方法 returns 一个包含以列表表示的数据点的列表。将该列表列表转换为 JSON 并将其 Post 转换为 URL 端点
在 cshtml
将读取 json 放入您的 AddRows 方法中。
派对

这将涉及：.cshtml、家庭控制器以及您提取数据的任何地方。

无论您在哪里提取数据

我的情况有点复杂。但基本上我有一个方法，它只是 returns 一个 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# 端表示为列表，那么您就成功了。

控制器class

假设您正在使用 ASP.net MVC，您将有一个支持控制器 class 来保存您的控制 C#

一旦你有一个类型对象的列表包含你的数据点表示为列表，你可以把它变成JSON 使用 Newtonsoft.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()

现在所有困难的事情都完成了。如果您启动您的应用程序并访问您在上面定义的路线（对我来说是 /Index/Charts/All/Week），您应该在那里看到您的 JSON 数据类似于：

[["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 魔法您的大部分图表已经存在。如果它正在使用您发布的样本数据，那么这将是 super 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);

现在你应该拥有它了！页面和数据源将需要刷新以绘制添加的任何 new 数据，但这应该会为您提供一个动态大小的点列表。我遇到的最困难的部分是将我的数据格式化为列表列表。我建议将 CS List<object> ToList() 方法添加到与我的 Weather_Entry class 等效的方法中，将所有重要的数据点按顺序 *.这使得做这样的事情变得既好又容易：

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;
}

祝你好运！

仅使用 Javascript 动态填充 google 图表

Dinamically populate google chart just using only Javascript

html

javascript

charts

google-visualization

webbrowser-control