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
            }
        }
    };

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

在谷歌图表中显示月份hAxis

1 个答案: