猿问

仅使用Javascript填充谷歌图表

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


谢谢！


回首忆惘然
浏览 70回答 1
1回答

holdtom

我做过类似的事情，但我一直在使用谷歌图表API的方法，但我相信这也可以类似地完成。不过，您需要依靠 C#。我想彻底，所以这是一个很大的问题。我非常乐意澄清，因为我相信至少其中一些措辞不当/令人困惑。arrayToDataTable()断续器创建一个类来保存数据点，并创建一种将它们表示为列表的方法。在 Controller 类中，创建一个返回列表的方法，该列表包含表示为列表的数据点。将列表列表转换为 JSON 并将其发布到 URL 终结点在 cshtml 中使用 ajax 从该终结点读取 json 数据将读取 json 放入 AddRows 方法中。党这将涉及：.cshtml，主控制器以及“无论在哪里提取数据”。无论您在何处提取数据我的情况有点复杂。但基本上我有一个方法，它只返回一个类型的列表，用于保存这些对象，表示为列表。（例如。object[<Timestamp>,<Temperature>,<Humidity>])public class WeatherEntry{&nbsp; &nbsp; &nbsp; &nbsp;public string Timestamp { get; set; }&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;public double TEMPERATURE { get; set; }&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;public double Humidity { get; set; }&nbsp;... Other stuff ...}如果可以生成数据点列表（表示为 c# 端的列表），则表示您从事业务。控制器类假设您使用的是 ASP.net MVC，您将有一个支持控制器类来保存您的控制 C#一旦你有了一个类型对象的列表，其中包含表示为列表的数据点，你可以使用Newtonsoft.Json的方法非常轻松地将其转换为JSON，如下所示：JSonConvert.SerializeObject()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; public ActionResult GetChartData_All_Week()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var dataPointsList = this.myDataSource.GetMyDataPointList();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var convertedJson = JsonConvert.SerializeObject(dataPointsList, new JsonSerializerSettings()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //Not Needed, I just like to throw out any values that are null.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; NullValueHandling = NullValueHandling.Ignore&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url:'Index/Path/To/Post/To',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataType:"json",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; async:false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type:"GET"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }).responseText;var asJson = JSON.parse(jsonData);data.AddRows(asJson);现在你应该拥有它！页面和数据源将需要刷新以绘制添加的任何新数据的图表，但这应该为您提供动态大小的点列表。我遇到的最困难的部分是将数据格式化为列表列表。我建议添加一个方法，以将所有重要的数据点按顺序放入列表中*。这使得做这样的事情变得很好，很容易：CS List<object> ToList()Weather_Entrypublic List<object> GetMyDataPointList(){&nbsp; &nbsp; &nbsp;var myDataPointList = new List<MyDataPointType>();&nbsp; &nbsp; &nbsp;myDataPointList = this.GetMyListOfDataPoints();&nbsp; &nbsp; &nbsp;List<object> turnMeIntoJSON = new List<object>();&nbsp; &nbsp; &nbsp;myDataPointList.ForEach(dp => turnMeIntoJSON.Add(dp.ToList));&nbsp; &nbsp; return turnMeIntoJSON;}
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答