在谷歌图表 hAxis 中显示月份

Question

我们试图在谷歌图表中显示水平线和垂直线。为此，我们需要使用 hAxis 和 vAxis 属性。

但是hAxis.format没有月份的格式，那么我们如何显示垂直线呢？

  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', ],
    ['Jan', 1000],
    ['Feb', 1170],
    ['Mar', 660],
    ['Apr', 1030]
]);

var options = {
    title: '',
    hAxis: {
        title: 'Year',
        minValue: 0,
        titleTextStyle: {
            color: '#333'
        },
        gridlines: {
            color: '#f3f3f3',
            count: 5
        },
         format: 'MMM'
    },
    vAxis: {
        minValue: 0,
        gridlines: {
            color: '#f3f3f3',
            count: 5
        }
    }
};

JsFiddle

这是 jsFiddle 年，它显示了两条线（水平和垂直）

工作小提琴

Answer 1

是的，有，但并不是那么简单。
您应该知道的第一件事是，没有选项可以为类型的主要列创建垂直线string。因此我们需要使用 example 的列类型number并稍后修复标签。

为此，我们像这样定义数据表：

var data = new google.visualization.DataTable();
        data.addColumn('number', 'Month');
        data.addColumn('number', 'Sales');
        data.addRows([
        [{v: 0, f:'Jan'}, 1000],
        [{v: 1, f:'Feb'}, 1170],
        [{v: 2, f:'Mar'}, 660],
        [{v: 3, f:'Apr'}, 1030]
    ]);

我们在其中设置轴的数值和字符串标签Month。
仅此并format删除属性后，我们将得到垂直线，但 x 轴标签的数字而不是字符串，这不是我们想要的。
为了解决这个问题，我们可以设置hAxis ticks强制在图中使用正确的标签。

var options = {
        title: '',
        hAxis: {
            title: 'Month',
            titleTextStyle: {
                color: '#333'
            },
            baseline: 0,
            gridlines: {
                color: '#f3f3f3',
              count: 4
            },
           ticks: [{v: 0, f:'Jan'},{v: 1, f:'Feb'},{v: 2, f:'Mar'},{v: 3, f:'Apr'}], // <------- This does the trick
        },
        vAxis: {
            minValue: 0,
            gridlines: {
                color: '#f3f3f3',
                count: 5
            }
        }
    };

据此，完整的工作小提琴：http://jsfiddle.net/j29Pt/417/