簡體   English   中英

使用JSON輸入時,Google圖表折線圖僅顯示點而不是線

[英]Google charts linechart showing only a dot instead of a line when using JSON input

我試圖用來自JSON的數據填充折線圖。

它應該是這樣的: https : //jsfiddle.net/ud5y3m3y/

現在,當我切換到JSON時,它在圖表上僅給我一個點: https : //jsfiddle.net/5at6w6en/

google.load('visualization', '1', {packages: ['corechart']});
      google.setOnLoadCallback(drawChart);

      function drawChart() {

          var JSONinput = {"rows":[{"c":[{"v":[13,26,15]},{"v":0},{"v":0},{"v":0},{"v":0},{"v":0},{"v":[13,26,45]},{"v":0},{"v":0},{"v":0},{"v":0},{"v":0},{"v":[13,27,15]},{"v":0},{"v":0},{"v":0},{"v":0},{"v":0},{"v":[13,27,45]},{"v":0},{"v":0},{"v":0},{"v":0},{"v":0},{"v":[13,28,15]},{"v":0},{"v":0},{"v":0},{"v":0},{"v":0}]}],"cols":[{"id":"","label":"Time of Day","type":"timeofday"},{"id":"","label":"Somevalue 1","type":"number"},{"id":"","label":"Somevalue 2","type":"number"},{"id":"","label":"Somevalue 3","type":"number"},{"id":"","label":"Somevalue 4","type":"number"},{"id":"","label":"Somevalue 5","type":"number"}]};


        var data = new google.visualization.DataTable(JSONinput);


        var options = {
          title: 'History of somevalues',
          width: 900,
          height: 500,
          hAxis: {
            format: 'HH:mm:ss',
            gridlines: {count: 15}
          },
          vAxis: {
            gridlines: {color: 'none'},
            minValue: 0,
            viewWindowMode: "explicit",
            viewWindow: {min: 0}
          }
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

        chart.draw(data, options);

      }

我已經閱讀過https://developers.google.com/chart/interactive/docs/datesandtimes

還有這個https://developers.google.com/chart/interactive/docs/reference

但是還沒有找出問題所在。 通常,當數據表的輸入中存在某種錯字時,就會出現點問題。

任何幫助表示贊賞!

我不好

生成JSON的代碼存在錯誤。

它沒有在每行中添加“ c”數組。

這是正確的JSON

{
  "cols": [
        {"id":"","label":"Time of Day","type":"timeofday"},
        {"id":"","label":"Somevalue 1","type":"number"},
        {"id":"","label":"Somevalue 2","type":"number"},
        {"id":"","label":"Somevalue 3","type":"number"},
        {"id":"","label":"Somevalue 4","type":"number"},
        {"id":"","label":"Somevalue 5","type":"number"}
      ],
  "rows": [
        {"c":[{"v":[13,26,15]},{"v":10},{"v":20},{"v":30},{"v":40},{"v":50}]},
        {"c":[{"v":[13,26,45]},{"v":10},{"v":200},{"v":300},{"v":400},{"v":500}]},
        {"c":[{"v":[13,27,15]},{"v":30},{"v":20},{"v":70},{"v":40},{"v":60}]},
        {"c":[{"v":[13,27,45]},{"v":10},{"v":70},{"v":60},{"v":40},{"v":80}]},
        {"c":[{"v":[13,28,15]},{"v":50},{"v":60},{"v":60},{"v":70},{"v":50}]}
      ]
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM