0

这是我的 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”......如何使其成为线性？

4

1 回答 1

0

我已经使用“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>
于 2014-09-08T08:15:57.507 回答