当前位置:  开发笔记 > 编程语言 > 正文

在Google图表中使用Datetime作为X轴上的值

如何解决《在Google图表中使用Datetime作为X轴上的值》经验,为你挑选了1个好方法。

我在MySQL表中使用比特币价格数据和日期时间.由于一些奇怪的原因,它为每个x值设置相同的日期,并且y值是倾斜的并且看起来不合规定.最近的Y值应该是当前价格.这是我用来创建图表的代码:

function drawAxisTickColors() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Price');
  data.addColumn('datetime', 'Date');
  var dateArr2 = ().reverse();
    for (i = 0; i < dateArr2.length; i++) {
        dateArr2[i] = dateArr2[i].split(/[- :]/);
      }
  var bitcoinArr = ().reverse();
  console.log(bitcoinArr[0]);
  var length = Math.min(dateArr2.length, bitcoinArr.length);
  var rows = [];
  for (var i = 0; i < length; ++i) {
   rows.push([bitcoinArr[i], new Date(dateArr2[i])]);
  }
    data.addRows(rows);

我认为图表上只使用了一个日期的原因与我在PHP中如何使用javascript数组dateArr2有关.



1> Valentin..:

来自satoshindex.com页面的修改代码:

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

function drawAxisTickColors() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Price');
  data.addColumn('datetime', 'Date');

  // var dateArr2 = ().reverse();
  var dateArr2 = (["2015-12-27 23:51:21","2015-12-27 23:51:02","2015-12-27 23:50:41","2015-12-27 23:50:21","2015-12-27 23:50:01","2015-12-27 23:49:41","2015-12-27 23:49:21","2015-12-27 23:49:01","2015-12-27 23:48:41","2015-12-27 23:48:21","2015-12-27 23:48:01","2015-12-27 23:47:41","2015-12-27 23:47:21","2015-12-27 23:47:01","2015-12-27 23:46:42","2015-12-27 23:46:22","2015-12-27 23:46:02","2015-12-27 23:45:41","2015-12-27 23:45:21","2015-12-27 23:45:01","2015-12-27 23:44:41","2015-12-27 23:44:21","2015-12-27 23:44:01","2015-12-27 23:43:41","2015-12-27 23:43:21","2015-12-27 23:43:01","2015-12-27 23:42:41","2015-12-27 23:42:21","2015-12-27 23:42:01","2015-12-27 23:41:41","2015-12-27 23:41:21","2015-12-27 23:41:01","2015-12-27 23:40:41","2015-12-27 23:40:21","2015-12-27 23:40:02","2015-12-27 23:39:41","2015-12-27 23:39:21","2015-12-27 23:39:01","2015-12-27 23:38:41","2015-12-27 23:38:21","2015-12-27 23:38:01","2015-12-27 23:37:41","2015-12-27 23:37:21","2015-12-27 23:37:01","2015-12-27 23:36:41","2015-12-27 23:34:41","2015-12-27 23:36:21","2015-12-27 23:36:01","2015-12-27 23:35:41","2015-12-27 23:35:21"]).reverse();

  // var bitcoinArr = ();
  var bitcoinArr = ([426.61,426.61,426.65,426.65,426.65,426.75,426.63,426.7,426.8,426.76,426.89,426.85,427.02,427.05,426.98,426.99,426.86,426.64,426.65,426.89,426.91,427.18,427.19,427.21,427.26,427.27,427.29,427.26,427.31,427.17,427.21,427.23,427.35,427.34,427.34,427.43,427.47,427.47,427.35,427.5,427.51,427.47,427.48,427.42,427.54,427.54,427.54,427.53,427.57,427.63]);

  var length = Math.min(dateArr2.length, bitcoinArr.length);
  var rows = [];
  for (var i = 0; i < length; ++i) {
    rows.push([bitcoinArr[i], new Date(dateArr2[i])]);
  }

  data.addRows(rows);
  var options = {
    // backgroundColor: '#E4E4E4',
    curveType: 'function',
    chartArea: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
      width: "100%",
      height: "100%"
    },
    hAxis: {
      textPosition: 'none',
      baselineColor: 'none',
      gridlines: {
        color: 'none'
      },
    },
    vAxis: {
      textPosition: 'none',
      baselineColor: 'none',
      gridlines: {
        color: 'none'
      }
    },
    colors: ['#2098d4', '#ffffff'],
    legend: 'none'
  };
  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);
  chart.draw(data, options);
}


推荐阅读
mobiledu2402851377
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有