如何从控制器传递对象列表以查看和填充 google.visualization.DataTable()？

Question

如何从控制器传递对象列表以查看和填充 google.visualization.DataTable() 以绘制折线图？

型号：

 public class Temperaturestatus
 {
        public DateTime Time { get; set; }

        public double? TempMax{ get; set; }

        public double? TempMin { get; set; }

        public double? TempMedian { get; set; }
}

控制器：

 public class ChartController : Controller
    {
        public JsonResult JsonData()
        {
            var tempstatlist = new List<Temperaturestatus>();
            foreach (var item in machineStatus)
            {
                Temperaturestatus tempstat = new Temperaturestatus();
                tempstat.Time= item.currentTime;
                tempstat.TempMax= item.MaximumTemperature;
                tempstat.TempMin= item.MinimumTemperature;
                tempstat.TempMedian = item.MedianTemperature ;

                tempstatlist.Add(tempstat);
            }

            return Json(tempstatlist);
        }

    }

查看：

@{
   ViewData["Title"] = "UseDataFromObjectList";
}

<h2>Use Data From Object List</h2>
<hr />

<div class="container">
   <div id="chart1"></div>
</div>


@section scripts{
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
   <script>
       google.charts.load('current', { 'packages': ['corechart'] });
       google.charts.setOnLoadCallback(callback);


       function callback() {
           var option = {
               title: "TemperatureChart",
               width: 900,
               height: 650,
               legend: { position: 'none' },
               vAxis: { viewWindow: { min: -1, max: 11 }, baselineColor: 'transparent' },
               chartArea: { height: '80%', width: '85%', left: 100, backgroundColor: { stroke: "gray", strokeWidth: 1 } },
               pointSize: 10
           };
           var chart = new google.visualization.LineChart(document.getElementById('chart1'));
           var data = new google.visualization.DataTable();
           data.addColumn('datetime', 'time');
           data.addColumn('number', 'MaxTemp');
           data.addColumn('number', 'MinTemp');
           data.addColumn('number', 'MedianTemp');

           drawChart();


           function drawChart() {
               $.get('JsonData', function (d) {

                 //How to use the Json object here and populate the 
                 // google.visualization.DataTable();

                   chart.draw(data, option);
               });

           }
       }
   </script>
}

Json 字符串：

[  
   {  
      "time":"2019-04-05T01:31:18",
      "tempMax":null,
      "tempMin":0.994149582975367,
      "tempMedian":null
   },
   {  
      "time":"2019-04-05T01:47:19",
      "tempMax":null,
      "tempMin":0.911886229190676,
      "tempMedian":null
   },
   {  
      "time":"2019-04-05T01:47:25",
      "tempMax":null,
      "tempMin":0.942482640991897,
      "tempMedian":null
   },
   {  
      "time":"2019-04-05T01:47:30",
      "tempMax":null,
      "tempMin":0.863435650814746,
      "tempMedian":null
   },
   {  
      "time":"2019-04-05T01:47:35",
      "tempMax":null,
      "tempMin":0.987739249178772,
      "tempMedian":null
   }
]

谢谢

Answer 1

可以使用数据表法addRow...

$.get('JsonData', function (d) {
  $.each(d, function (index, row) {
    data.addRow([
      new Date(row.time),
      row.tempMax,
      row.tempMin,
      row.tempMedian
    ]);
  });
});

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var option = {
    title: "TemperatureChart",
    width: 900,
    height: 650,
    legend: { position: 'none' },
    vAxis: { viewWindow: { min: -1, max: 11 }, baselineColor: 'transparent' },
    chartArea: { height: '80%', width: '85%', left: 100, backgroundColor: { stroke: "gray", strokeWidth: 1 } },
    pointSize: 10
  };
  var chart = new google.visualization.LineChart(document.getElementById('chart1'));
  var data = new google.visualization.DataTable();
  data.addColumn('datetime', 'time');
  data.addColumn('number', 'MaxTemp');
  data.addColumn('number', 'MinTemp');
  data.addColumn('number', 'MedianTemp');

  drawChart();


  function drawChart() {
    //$.get('JsonData', function (d) {
      var d = [
        {
          "time":"2019-04-05T01:31:18",
          "tempMax":null,
          "tempMin":0.994149582975367,
          "tempMedian":null
        },
        {
          "time":"2019-04-05T01:47:19",
          "tempMax":null,
          "tempMin":0.911886229190676,
          "tempMedian":null
        },
        {
          "time":"2019-04-05T01:47:25",
          "tempMax":null,
          "tempMin":0.942482640991897,
          "tempMedian":null
        },
        {
          "time":"2019-04-05T01:47:30",
          "tempMax":null,
          "tempMin":0.863435650814746,
          "tempMedian":null
        },
        {
          "time":"2019-04-05T01:47:35",
          "tempMax":null,
          "tempMin":0.987739249178772,
          "tempMedian":null
        }
      ];

      $.each(d, function (index, row) {
        data.addRow([
          new Date(row.time),
          row.tempMax,
          row.tempMin,
          row.tempMedian
        ]);
      });

      chart.draw(data, option);
    //});
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart1"></div>