Google圖表：如何繪制條形圖的垂直線

Question

我正在嘗試添加一條垂直線，以便在元素超出值時可以有視覺上的區別。

謝謝

<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([
            ["Element", "Difference", {
                role: "style"
            }],
            ["FOLDERADDUPDATE", 2.29, "#e5e6e2"],
            ["NOTEUPDATE", 3.63, "silver"],
            ["DELETENOTE", 1.12, "e5e4e7"],
            ["NOTEUPDATEANDFOLDER", 5.02, "color: #e5e4e2"],
            ["FOLDERREMOVEUPDATE",.082,"color:e5e5e2"],
            ["PENDINGEVENT", 0,"color:e5e4e4"]
        ]);

        var view = new google.visualization.DataView(data);
        view.setColumns([0, 1, {
            calc: "stringify",
            sourceColumn: 1,
            type: "string",
            role: "annotation"
        },
        2]);

        var options = {
            title: "",
            width: 600,
            height: 300,
            bar: {
                groupWidth: "95%"
            },
            legend: {
                position: "none"
            },
        };
        var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
        chart.draw(view, options);
}
</script>

Answer 1

下面的示例演示如何繪制一條附加的垂直線

 google.load('visualization', '1', {packages: ['corechart']}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ["Element", "Difference", { role: "style" }], ["FOLDERADDUPDATE", 2.29, "#e5e6e2"], ["NOTEUPDATE", 3.63, "silver"], ["DELETENOTE", 1.12, "e5e4e7"], ["NOTEUPDATEANDFOLDER", 5.02, "color: #e5e4e2"], ["FOLDERREMOVEUPDATE",.082,"color:e5e5e2"], ["PENDINGEVENT", 0,"color:e5e4e4"] ]); var view = new google.visualization.DataView(data); view.setColumns([0, 1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" }, 2]); var options = { title: "", width: 600, height: 300, bar: { groupWidth: "95%" }, legend: { position: "none" } }; var chart = new google.visualization.BarChart(document.getElementById("barchart_values")); chart.draw(view, options); drawVAxisLine(chart, 3.0); //set x value where line shoud be located } function drawVAxisLine(chart,value){ var layout = chart.getChartLayoutInterface(); var chartArea = layout.getChartAreaBoundingBox(); var svg = chart.getContainer().getElementsByTagName('svg')[0]; var xLoc = layout.getXLocation(value) svg.appendChild(createLine(xLoc,chartArea.top + chartArea.height,xLoc,chartArea.top,'#00cccc',4)); // axis line } function createLine(x1, y1, x2, y2, color, w) { var line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); line.setAttribute('x1', x1); line.setAttribute('y1', y1); line.setAttribute('x2', x2); line.setAttribute('y2', y2); line.setAttribute('stroke', color); line.setAttribute('stroke-width', w); return line; } 

 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <div id="barchart_values"></div> 

Answer 2

也許這個嗎？

在選項中ticks:並輸入所需的值（在此示例中為1,3,5,7）

        hAxis: {
            title: 'My Values',
            ticks: [1,3,5,7], 
            minValue: 0
        }

的jsfiddle