防止在Google图表X轴中舍入datetime列

时间：2016-02-08 21:44:34

标签： javascript charts google-visualization

我有一个工作的谷歌图表，显示过去24小时的数据，每小时一个数据集（从01:00到01:59等）。现在我正在尝试修改它以使其显示最近24小时的数据，但是从当前时间开始60分钟（从17:20到18:19等等）。这是我正在处理的代码（https://jsfiddle.net/70boo2ss/）：

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('datetime', 'Hours');
    data.addColumn('number', 'Col 1');
    data.addColumn('number', 'Col 2');
    data.addColumn('number', 'Percentage');

    data.addRows([
        [new Date(1454963244*1000),329,35,10.64],
        [new Date(1454959644*1000),17,1,5.88],
        [new Date(1454956044*1000),60,24,40.00],
        [new Date(1454952444*1000),60,24,40.00],
        [new Date(1454948844*1000),60,24,40.00],
        [new Date(1454945244*1000),60,24,40.00],
        [new Date(1454941644*1000),60,24,40.00],
        [new Date(1454938044*1000),60,24,40.00],
        [new Date(1454934444*1000),60,24,40.00],
        [new Date(1454930844*1000),60,24,40.00],
        [new Date(1454927244*1000),60,24,40.00],
        [new Date(1454923644*1000),60,24,40.00],
        [new Date(1454920044*1000),60,24,40.00],
        [new Date(1454916444*1000),60,24,40.00],
        [new Date(1454912844*1000),60,24,40.00],
        [new Date(1454909244*1000),60,24,40.00],
        [new Date(1454905644*1000),60,24,40.00],
        [new Date(1454902044*1000),60,24,40.00],
        [new Date(1454898444*1000),60,24,40.00],
        [new Date(1454894844*1000),60,24,40.00],
        [new Date(1454891244*1000),60,24,40.00],
        [new Date(1454887644*1000),60,24,40.00],
        [new Date(1454884044*1000),60,24,40.00],
        [new Date(1454880444*1000),60,24,40.00],
    ]);

    var formatter = new google.visualization.NumberFormat({
            fractionDigits: 2,
            suffix: '%'
    });
    formatter.format(data, 3);

    var options = {
        width: 1600,
        height: 500,
        backgroundColor: '#f1f1f1',
        colors: ['#ff851b', '#03a9f4', '#8dc859'],
        chartArea: {top:50, left:50, width: 1500},
        hAxis: {format: 'h:mma', textStyle: { fontSize: '12' }, gridlines: { count: 24 }},
        vAxes:[
            { },
            {   gridlines: { color: 'transparent' }, minValue: 0, maxValue: 100, format: '#\'%\'', viewWindowMode : 'explicit', viewWindow:{
                max:100,
                min:0
        }}],
        series:[
            {targetAxisIndex:0},
            {targetAxisIndex:0},
            {targetAxisIndex:1}
        ]
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart'));

    chart.draw(data, options);
}

正如您在jsfiddle上看到的那样，图形数据会偏移到正确的60分钟日期时间块，但横轴开始于：00

如何使水平轴与图形表示相同而不是：00？

1 个答案:

答案 0 :(得分：0)

您可以为hAxis设置自己的ticks和viewWindow: {min: lowest_date_in_data}。

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
	var data = new google.visualization.DataTable();
	data.addColumn('datetime', 'Hours');
	data.addColumn('number', 'Col 1');
	data.addColumn('number', 'Col 2');
	data.addColumn('number', 'Percentage');

	data.addRows([
		[new Date(1454963244*1000),329,35,10.64],
		[new Date(1454959644*1000),17,1,5.88],
		[new Date(1454956044*1000),60,24,40.00],
		[new Date(1454952444*1000),60,24,40.00],
		[new Date(1454948844*1000),60,24,40.00],
		[new Date(1454945244*1000),60,24,40.00],
		[new Date(1454941644*1000),60,24,40.00],
		[new Date(1454938044*1000),60,24,40.00],
		[new Date(1454934444*1000),60,24,40.00],
		[new Date(1454930844*1000),60,24,40.00],
		[new Date(1454927244*1000),60,24,40.00],
		[new Date(1454923644*1000),60,24,40.00],
		[new Date(1454920044*1000),60,24,40.00],
		[new Date(1454916444*1000),60,24,40.00],
		[new Date(1454912844*1000),60,24,40.00],
		[new Date(1454909244*1000),60,24,40.00],
		[new Date(1454905644*1000),60,24,40.00],
		[new Date(1454902044*1000),60,24,40.00],
		[new Date(1454898444*1000),60,24,40.00],
		[new Date(1454894844*1000),60,24,40.00],
		[new Date(1454891244*1000),60,24,40.00],
		[new Date(1454887644*1000),60,24,40.00],
		[new Date(1454884044*1000),60,24,40.00],
		[new Date(1454880444*1000),60,24,40.00],
	]);

    // build ticks
    var ticks = [];
    for (var i = 0; i < data.getNumberOfRows(); i++) {
      ticks.push(data.getValue(i, 0));
    }

	var formatter = new google.visualization.NumberFormat({
			fractionDigits: 2,
			suffix: '%'
	});
	formatter.format(data, 3);

	var options = {
		width: 1600,
		height: 500,
		backgroundColor: '#f1f1f1',
		colors: ['#ff851b', '#03a9f4', '#8dc859'],
		chartArea: {top:50, left:50, width: 1500},
		hAxis: {
          format: 'h:mma',
          textStyle: { fontSize: '12' },
          gridlines: { count: 24 },
          ticks: ticks,  // set ticks
          // set min window
          viewWindow: {min: data.getValue(data.getNumberOfRows() - 1, 0)}},
		vAxes:[
			{ },
			{	gridlines: { color: 'transparent' }, minValue: 0, maxValue: 100, format: '#\'%\'', viewWindowMode : 'explicit', viewWindow:{
				max:100,
				min:0
		}}],
		series:[
			{targetAxisIndex:0},
			{targetAxisIndex:0},
			{targetAxisIndex:1}
		]
	};

	var chart = new google.visualization.ColumnChart(document.getElementById('chart'));

	chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

相关问题
最新问题