如何添加一个栏到谷歌条形图...?

时间:2016-09-08 05:48:04

标签: javascript jquery charts google-visualization

我正在实施谷歌条形图..但我无法再向现有的水平条形图添加一个水平条..

JS代码

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script>
        $(document).ready(function () {
            google.charts.load("current", {packages: ["corechart"]});
            google.charts.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = google.visualization.arrayToDataTable([
                    ["Element", "Density", {role: "style"}],
                    ["5", 8.94, "#b87333"],
                    ["4", 10.49, "silver"],
                    ["3", 19.30, "gold"],
                    ["2", 21.45, "color: #e5e4e2"]
                ]);

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

                var options = {
                    title: "Density of Precious Metals, in g/cm^3",
                    width: 600,
                    height: 400,
                    bar: {groupWidth: "95%"},
                    legend: {position: "none"},
                };
                var chart = new google.visualization.BarChart(document.getElementById("chart_div"));
                chart.draw(view, options);
            }
        });
    </script>

当我尝试再添加一个这样的栏

 var data = google.visualization.arrayToDataTable([
                    ["Element", "Density", {role: "style"}],
                    ["5", 8.94, "#b87333"],
                    ["4", 10.49, "silver"],
                    ["3", 19.30, "gold"],
                    ["2", 21.45, "color: #e5e4e2"]
                    ["2", 21.45, "color: #e5e4e2"]
                ]);

显示以下错误..

 Error: Invalid row type for row 3

非常感谢任何帮助......谢谢

1 个答案:

答案 0 :(得分:1)

我用这种方式解决了这个问题,这对某人有帮助。

   data.addRows([
                 ["1", 10.45, "color: #CA5006"]
               ]);