通过谷歌图表在条形图中显示Vaxis线答案

【问题标题】：Show Vaxis line in bar graph through google chart通过谷歌图表在条形图中显示Vaxis线
【发布时间】：2014-05-14 06:41:39
【问题描述】：

我正在做一个需要像这样显示图表的项目。

我正在使用谷歌可视化图表 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>

【问题讨论】：

标签： javascript ios google-visualization bar-chart

【解决方案1】：

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

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/

【讨论】：

谢谢。有用。但是我们可以让 vAxis 日期以相反的顺序倒序排列吗..
将hAxis.direction 选项设置为-1。
我试过这个 hAxis.direction: -1。但它正在反转图形并使 vAxis 深黑线位于右侧。我可以通过将深黑线放在左侧来反转 hAxis 的值吗？请指教
通过将hAxis.baseline 选项设置为您希望该行所在的任何日期来移动垂直线（例如：hAxis: {baseline: new Date(2014, 3)}} 将在 2014 年 4 月 1 日设置基线）。
完美。非常感谢