在Google图表中使用Datetime作为X轴上的值 [英] Using Datetime as values on X axis in google charts

查看：143
本文介绍了在Google图表中使用Datetime作为X轴上的值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用MySQL表格中的比特币价格数据和日期时间。出于某种奇怪的原因，它为每个x值都设置了相同的日期，并且y值偏斜并且显得无序。最新的Y值应该是当前价格。下面是我用来创建图表的代码： 

 函数drawAxisTickColors（）{
 var data = new google .visualization.DataTable（）; 
 data.addColumn（'number'，'Price'）; 
 data.addColumn（'datetime'，'Date'）; 
 var dateArr2 =（<？php echo json_encode（$ dateArr）;？>）。reverse（）; 
 for（i = 0; i  dateArr2 [i] = dateArr2 [i] .split（/ [ - ：] /）; 
} 
 var bitcoinArr =（<？php echo json_encode（$ bitcoinPriceArr）;？>）。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。

解决方案

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 =（<？php echo json_encode（$ dateArr）;？>）。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 =（<？php echo json_encode（array_reverse（$ bitcoinPriceArr））;？>）; 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'}}，颜色：['＃2098d4'，'#ffffff']，图例：'none'}; var container = document.getElementById（'chart_div'）; var chart = new google.visualization.LineChart（container）; chart.draw（data，options）;}

< script type =text / javascriptsrc =https://www.google.com/jsapi>< / script>< div id =chart_div>< / div>


I'm using bitcoin price data and datetime from a MySQL table. For some strange reason, it is putting the same date for every x value, and the y values are skewed and seem out of order. The most recent Y value should be the current price. Here is the code I am using to create the chart:

function drawAxisTickColors() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Price');
  data.addColumn('datetime', 'Date');
  var dateArr2 = (<?php echo json_encode($dateArr); ?>).reverse();
    for (i = 0; i < dateArr2.length; i++) {
        dateArr2[i] = dateArr2[i].split(/[- :]/);
      }
  var bitcoinArr = (<?php echo json_encode($bitcoinPriceArr); ?>).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);

I think the reason only one date is used on the chart has something to do with how I'm using the javascript array dateArr2 in PHP.

解决方案

Modified code from satoshindex.com page:

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 = (<?php echo json_encode($dateArr); ?>).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 = (<?php echo json_encode(array_reverse($bitcoinPriceArr)); ?>);
  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);
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

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

这篇关于在Google图表中使用Datetime作为X轴上的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆