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);
}

enter image description here

正如我们在图像中看到的那样，每次在h轴上的时间差是＆＃34; 1分钟＆＃34;但最后它是＆＃34; 5＆＃34; - ＆＃34; 30＆＃34; ....如何使它线性？

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 个答案: