使用带有日期和小时的haxis绘制带有谷歌图表的样条图表

时间：2016-03-29 23:10:09

标签： charts format google-visualization

您必须使用以下数据绘制jquery谷歌图表（行）：

['KUW Date' , 'AP'] ,['2016-03-30 01:57:21', 1] ,['2016-03-30 01:54:21', 1] ,['2016-03-30 01:51:21', 1] ,['2016-03-30 01:48:21', 1] ,['2016-03-30 01:45:22', 1] ,['2016-03-30 01:42:21', 1] ,['2016-03-30 01:39:22', 1] ,['2016-03-30 01:36:24', 1] ,['2016-03-30 01:33:22', 1] ,['2016-03-30 01:30:23', 1] ,['2016-03-30 01:27:22', 1] ,['2016-03-30 01:24:21', 1] ,['2016-03-30 01:21:22', 1] ,['2016-03-30 01:18:22', 1] ,['2016-03-30 01:15:21', ] ,['2016-03-30 01:12:21', 1] ,['2016-03-30 01:09:18', 2] ,['2016-03-30 01:06:18', ] ,['2016-03-30 01:03:18', ] ,['2016-03-30 01:00:18', 2] ,['2016-03-30 00:57:18', 2] ,['2016-03-30 00:54:18', ] ,['2016-03-30 00:51:18', 1] ,['2016-03-30 00:48:18', 1] ,['2016-03-30 00:45:18', 1] ,['2016-03-30 00:42:18', 1] ,['2016-03-30 00:39:18', 1] ,['2016-03-30 00:36:29', 1] ,['2016-03-30 00:30:29', 1] ,['2016-03-30 00:27:30', 2] ,['2016-03-30 00:24:30', 2] ,['2016-03-30 00:21:30', ] ,['2016-03-30 00:18:29', ] ,['2016-03-30 00:15:29', 1] ,['2016-03-30 00:12:29', 1] ,['2016-03-30 00:09:29', ] ,['2016-03-30 00:06:29', ] ,['2016-03-30 00:03:29', 1] ,['2016-03-30 00:00:30', ] ,['2016-03-29 23:57:30', 1] ,['2016-03-29 23:54:30', 1] ,['2016-03-29 23:51:30', 1] ,['2016-03-29 23:48:30', ] ,['2016-03-29 23:45:29', 1] ,['2016-03-29 23:42:29', ] ,['2016-03-29 23:39:30', 1] ,['2016-03-29 23:36:29', 1] ,['2016-03-29 23:33:29', 1] ,['2016-03-29 23:30:29', 1] ,['2016-03-29 23:27:30', 1] ,['2016-03-29 23:24:29', 1] ,['2016-03-29 23:21:29', 1] ,['2016-03-29 23:18:30', 1] ,['2016-03-29 23:15:30', 1] ,['2016-03-29 23:12:30', 1] ,['2016-03-29 23:09:30', 1] ,['2016-03-29 23:06:29', 1] ,['2016-03-29 23:03:29', 1] ,['2016-03-29 23:00:29', 1] ,['2016-03-29 22:57:29', 1] ,['2016-03-29 22:54:29', 1] ,['2016-03-29 22:51:29', 1] ,['2016-03-29 22:48:29', 1] ,['2016-03-29 22:45:29', 1] ,['2016-03-29 22:42:30', 1] ,['2016-03-29 22:39:29', ] ,['2016-03-29 22:36:30', ] ,['2016-03-29 22:33:29', 2] ,['2016-03-29 22:30:30', 2] ,['2016-03-29 22:27:30', 2] ,['2016-03-29 22:24:30', 1] ,['2016-03-29 22:21:29', ] ,['2016-03-29 22:18:30', 1] ,['2016-03-29 22:15:29', ] ,['2016-03-29 22:12:29', ] ,['2016-03-29 22:09:30', ] ,['2016-03-29 22:06:29', ] ,['2016-03-29 22:03:29', ] ,['2016-03-29 22:00:29', ] ,['2016-03-29 21:57:29', ] ,['2016-03-29 21:54:29', ] ,['2016-03-29 21:51:29', ] ,['2016-03-29 21:48:30', 1] ,['2016-03-29 21:45:29', 1] ,['2016-03-29 21:42:29', 1] ,['2016-03-29 21:39:29', 1] ,['2016-03-29 21:36:30', 1] ,['2016-03-29 21:33:29', 1] ,['2016-03-29 21:30:29', 2] ,['2016-03-29 21:27:29', 2]

代表日期/ hh：ss in haxis和访客在Yaxis。

我的脚本代码如下：

  <script>
   google.load("visualization", "1", {packages:["corechart","table"]});
       google.setOnLoadCallback(drawProductAllocationChartBO99);
      function drawProductAllocationChartBO99() {
        var dataBO99 = google.visualization.arrayToDataTable(
       <?php echo $stringAP9;?>
        );

        var options = {

          //title: 'My Daily Activities'
      is3D: false,
      backgroundColor: 'transparent',
      titleFontSize:12,
          width: '100%',
          height: '100%',
          sliceVisibilityThreshold: 0.04,
      legend: { position: 'top', maxLines: 2 }
        };

        var productAllocationChartBO99 = new google.visualization.LineChart(document.getElementById('product-allocation-chartBO99'));
        productAllocationChartBO99.draw(dataBO99, options);


      }
</script>

我从这个google documentation了解到，我应该具有匹配我的日期格式的haxis的特定选项，或者可能更改我的json以匹配Google图表格式。

您有什么建议来解决这个问题？

由于

1 个答案:

答案 0 :(得分：1)

首先，我建议加载loader.js与旧库jsapi。

接下来，问题中提供的数据需要一些操作才能工作。

要格式化连续轴，以下示例将字符串值转换为日期 有关详细信息，请参阅Discrete vs Continuous

此外，每行必须具有相同的列数，并将null添加到缺失值。

两个例子......

<强>宪章
设置日期格式并使用interpolateNulls: true填写null数据

中的空白

<强> ChartB
使用相同的格式，但添加自定义刻度标记，并防止文本倾斜与...
maxAlternation: 1和slantedText: false 

google.charts.load('44', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = [
    ['KUW Date', 'AP'], ['2016-03-30 01:57:21', 1], ['2016-03-30 01:54:21', 1], ['2016-03-30 01:51:21', 1], ['2016-03-30 01:48:21', 1], ['2016-03-30 01:45:22', 1], ['2016-03-30 01:42:21', 1], ['2016-03-30 01:39:22', 1], ['2016-03-30 01:36:24', 1], ['2016-03-30 01:33:22', 1], ['2016-03-30 01:30:23', 1], ['2016-03-30 01:27:22', 1], ['2016-03-30 01:24:21', 1], ['2016-03-30 01:21:22', 1], ['2016-03-30 01:18:22', 1], ['2016-03-30 01:15:21', ], ['2016-03-30 01:12:21', 1], ['2016-03-30 01:09:18', 2], ['2016-03-30 01:06:18', ], ['2016-03-30 01:03:18', ], ['2016-03-30 01:00:18', 2], ['2016-03-30 00:57:18', 2], ['2016-03-30 00:54:18', ], ['2016-03-30 00:51:18', 1], ['2016-03-30 00:48:18', 1], ['2016-03-30 00:45:18', 1], ['2016-03-30 00:42:18', 1], ['2016-03-30 00:39:18', 1], ['2016-03-30 00:36:29', 1], ['2016-03-30 00:30:29', 1], ['2016-03-30 00:27:30', 2], ['2016-03-30 00:24:30', 2], ['2016-03-30 00:21:30', ], ['2016-03-30 00:18:29', ], ['2016-03-30 00:15:29', 1], ['2016-03-30 00:12:29', 1], ['2016-03-30 00:09:29', ], ['2016-03-30 00:06:29', ], ['2016-03-30 00:03:29', 1], ['2016-03-30 00:00:30', ], ['2016-03-29 23:57:30', 1], ['2016-03-29 23:54:30', 1], ['2016-03-29 23:51:30', 1], ['2016-03-29 23:48:30', ], ['2016-03-29 23:45:29', 1], ['2016-03-29 23:42:29', ], ['2016-03-29 23:39:30', 1], ['2016-03-29 23:36:29', 1], ['2016-03-29 23:33:29', 1], ['2016-03-29 23:30:29', 1], ['2016-03-29 23:27:30', 1], ['2016-03-29 23:24:29', 1], ['2016-03-29 23:21:29', 1], ['2016-03-29 23:18:30', 1], ['2016-03-29 23:15:30', 1], ['2016-03-29 23:12:30', 1], ['2016-03-29 23:09:30', 1], ['2016-03-29 23:06:29', 1], ['2016-03-29 23:03:29', 1], ['2016-03-29 23:00:29', 1], ['2016-03-29 22:57:29', 1], ['2016-03-29 22:54:29', 1], ['2016-03-29 22:51:29', 1], ['2016-03-29 22:48:29', 1], ['2016-03-29 22:45:29', 1], ['2016-03-29 22:42:30', 1], ['2016-03-29 22:39:29', ], ['2016-03-29 22:36:30', ], ['2016-03-29 22:33:29', 2], ['2016-03-29 22:30:30', 2], ['2016-03-29 22:27:30', 2], ['2016-03-29 22:24:30', 1], ['2016-03-29 22:21:29', ], ['2016-03-29 22:18:30', 1], ['2016-03-29 22:15:29', ], ['2016-03-29 22:12:29', ], ['2016-03-29 22:09:30', ], ['2016-03-29 22:06:29', ], ['2016-03-29 22:03:29', ], ['2016-03-29 22:00:29', ], ['2016-03-29 21:57:29', ], ['2016-03-29 21:54:29', ], ['2016-03-29 21:51:29', ], ['2016-03-29 21:48:30', 1], ['2016-03-29 21:45:29', 1], ['2016-03-29 21:42:29', 1], ['2016-03-29 21:39:29', 1], ['2016-03-29 21:36:30', 1], ['2016-03-29 21:33:29', 1], ['2016-03-29 21:30:29', 2], ['2016-03-29 21:27:29', 2]
  ];

  var tickMarks = [];
  for (var i = 1; i < data.length; i++) {
    // convert to date
    data[i][0] = new Date(data[i][0]);

    // add tick mark for every sixth date
    if ((i % 6) === 0) {
      tickMarks.push(data[i][0]);
    }

    // each row must have two columns, add null column value
    if (data[i].length === 1) {
      data[i].push(null);
    }
  }

  var optionsA = {
    hAxis: {
      format: 'MM/dd/yyyy \r\n H:mm:ss',
    },

    // fill in gaps from missing data
    interpolateNulls: true
  };

  var optionsB = {
    hAxis: {
      // date format
      format: 'MM/dd/yyyy \r\n H:mm:ss',

      // prevent slanted, partial text
      maxAlternation: 1,
      slantedText: false,

      // custom tick marks
      ticks: tickMarks
    },
    interpolateNulls: false
  };

  var chartA = new google.visualization.LineChart(document.getElementById('chart_divA'));
  chartA.draw(google.visualization.arrayToDataTable(data), optionsA);

  var chartB = new google.visualization.LineChart(document.getElementById('chart_divB'));
  chartB.draw(google.visualization.arrayToDataTable(data), optionsB);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_divA"></div>
<div id="chart_divB"></div>

相关问题
最新问题