javascript - Google 面积图中重复的一系列数据

Question

我正在尝试使用 Google 的可视化 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 数组中的每个对象提取数据也对它。

我在底部添加了一个指向 Fiddle 的链接，其中包含示例数据集；仅绘制 jsonObject.routes[0] 时图表没问题，但是当尝试绘制 jsonObject.routes[1] 时，它将绘制来自 jsonObject 的数据。路线[0]也是如此。

我怀疑这更多是我的 Javascript 代码的问题，而不是 Google Visualization API 的问题，但我一直在用它来抓我的头发，并且可以弄清楚为什么它从该数组中的所有元素中提取数据。非常感谢您的帮助!

Link to Fiddle

Answer 1

不确定我是否完全理解了这个问题...

看 fiddle ，一张图表似乎画得很好，

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

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

请参阅以下代码片段，以便为每个内容绘制单独的图表 --> 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的定义

和

在构建工作 fiddle 时，我注意到由于 jsonObject 太大了，
一旦您离开页面并返回，
fiddle 将其分解成 block ，然后破坏代码
并且只绘制了一张图表

here is a working fiddle with far less data