javascript - 防止 Google 图表 X 轴中日期时间列的舍入

Question

我有一个可用的谷歌图表，显示过去 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 分钟的正确日期时间 block ，但水平轴从 :00 开始

如何使水平轴的起始位置与图形表示相同，而不是 :00？

Answer 1

您可以为 hAxis 设置自己的ticks 和viewWindow: {min: lower_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>