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陣列中的每個對象之前。

我已經在底部包含一個帶有樣本數據集的小提琴的鏈接;當只繪製jsonObject.routes[0]時圖表很好，但在試圖繪製jsonObject.routes[1]時，它也會繪製jsonObject.routes[0]的數據。

我懷疑這是更多的問題與我的Javascript代碼，而不是與谷歌的可視化API，但我一直拉着我的頭髮，並可以弄清楚爲什麼它從數組中的所有元素。非常感謝您的幫助！

Link to Fiddle

Answer 1

不知道我完全按照問題...

看小提琴，一個圖表似乎借鑑精細，

只需要對數據進行排序，以解決好笑的看着區域

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定義排除上述

和

，我注意到，自從jsonObject是如此之大，
一旦你離開的頁面並捲土重來，
小提琴把它分解成塊，然後打破代碼
且只繪製一張圖表

here is a working fiddle with far less data