Question

我尝试使用Google的Visualization API使用PHP脚本从数据库返回的一些数据来绘制图表。我的数据是格式为的JSON对象：

jsonObject = {
  "routes":[{
    "name":"Route 0",
    "chart":{
      "x":[ /* array of x values */ ],
      "y":[ /* array of y values */ ]
    }
  },{
    "name":"Route 1",
    "chart":{
      "x":[ /* array of x values */ ],
      "y":[ /* array of y values */ ]
    }
  }]};

我试图使用以下代码单独绘制jsonObject.routes的每个成员的图表：

function drawChart() {
  var baseChart = jsonObject.routes[1].chart;  //  Want to manipulate this value to plot different sets of data
  var chartData = [];

  for (var g = 0; g < baseChart.x.length; g++) {
    var dataPoint = {
      c: [
        { v: baseChart.x[g] },
        { v: baseChart.y[g] },
      ]
    };
    chartData.push(dataPoint);
  }

  var dataJson = {
    cols: [
      { role: "domain", type: "number", label: "Distance" },
      { role: "data", type: "number", label: "Main Route" },
    ],
    rows: chartData
  };

  var dataTable = new google.visualization.DataTable(dataJson);
    var chart = new google.visualization.AreaChart(document.getElementById('chart'));

  var options = {};

  chart.draw(dataTable, options);
}

但是，每当我尝试访问jsonObject.route数组的后一个对象时，它似乎也会为jsonObject.route数组中的每个对象提取数据。

我在底部包含了一个带有样本数据集的小提琴的链接;只绘制jsonObject.routes[0]时图表很好，但在尝试绘制jsonObject.routes[1]时，它也会绘制来自jsonObject.routes[0]的数据。

我怀疑这是我的Javascript代码而不是谷歌可视化API的问题，但是我一直在用它来解决问题，并且可以弄清楚为什么它会从所有数据中提取数据该数组中的元素。非常感谢您的帮助！

Link to Fiddle

Answer 1

不确定我是否完全按照这个问题...

看着小提琴，一张图似乎很好，

只需要对数据进行排序以修复看起来很有趣的区域

dataTable.sort([{column: 0}]);

请参阅以下代码段，以便为每个代码绘制单独的图表 - ＆gt; jsonObject.routes

google.charts.load('current', {
  callback: function () {
    jsonObject.routes.forEach(function (route) {
      var chartData = [];

      route.chart.dist.forEach(function (x, index) {
        chartData.push({
          c: [
            {v: x},
            {v: route.chart.ele[index]}
          ]
        });
      });

      var dataJson = {
        cols: [
          { role: "domain", type: "number", label: "Distance" },
          { role: "data", type: "number", label: "Main Route" },
        ],
        rows: chartData
      };

      var dataTable = new google.visualization.DataTable(dataJson);
      dataTable.sort([{column: 0}]);
      var options = {};
      var container = document.getElementById('chart_div').appendChild(document.createElement('div'));
      var chart = new google.visualization.AreaChart(container);
      chart.draw(dataTable, options);
    });
  },
  packages:['corechart']
});

注意：jsonObject的定义不在上面

AND

在构建工作小提琴时，我注意到由于jsonObject太大，所以一旦你离开页面并卷土重来，
小提琴将其分解成块，然后打破代码并且只绘制了一个图表

here is a working fiddle with far less data

Google Area Chart中的重复数据系列

1 个答案: