我正在尝试使用以下类型的数据点构建折线图。每个数据点由以下数据组成:
- 日期
- 值 1
- 值(value) 2
这样一个点的例子是:(2015-01-15, 'Value 1', 'Value 2')
我能够将这些数据放入具有两条单独线条的折线图中,一条用于值 1,一根用于值 2。
现在的问题是 hAxis。我想让那里的月份名称动态显示数据。如果我显示 2015 年 1 月到 2015 年 3 月的数据,我希望 hAxis 有 3 个部分:1 月、2 月、3 月。
我尝试了以下方法:
hAxis: {
format: 'MM'
}
这基本上是有效的,但它现在只将我的图表分为 04、07 和 10 的 3 个部分。我如何解决每个月,它也存在于数据中,在 hAxis 中以其月份名称 (' March' 而不是 '03')。
这是问题的代码笔:http://codepen.io/anon/pen/XmXQEO 你怎么看,hAxis 显示 04、07、10 而不是一月、二月、三月、四月、五月、六月、七月、八月、九月、十月、十一月、十二月。
编辑:Vadim Gremyachev 提供了标签格式问题的解决方案,我必须使用“MMMM”来获得完整的月份名称。现在缺少的一点是拥有所有使用的月份,而不仅仅是 3 个。
谢谢!
最佳答案
您可以将 hAxis.format
设置为 MMMM
以将标签显示为月份名称。并且你可以提供hAxis.ticks
来手动指定X轴标签,以下示例演示如何显示所有月份标签
google.load('visualization', '1', { packages: ['corechart', 'line'] });
google.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');
data.addColumn('number', 'Value 1');
data.addColumn('number', 'Value 2');
data.addRows([
[new Date('2015-01-01'), 40, 50],
[new Date('2015-01-15'), 20, 80],
[new Date('2015-02-01'), 20, 80],
[new Date('2015-02-15'), 60, 30],
[new Date('2015-03-01'), 40, 50],
[new Date('2015-03-15'), 20, 80],
[new Date('2015-04-01'), 20, 80],
[new Date('2015-04-15'), 60, 30],
[new Date('2015-05-01'), 40, 50],
[new Date('2015-05-15'), 20, 80],
[new Date('2015-06-01'), 20, 80],
[new Date('2015-06-15'), 60, 30],
[new Date('2015-07-01'), 40, 50],
[new Date('2015-07-15'), 20, 80],
[new Date('2015-08-01'), 20, 80],
[new Date('2015-08-15'), 60, 30],
[new Date('2015-09-01'), 40, 50],
[new Date('2015-09-15'), 20, 80],
[new Date('2015-10-01'), 20, 80],
[new Date('2015-10-15'), 60, 30],
[new Date('2015-11-01'), 40, 50],
[new Date('2015-11-15'), 20, 80],
[new Date('2015-12-01'), 20, 80],
[new Date('2015-12-15'), 60, 30],
]);
var dateTicks = [];
for (var m = 1; m <= 12; m++)
dateTicks.push(new Date('2015-' + m + '-1'));
var options = {
hAxis: {
format: 'MMMM',
ticks: dateTicks
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
关于javascript - 谷歌图表 : Line Chart with dynamic month names in hAxis,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32603123/