谷歌圖表沒有按預期工作

Question

這是我的 json 數據的輸出。

[["Period","SOC","Control Signal","Charge/discharge"],
 ["00:00:00",60,0.01,0.01],
 ["00:01:00",58,0.01,0.01],
 ["00:02:00",56,0.01,0.01],
 ["00:03:00",55,0,0],
 ["00:04:00",54,0,0],
 ["00:05:00",53,-0.01,-0.01],
 ["00:30:00",53,-0.01,-0.01]]

我正在傳遞這些數據...

var table="holds my json data";
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var obj = jQuery.parseJSON(table);
var data = google.visualization.arrayToDataTable(obj)
var options = {
    title: 'Charge Discharge Management',
    curveType: 'function',
    series: {0: {targetAxisIndex:0},
    1:{targetAxisIndex:1}, 
},
'hAxis':{textPosition: 'none'}
};

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

在此處輸入圖片說明

正如我們在圖像中看到的，h 軸上的每個時間之間的時間差為“1 分鍾”，但最后為“5”-“30”……如何使其線性？

Answer 1

我使用了“timeofday”數據類型來顯示您想要的內容。 我已經嘗試過並且能夠這樣做。

http://jsfiddle.net/rajeshwerkushwaha/128sdznL/

如果鏈接無效，請使用此代碼：

<html>
  <head>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
   
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});
     
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      function drawChart() {
      
      var data = [["00:00:00",60,0.01,0.01],
                  ["00:01:00",58,0.01,0.01],
                  ["00:02:00",56,0.01,0.01],
                  ["00:03:00",55,0,0],
                  ["00:04:00",54,0,0],
                  ["00:05:00",53,-0.01,-0.01],
                  ["00:30:00",53,-0.01,-0.01]];
          
      for(var i=0; i<data.length; i++){
          
          var temp1 = data[i][0].split(':');
          
          for(var j=0; j<temp1.length; j++){
              var temp2 = parseInt(temp1[j].replace(/^0/, ''),10);
              temp1[j] = temp2;
          }
          temp1.push(0);
          data[i][0] = temp1;
      }

      var dataTable = new google.visualization.DataTable();
      dataTable.addColumn('timeofday', 'Period');    
      dataTable.addColumn('number', 'SOC');
      dataTable.addColumn('number', 'Control Signal');
      dataTable.addColumn('number', 'Charge/discharge');
          
      dataTable.addRows(data);
      

      var dataView = new google.visualization.DataView(dataTable);

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      var options = {
                        title: 'Charge Discharge Management',
                        curveType: 'function',
                        series: {0: {targetAxisIndex:0},
                                 1: {targetAxisIndex:1}, 
                                }
                    };
      chart.draw(dataView, options);
    }
    </script>
  </head>

  <body>

    <div id="chart_div" style="height:300"></div>
  </body>
</html>

谷歌圖表沒有按預期工作

問題描述

1 個解決方案

解決方案1
0 已采納 2014-09-08 08:15:57

谷歌圖表沒有按預期工作

問題描述

1 個解決方案

解決方案1 0 已采納 2014-09-08 08:15:57

解決方案1
0 已采納 2014-09-08 08:15:57