javascript - Google图表:hAxis中具有动态月份名称的折线图

我正在尝试使用以下类型的数据点构建折线图。每个数据点都包含以下数据：


日期
价值1
价值2


例如：（2015-01-15，“值1”，“值2”）

我能够将这些数据带入带有两个单独折线的折线图中，一个折线表示数值1，另一个折线表示数值2。

现在的问题是hAxis。我想让那里的月份名称动态显示数据。如果我显示2015年1月至2015年3月的数据，则我希望hAxis具有3个部分：1月，2月，3月。

我尝试了以下方法：

hAxis: {
   format: 'MM'
}

这基本上是可行的，但是现在只将我的图形分为3个部分，分别是04、07和10。如何解决每个月，也存在于数据中的hAxis的月名称（改为“ March”） '03'）。

这是问题的代码笔：http://codepen.io/anon/pen/XmXQEO
可以看到，hAxis显示04、07、10，而不是1月，2月，3月，4月，5月，6月，7月，8月，9月，10月，11月，12月。

编辑：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>