Question

我正在开展一个项目，我需要像这样展示图形。

enter image description here

我正在使用谷歌可视化图表api来实现这一目标。我可以按如下方式绘制图表。

enter image description here

我对此很新。我面临的问题是，我无法绘制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>

Answer 1

如果使用连续型轴，则会在那里得到一条线。由于您正在绘制月份，因此您可以使用＆＃34; date＆＃34;类型：

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线

1 个答案: