dreamfly2016
dreamfly2016
2015-12-28 04:42

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

已采纳

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.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • doupian6118 doupian6118 6年前

    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>

    </div>
    
    点赞 评论 复制链接分享

相关推荐