我有两个谷歌图表，两个底轴的时间跨度都比我想要的长。下面的第一个运行到2月17日。如何在当月的最后一天停止图表？
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Time', 'Electricity', 'Gas'],
[new Date('2017-01-01'), 61.7, 74.04],
[new Date('2017-01-02'), 91.145, 109.374],
[new Date('2017-01-03'), 28.378, 74.62],
[new Date('2017-01-04'), 16.75, 33.5],
[new Date('2017-01-05'), 26.136, 39.204],
[new Date('2017-01-06'), 466.248, 41.975],
[new Date('2017-01-07'), 0, 117.414],
[new Date('2017-01-08'), 42.268, 0],
[new Date('2017-01-09'), 10.442, 31.326],
[new Date('2017-01-10'), 56.356, 0],
[new Date('2017-01-11'), 21.15, 31.725],
[new Date('2017-01-12'), 55.226, 82.839],
[new Date('2017-01-13'), 488.352, 610.44],
[new Date('2017-01-14'), 148.252, 85.035],
[new Date('2017-01-15'), 141.925, 198.695],
[new Date('2017-01-16'), 102.36, 120.372],
[new Date('2017-01-17'), 25.86, 30.17],
[new Date('2017-01-18'), 127.848, 149.156],
[new Date('2017-01-19'), 0, 0],
[new Date('2017-01-20'), 0, 0],
[new Date('2017-01-21'), 0, 0],
[new Date('2017-01-22'), 0, 0],
[new Date('2017-01-23'), 0, 0],
[new Date('2017-01-24'), 0, 0],
[new Date('2017-01-25'), 0, 0],
[new Date('2017-01-26'), 0, 0],
[new Date('2017-01-27'), 0, 0],
[new Date('2017-01-28'), 0, 0],
[new Date('2017-01-29'), 0, 0],
[new Date('2017-01-30'), 0, 0],
[new Date('2017-01-31'), 0, 0],
]);
var ticks = [
new Date(2017, 0, 1),
new Date(2017, 1, 1),
new Date(2017, 2, 1),
new Date(2017, 3, 1),
new Date(2017, 4, 1),
new Date(2017, 5, 1),
new Date(2017, 6, 1),
new Date(2017, 7, 1),
new Date(2017, 8, 1),
new Date(2017, 9, 1),
new Date(2017, 10, 1),
new Date(2017, 11, 1)
];
var options = {
chartArea: {
width: "80%"
},
width: 900,
height: 500,
hAxis: {
title: 'Daily Totals Per Month',
viewWindowMode: 'pretty',
slantedText: false,
format: 'd MMM yy',
gridlines: {
color: 'transparent'
},
textStyle: {
color: 'black',
fontSize: 12,
fontName: 'Arial',
bold: true,
italic: false,
textAlign: 'right'
},
titleTextStyle: {
color: 'black',
fontSize: 16,
fontName: 'Arial',
bold: true,
italic: false
},
},
vAxis: {
title: 'kWh',
titleTextStyle: {
color: 'black',
fontSize: 16,
fontName: 'Arial',
bold: true,
italic: false
},
textStyle: {
color: 'black',
fontSize: 12,
fontName: 'Arial',
bold: true,
italic: false
},
},
legend: {
position: 'top',
width: "90%"
},
backgroundColor: '#fff',
colors: ['#f36daa', '#51b9d2'],
};
var chart = new google.visualization.AreaChart(document.getElementById('graph-tab-2'));
chart.draw(data, options);
}<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div class="month-graph graph" id="graph-tab-2">
下一张图表跨越一天。但我只有48个数据点从00:00开始到23:30结束。如何在23:30停止图表，所以我在图表末尾没有30分钟的差距。
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Time', 'Electricity', 'Gas'],
[new Date('2017-01-17 00:00'), 0.059, 0.059],
[new Date('2017-01-17 00:30'), 0.079, 0.079],
[new Date('2017-01-17 01:00'), 0.076, 0.076],
[new Date('2017-01-17 01:30'), 0.062, 0.062],
[new Date('2017-01-17 02:00'), 0.091, 0.091],
[new Date('2017-01-17 02:30'), 0.050, 0.050],
[new Date('2017-01-17 03:00'), 0.094, 0.094],
[new Date('2017-01-17 03:30'), 0.064, 0.064],
[new Date('2017-01-17 04:00'), 0.082, 0.082],
[new Date('2017-01-17 04:30'), 0.081, 0.081],
[new Date('2017-01-17 05:00'), 0.060, 0.060],
[new Date('2017-01-17 05:30'), 0.089, 0.089],
[new Date('2017-01-17 06:00'), 0.060, 0.060],
[new Date('2017-01-17 06:30'), 0.088, 0.088],
[new Date('2017-01-17 07:00'), 0.080, 0.080],
[new Date('2017-01-17 07:30'), 0.065, 0.065],
[new Date('2017-01-17 08:00'), 0.094, 0.094],
[new Date('2017-01-17 08:30'), 0.060, 0.060],
[new Date('2017-01-17 09:00'), 0.091, 0.091],
[new Date('2017-01-17 09:30'), 0.158, 0.158],
[new Date('2017-01-17 10:00'), 0.188, 0.188],
[new Date('2017-01-17 10:30'), 0.238, 0.238],
[new Date('2017-01-17 11:00'), 0.196, 0.196],
[new Date('2017-01-17 11:30'), 0.193, 0.193],
[new Date('2017-01-17 12:00'), 0.181, 0.181],
[new Date('2017-01-17 12:30'), 0.238, 0.238],
[new Date('2017-01-17 13:00'), 0.194, 0.194],
[new Date('2017-01-17 13:30'), 0.172, 0.172],
[new Date('2017-01-17 14:00'), 0.202, 0.202],
[new Date('2017-01-17 14:30'), 0.195, 0.195],
[new Date('2017-01-17 15:00'), 0.243, 0.243],
[new Date('2017-01-17 15:30'), 0.203, 0.203],
[new Date('2017-01-17 16:00'), 0.176, 0.176],
[new Date('2017-01-17 16:30'), 0.108, 0.108],
[new Date('2017-01-17 17:00'), 0.000, 0.000],
[new Date('2017-01-17 17:30'), 0.000, 0.000],
[new Date('2017-01-17 18:00'), 0.000, 0.000],
[new Date('2017-01-17 18:30'), 0.000, 0.000],
[new Date('2017-01-17 19:00'), 0.000, 0.000],
[new Date('2017-01-17 19:30'), 0.000, 0.000],
[new Date('2017-01-17 20:00'), 0.000, 0.000],
[new Date('2017-01-17 20:30'), 0.000, 0.000],
[new Date('2017-01-17 21:00'), 0.000, 0.000],
[new Date('2017-01-17 21:30'), 0.000, 0.000],
[new Date('2017-01-17 22:00'), 0.000, 0.000],
[new Date('2017-01-17 22:30'), 0.000, 0.000],
[new Date('2017-01-17 23:00'), 0.000, 0.000],
[new Date('2017-01-17 23:30'), 0.000, 0.000],
]);
var options = {
chartArea: {
width: "80%"
},
width: 900,
height: 500,
hAxis: {
title: 'By day',
viewWindowMode: 'pretty',
slantedText: false,
count: -1,
format: "ha",
gridlines: {
color: 'transparent'
},
textStyle: {
color: 'black',
fontSize: 12,
fontName: 'Arial',
bold: true,
italic: false
},
titleTextStyle: {
color: 'black',
fontSize: 16,
fontName: 'Arial',
bold: true,
italic: false
},
viewWindow: {
// max: new Date('', '', '','23','30')
},
},
vAxis: {
title: 'kWh',
titleTextStyle: {
color: 'black',
fontSize: 16,
fontName: 'Arial',
bold: true,
italic: false
},
textStyle: {
color: 'black',
fontSize: 12,
fontName: 'Arial',
bold: true,
italic: false
},
},
legend: {
position: 'top',
width: "90%"
},
backgroundColor: '#fff',
colors: ['#f36daa', '#51b9d2'],
};
var chart = new google.visualization.AreaChart(document.getElementById('graph-tab-1'));
chart.draw(data, options);
}<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div class="month-graph graph" id="graph-tab-1">
我尝试添加参数
viewWindow：{max：new Date（''，''，''，'23'，'30'）}，
但它似乎无法正常工作
答案 0 :(得分：0)
首先，在加载Google数据时建议不使用以下日期构造函数
new Date("yyyy-MM-dd")
根据一年中的时区/时间，您可能会得到与预期不同的日期，
如this question
相反，建议使用以下date constructors之一......
new Date(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]]);
（请注意，month基于上述内容为零）
- 或 -
new Date("MM/dd/yyyy")
关于第一个问题，
使用viewWindow.max将确保轴不超过提供的日期
但不会确保显示最后一天的标签
确保图表在最后一天显示和停止的唯一方法是提供您自己的ticks
您可以使用DataTable方法getColumnRange动态构建刻度
getColumnRange(columnIndex)将返回一个对象{}
提供min提供的max和columnIndex的属性
请参阅以下工作片段，
getColumnRange用于每隔三天构建ticks以及最后一天......
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Time', 'Electricity', 'Gas'],
[new Date(2017, 0, 1), 61.7, 74.04],
[new Date(2017, 0, 2), 91.145, 109.374],
[new Date(2017, 0, 3), 28.378, 74.62],
[new Date(2017, 0, 4), 16.75, 33.5],
[new Date(2017, 0, 5), 26.136, 39.204],
[new Date(2017, 0, 6), 466.248, 41.975],
[new Date(2017, 0, 7), 0, 117.414],
[new Date(2017, 0, 8), 42.268, 0],
[new Date(2017, 0, 9), 10.442, 31.326],
[new Date(2017, 0, 10), 56.356, 0],
[new Date(2017, 0, 11), 21.15, 31.725],
[new Date(2017, 0, 12), 55.226, 82.839],
[new Date(2017, 0, 13), 488.352, 610.44],
[new Date(2017, 0, 14), 148.252, 85.035],
[new Date(2017, 0, 15), 141.925, 198.695],
[new Date(2017, 0, 16), 102.36, 120.372],
[new Date(2017, 0, 17), 25.86, 30.17],
[new Date(2017, 0, 18), 127.848, 149.156],
[new Date(2017, 0, 19), 0, 0],
[new Date(2017, 0, 20), 0, 0],
[new Date(2017, 0, 21), 0, 0],
[new Date(2017, 0, 22), 0, 0],
[new Date(2017, 0, 23), 0, 0],
[new Date(2017, 0, 24), 0, 0],
[new Date(2017, 0, 25), 0, 0],
[new Date(2017, 0, 26), 0, 0],
[new Date(2017, 0, 27), 0, 0],
[new Date(2017, 0, 28), 0, 0],
[new Date(2017, 0, 29), 0, 0],
[new Date(2017, 0, 30), 0, 0],
[new Date(2017, 0, 31), 0, 0],
]);
var dateRange = data.getColumnRange(0);
var oneDay = (1000 * 60 * 60 * 24);
var ticksAxisH = [];
for (var i = dateRange.min.getTime(); i <= dateRange.max.getTime(); i = i + oneDay) {
// add tick every 3 days
if ((((i - dateRange.min.getTime()) / oneDay) % 3) === 0) {
ticksAxisH.push(new Date(i));
}
}
// ensure last day is added
if (ticksAxisH[ticksAxisH.length - 1].getTime() !== dateRange.max.getTime()) {
ticksAxisH.push(dateRange.max);
}
var options = {
chartArea: {
width: "80%"
},
width: 900,
height: 500,
hAxis: {
title: 'Daily Totals Per Month',
viewWindowMode: 'pretty',
ticks: ticksAxisH,
slantedText: false,
format: 'd MMM yy',
gridlines: {
color: 'transparent'
},
textStyle: {
color: 'black',
fontSize: 12,
fontName: 'Arial',
bold: true,
italic: false,
textAlign: 'right'
},
titleTextStyle: {
color: 'black',
fontSize: 16,
fontName: 'Arial',
bold: true,
italic: false
},
},
vAxis: {
title: 'kWh',
titleTextStyle: {
color: 'black',
fontSize: 16,
fontName: 'Arial',
bold: true,
italic: false
},
textStyle: {
color: 'black',
fontSize: 12,
fontName: 'Arial',
bold: true,
italic: false
},
},
legend: {
position: 'top',
width: "90%"
},
backgroundColor: '#fff',
colors: ['#f36daa', '#51b9d2'],
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
关于第二个问题，可以应用相同的技术
此处，ticks每四小时添加一次，以及最后一次
请参阅以下工作代码段...
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Time', 'Electricity', 'Gas'],
[new Date('2017-01-17 00:00'), 0.059, 0.059],
[new Date('2017-01-17 00:30'), 0.079, 0.079],
[new Date('2017-01-17 01:00'), 0.076, 0.076],
[new Date('2017-01-17 01:30'), 0.062, 0.062],
[new Date('2017-01-17 02:00'), 0.091, 0.091],
[new Date('2017-01-17 02:30'), 0.050, 0.050],
[new Date('2017-01-17 03:00'), 0.094, 0.094],
[new Date('2017-01-17 03:30'), 0.064, 0.064],
[new Date('2017-01-17 04:00'), 0.082, 0.082],
[new Date('2017-01-17 04:30'), 0.081, 0.081],
[new Date('2017-01-17 05:00'), 0.060, 0.060],
[new Date('2017-01-17 05:30'), 0.089, 0.089],
[new Date('2017-01-17 06:00'), 0.060, 0.060],
[new Date('2017-01-17 06:30'), 0.088, 0.088],
[new Date('2017-01-17 07:00'), 0.080, 0.080],
[new Date('2017-01-17 07:30'), 0.065, 0.065],
[new Date('2017-01-17 08:00'), 0.094, 0.094],
[new Date('2017-01-17 08:30'), 0.060, 0.060],
[new Date('2017-01-17 09:00'), 0.091, 0.091],
[new Date('2017-01-17 09:30'), 0.158, 0.158],
[new Date('2017-01-17 10:00'), 0.188, 0.188],
[new Date('2017-01-17 10:30'), 0.238, 0.238],
[new Date('2017-01-17 11:00'), 0.196, 0.196],
[new Date('2017-01-17 11:30'), 0.193, 0.193],
[new Date('2017-01-17 12:00'), 0.181, 0.181],
[new Date('2017-01-17 12:30'), 0.238, 0.238],
[new Date('2017-01-17 13:00'), 0.194, 0.194],
[new Date('2017-01-17 13:30'), 0.172, 0.172],
[new Date('2017-01-17 14:00'), 0.202, 0.202],
[new Date('2017-01-17 14:30'), 0.195, 0.195],
[new Date('2017-01-17 15:00'), 0.243, 0.243],
[new Date('2017-01-17 15:30'), 0.203, 0.203],
[new Date('2017-01-17 16:00'), 0.176, 0.176],
[new Date('2017-01-17 16:30'), 0.108, 0.108],
[new Date('2017-01-17 17:00'), 0.000, 0.000],
[new Date('2017-01-17 17:30'), 0.000, 0.000],
[new Date('2017-01-17 18:00'), 0.000, 0.000],
[new Date('2017-01-17 18:30'), 0.000, 0.000],
[new Date('2017-01-17 19:00'), 0.000, 0.000],
[new Date('2017-01-17 19:30'), 0.000, 0.000],
[new Date('2017-01-17 20:00'), 0.000, 0.000],
[new Date('2017-01-17 20:30'), 0.000, 0.000],
[new Date('2017-01-17 21:00'), 0.000, 0.000],
[new Date('2017-01-17 21:30'), 0.000, 0.000],
[new Date('2017-01-17 22:00'), 0.000, 0.000],
[new Date('2017-01-17 22:30'), 0.000, 0.000],
[new Date('2017-01-17 23:00'), 0.000, 0.000],
[new Date('2017-01-17 23:30'), 0.000, 0.000],
]);
var dateRange = data.getColumnRange(0);
var oneHour = (1000 * 60 * 60);
var ticksAxisH = [];
for (var i = dateRange.min.getTime(); i <= dateRange.max.getTime(); i = i + oneHour) {
// add tick every 4 hours
if ((((i - dateRange.min.getTime()) / oneHour) % 4) === 0) {
ticksAxisH.push(new Date(i));
}
}
// ensure last hour is added
if (ticksAxisH[ticksAxisH.length - 1].getTime() !== dateRange.max.getTime()) {
ticksAxisH.push(dateRange.max);
}
var options = {
chartArea: {
width: "80%"
},
width: 900,
height: 500,
hAxis: {
title: 'By day',
viewWindowMode: 'pretty',
ticks: ticksAxisH,
slantedText: false,
count: -1,
format: "ha",
gridlines: {
color: 'transparent'
},
textStyle: {
color: 'black',
fontSize: 12,
fontName: 'Arial',
bold: true,
italic: false
},
titleTextStyle: {
color: 'black',
fontSize: 16,
fontName: 'Arial',
bold: true,
italic: false
},
viewWindow: {
// max: new Date('', '', '','23','30')
},
},
vAxis: {
title: 'kWh',
titleTextStyle: {
color: 'black',
fontSize: 16,
fontName: 'Arial',
bold: true,
italic: false
},
textStyle: {
color: 'black',
fontSize: 12,
fontName: 'Arial',
bold: true,
italic: false
},
},
legend: {
position: 'top',
width: "90%"
},
backgroundColor: '#fff',
colors: ['#f36daa', '#51b9d2'],
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>