Question

你建议JS框架使用下面的输入绘制折线图。使用带有下面代码的谷歌图表不适用于时间值。

gridVdata =[["11:23:09","6.300000"],["10:47:26","6.300000"],["13:09:36","6.310000"], ["12:31:00","6.400000"],["11:38:45","6.300000"],["12:29:03","6.400000"], ["11:38:45","6.310000"],["12:17:47","6.390000"],["13:54:30","6.310000"], ["14:15:40","6.340000"]];

google.charts.load('current', { packages: ['corechart', 'line'] });
google.charts.setOnLoadCallback(drawBackgroundColor);
function drawBackgroundColor() {
   var data = new google.visualization.DataTable();
   data.addColumn('number', 'X');
   data.addColumn('number', 'Dogs');
   data.addRows(gridVdata);
   var options = {
       hAxis: {
               title: 'Price'
              },
              vAxis: {
                title: 'Volume'
             },
            backgroundColor: '#f1f8e9'
        };

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

    <div id="chart_div"></div>

我可以使用任何框架，但由于时间价值，我只是没有线索。任何正确方向的建议都会有所帮助。

Answer 1

它不起作用的原因，列都定义为'number'

data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');

但数组中的值都是字符串

["11:23:09","6.300000"]

如果您将第一列更改为'string'，则并丢失数组第二个实例中值的引号，
图表将绘制......

请参阅以下工作代码段...

google.charts.load('current', {
  callback: function () {
    drawBackgroundColor();
    window.addEventListener('resize', drawBackgroundColor, false);
  },
  packages:['corechart', 'table']
});

function drawBackgroundColor() {
  var gridVdata = [
    ["11:23:09",6.300000],["10:47:26",6.300000],["13:09:36",6.310000],
    ["12:31:00",6.400000],["11:38:45",6.300000],["12:29:03",6.400000],
    ["11:38:45",6.310000],["12:17:47",6.390000],["13:54:30",6.310000],
    ["14:15:40",6.340000]
  ];

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'X');
  data.addColumn('number', 'Dogs');
  data.addRows(gridVdata);
  var options = {
    hAxis: {
      title: 'Price'
    },
    vAxis: {
      title: 'Volume'
    },
    backgroundColor: '#f1f8e9'
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

如果您想使用列类型'timeofday'

data.addColumn('timeofday', 'X');

您可以更改数组的第一个实例中的值，
到一组时间值

[[11,23,9],6.300000]

只需要在绘图之前对数据进行排序，

data.sort([{column: 0}]);

请参阅以下工作代码段...

google.charts.load('current', {
  callback: function () {
    drawBackgroundColor();
    window.addEventListener('resize', drawBackgroundColor, false);
  },
  packages:['corechart', 'table']
});

function drawBackgroundColor() {
  var gridVdata = [
    [[11,23,9],6.300000],[[10,47,26],6.300000],[[13,09,36],6.310000],
    [[12,31,00],6.400000],[[11,38,45],6.300000],[[12,29,03],6.400000],
    [[11,38,45],6.310000],[[12,17,47],6.390000],[[13,54,30],6.310000],
    [[14,15,40],6.340000]
  ];

  var data = new google.visualization.DataTable();
  data.addColumn('timeofday', 'X');
  data.addColumn('number', 'Dogs');
  data.addRows(gridVdata);
  data.sort([{column: 0}]);
  var options = {
    hAxis: {
      title: 'Price'
    },
    vAxis: {
      title: 'Volume'
    },
    backgroundColor: '#f1f8e9'
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

JS Chart框架用于整数与时间的关系

1 个答案: