我正在使用Google Charts API在我正在处理的webapp上包含各种图表。我使用的图表类型是区域图表,折线图或柱形图。
当我将图表的显示切换为周显示时,我希望任何一点的标题如下所示。我该怎么做?我应该设置哪个参数。
答案 0 :(得分:2)
数据表中的每个单元格都有一个值,格式化值为
可以使用对象表示法设置...
{
v: 1,
f: 'Jan 1, 2017 - Jan, 7 2017'
}
或使用以下数据表方法...
setValue(row, col, val)
setFormattedValue(row, col, formattedVal)
setCell(row, col, val, formattedVal)
在以下示例中,
x轴的值是周数(从零开始),
格式化的值是日期范围
日期格式化程序用于构建格式化的值...
var xValue = {
v: (i - startDate.getTime()) / oneWeek,
f: formatDate.formatValue(dateBegin) + ' - ' + formatDate.formatValue(dateEnd)
};
请参阅以下工作代码段...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var formatDate = new google.visualization.DateFormat({
pattern: 'MMM dd, yyyy'
});
var data = new google.visualization.DataTable();
data.addColumn('number', 'Week');
data.addColumn('number', 'y0');
var oneWeek = (1000 * 60 * 60 * 24 * 7);
var startDate = new Date(2017, 0, 1);
var endDate = new Date();
for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneWeek) {
// x value
var dateBegin = new Date(i);
var dateEnd = new Date(i + oneWeek - 1);
var xValue = {
v: (i - startDate.getTime()) / oneWeek,
f: formatDate.formatValue(dateBegin) + ' - ' + formatDate.formatValue(dateEnd)
};
// y value (y = 2x + 8)
var yValue = 2 * xValue.v + 8;
// add data row
data.addRow([
xValue,
yValue
]);
}
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>