1

我在我的 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# 应用程序中运行它。

谢谢！

4

1 回答 1

1

我做过类似的事情，但我一直在使用arrayToDataTable()谷歌图表 API 的方法，但我确信这可以类似地完成。不过，您将需要依靠 C#。我想彻底，所以这是一个大问题。非常乐意澄清，因为我确信其中至少有一些措辞不当/令人困惑。

TLDR

  1. 创建一个类来保存您的数据点以及将它们表示为列表的方法。
  2. 在您的 Controller 类中，创建一个方法，该方法返回一个列表，其中包含表示为列表的数据点。将该列表列表转换为 JSON 并将其发布到 URL 端点
  3. 使用 cshtml 中的 ajax 从该端点读取您的 json 数据
  4. 将读取的 json 放入您的 AddRows 方法中。
  5. 聚会

这将涉及：.cshtml、Home 控制器以及您在何处提取数据。

  1. 无论您在哪里提取数据

我的情况有点复杂。但基本上我有一个方法，它只返回一个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# 端表示为列表，那么您就在做生意。

  1. 控制器类

假设您使用的是 ASP.net MVC，您将有一个支持控制器类来保存您的 Controlling 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()

现在所有困难的事情都完成了。如果您启动您的应用程序并访问您在上面定义的路线（对我来说是这样/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]]

如果您不这样做，那么下一部分将无法解决。永远记住，这是我们需要的列表列表！

  1. .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);

现在你应该拥有它了！页面和数据源将需要刷新以绘制添加的任何新数据的图表，但这应该为您提供动态大小的点列表。我遇到的最困难的部分是将我的数据格式化为列表列表。我建议向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;
}

祝你好运！

于 2020-07-09T18:38:04.473 回答