Google Charts - 如何为列表对象属性的每个不同值制作 1 行

2024-05-21 • 问答

使用 C#。传递给 mvc 控制器的具有元素和元素属性的对象列表，例如：

List<anobject> listOfAnobjects = new List<anobject>();

anobject1.date = 1/1/21 | anobject1.linename = "Line1" | anobject1.value = 100
anobject1.date = 1/2/21 | anobject1.linename = "Line1" | anobject1.value = 200
anobject1.date = 1/3/21 | anobject1.linename = "Line1" | anobject1.value = 300

anobject2.date = 1/2/21 | anobject2.linename = "Line2" | anobject2.value = 20
anobject2.date = 1/3/21 | anobject2.linename = "Line2" | anobject2.value = 50
anobject2.date = 1/4/21 | anobject2.linename = "Line2" | anobject2.value = 200
anobject2.date = 1/5/21 | anobject2.linename = "Line2" | anobject2.value = 120

在控制器中：将 listOfAnobjects 列表传递给 Google Charts

public actionResult GetData()
{
 return Json(listOfAnobjects,JsonRequestBehavior.AllowGet);
}

在我的 Index.cshtml 中，我通过以下代码生成 Google 图表。当前代码生成一行，其中包含所有 anobject .date / .value 。 如何更改以便代码为 listOfAnobjects 列表中的每个不同 .linename 生成 1 个折线图 (x,y) = (.date,.value)。谢谢！

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
google.charts.load('current',{'packages': ['corechart','table']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
 var dataJson;
 $.ajax({
  url: '@Url.action("GetData"),dataType: "json",type: "POST",contentType: 'application/json; charset=utf-8',cache: false,data; {},success: function (dataJson) {
    var arrOutside = new Array();

    var heading = ["Date","Value"];
    arrOutside[0] = heading;

    for (var i = 0; i < dataJson.length,i++){
     var arr = [dataJson[i].date,dataJson[i].value];
     arrOutside[i+1] = arr;
    }

    var options = {
     width: 900,height: 600,}

    var gdata = new.google.visualization.arrayToDataTable(arrOutside);

    var chart = new google.visualization.LineChart(document.getElementById('line_chart1');
    chart.draw(gdata,options);
  }
  });
 }
</script>

要绘制多条线，每条线名称一条，我们需要在数据表中为每条线划一列。

例如

'date','line 1','line 2',...

首先在数据表中添加一个 linename 列...

// add linename to data table
var arrOutside = [
  ['Date','Line','Value']
];
dataJson.forEach(function (row) {
  arrOutside.push([row.date,row.linename,row.value]);
});
var gdata = new.google.visualization.arrayToDataTable(arrOutside);

然后我们将数据分组，按行名对值求和...

// group data table by linename
var groupData = google.visualization.data.group(
  gdata,[0,1],[{
    column: 2,aggregation: google.visualization.data.sum,type: 'number'
  }]
);

接下来，我们创建一个数据视图，将每个行名分隔到数据表中自己的列中。

// create data view from grouped data
var view = new google.visualization.DataView(groupData);

// sum column array
var aggColumns = [];

// use date as first view column
var viewColumns = [0];

// build view & agg columns for each linename
groupData.getDistinctValues(1).forEach(function (linename,index) {
  // add view column for each linename
  viewColumns.push({
    calc: function (dt,row) {
      if (dt.getValue(row,1) === linename) {
        return dt.getValue(row,2);
      }
      return null;
    },label: linename,type: 'number'
  });

  // add sum column for each linename
  aggColumns.push({
    aggregation: google.visualization.data.sum,column: index + 1,type: 'number'
  });
});

// set view columns
view.setColumns(viewColumns);

最后，我们再次对数据进行分组，对每个 linename 列求和...

// sum view by date
var aggData = google.visualization.data.group(
  view,[0],aggColumns
);

然后我们可以用最后分组的数据绘制图表...

// draw chart
chart.draw(aggData,options);

看下面的片段...

google.charts.load('current',{
  packages: ['corechart','table']
}).then(function drawChart() {
  var chart = new google.visualization.LineChart(document.getElementById('line_chart1');
  var options = {
    width: 900,height: 600
  }

  $.ajax({
    url: '@Url.Action("GetData"),dataType: 'json',type: 'POST',contentType: 'application/json; charset=utf-8',cache: false,data: {}
  }).done(function (dataJson) {
    // add linename to data table
    var arrOutside = [
      ['Date','Value']
    ];
    dataJson.forEach(function (row) {
      arrOutside.push([row.date,row.value]);
    });
    var gdata = new.google.visualization.arrayToDataTable(arrOutside);

    // group data table by linename
    var groupData = google.visualization.data.group(
      gdata,[{
        column: 2,type: 'number'
      }]
    );

    // create data view from grouped data
    var view = new google.visualization.DataView(groupData);

    // sum column array
    var aggColumns = [];

    // use date as first view column
    var viewColumns = [0];

    // build view & agg columns for each linename
    groupData.getDistinctValues(1).forEach(function (linename,index) {
      // add view column for each linename
      viewColumns.push({
        calc: function (dt,row) {
          if (dt.getValue(row,1) === linename) {
            return dt.getValue(row,2);
          }
          return null;
        },type: 'number'
      });

      // add sum column for each linename
      aggColumns.push({
        aggregation: google.visualization.data.sum,type: 'number'
      });
    });

    // set view columns
    view.setColumns(viewColumns);

    // sum view by date
    var aggData = google.visualization.data.group(
      view,aggColumns
    );

    // draw chart
    chart.draw(aggData,options);
  });
});

Google Charts - 如何为列表对象属性的每个不同值制作 1 行

banqiansheng 回答：Google Charts - 如何为列表对象属性的每个不同值制作 1 行

大家都在问