javascript - 在谷歌图表 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

Working Fiddle

Answer 1

是的，但不是那么简单。
您应该知道的第一件事是，没有选项可以为string 类型的主要列创建垂直线。因此我们需要使用 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
            }
        }
    };

特此完整的工作 fiddle :http://jsfiddle.net/j29Pt/417/