javascript - 如何向谷歌条形图添加一个条形图...?

标签 javascript jquery charts google-visualization

我正在实现 google 条形图..但我无法在现有的水平条形图中再添加一个水平条..

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

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

最佳答案

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

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

关于javascript - 如何向谷歌条形图添加一个条形图...?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39383393/

相关文章:

javascript - 达到最大高度并且 div 像响应式 overflow-x 一样继续向右移动

javascript - 如何保护 Nodejs 中的 RestFul Api?

javascript - 防止在页面加载时执行 JS 函数

javascript - 删除框时如何使用 JQuery 创建滑动效果?

javascript - jQuery 手机 : Applying style after reloading content

javascript - Highcharts xAxis 与日期时间不显示任何图表

javascript - D3.js数据更新 "remembers"旧数据

javascript - AngularJs TypeError : $scope. posts.push 不是一个函数

php - 谷歌图表中JSON格式的解释

javascript - Chrome 扩展 - 在 onBeforeRequest 中获取 Content-Type