javascript - 通过Google图表在条形图中显示Vaxis线

我在一个项目中需要显示这样的图形。

我正在使用谷歌可视化图表API来实现这一目标。我能够绘制如下图表。

我对此很陌生。我面临的问题是，我无法绘制示例图所示的vAxis线。另外，如何更改颜色和使用的颜色相同。如图所示，更改VAxis的间隔。
请指教。
下面是我正在使用的代码

<html>
    <head>
        <script type="text/javascript" src="https://www.google.com/jsapi">
            </script>
        <script type="text/javascript">
            google.load("visualization", "1", {packages:["corechart"]});
            google.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = google.visualization.arrayToDataTable(
                                                                 [ ['Year', 'Sales', 'Expenses', 'Profit'],
                                                                  ['May,14', 5, 1, 2],
                                                                  ['April,14', 4, 2, 3],
                                                                  ['March,14', 6, 7, 2],
                                                                  ['Feb,14', 1, 7, 2],
                                                                  ['Jan,14', 3, 3, 2],
                                                                  ['Dec,14', 4, 3, 2],
                                                                  ['Nov,14', 5, 3, 2],
                                                                  ['Oct,14', 6, 6, 2],
                                                                  ['Sept,14',7, 6, 2],
                                                                  ['Aug,14', 3, 5, 2],
                                                                  ['July,14', 5, 5, 2],
                                                                  ['June,14', 6, 3, 2]]);
                var options = {
                    orientation:'horizontal',
                    animation: {duration: 2000, easing: 'out'},
                    legend: 'none' };

                var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
                chart.draw(data, options); }
        </script>
    </head>
    <body>
        <div id="chart_div" style="position: absolute; top:-50px; left:-70px; width: 900px; height: 500px;">
        </div>
    </body>
</html>

最佳答案

如果使用连续类型的轴，您将在此处得到一条线。由于要绘制月份，因此可以使用“日期”类型：

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses', 'Profit'],
        [new Date(2014, 4), 5, 1, 2],
        [new Date(2014, 3), 4, 2, 3],
        [new Date(2014, 2), 6, 7, 2],
        [new Date(2014, 1), 1, 7, 2],
        [new Date(2014, 0), 3, 3, 2],
        [new Date(2014, 11), 4, 3, 2],
        [new Date(2014, 10), 5, 3, 2],
        [new Date(2014, 9), 6, 6, 2],
        [new Date(2014, 8),7, 6, 2],
        [new Date(2014, 7), 3, 5, 2],
        [new Date(2014, 6), 5, 5, 2],
        [new Date(2014, 5), 6, 3, 2]
    ]);

    var dateFormatter = new google.visualization.DateFormat({pattern: 'MMM, yyyy'});
    dateFormatter.format(data, 0);

    var options = {
        // FYI, a horizontal BarChart is the same thing as a ColumnChart
        orientation: 'horizontal',
        animation: {
            duration: 2000,
            easing: 'out'
        },
        legend: 'none',
        hAxis: {
            format: 'MMM, yyyy'
        }
    };

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

在此处查看示例：http://jsfiddle.net/asgallant/WJCpx/

关于javascript - 通过Google图表在条形图中显示Vaxis线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23647371/