时间戳

首页 > 解决方案 > 谷歌图表未显示配置的所有条形图

javascript - 谷歌图表未显示配置的所有条形图

问题描述

我正在使用谷歌图表，我正在尝试显示“协商”栏，正如您在代码中看到的那样，尽管我将它插入到数组中并且它没有出现在图表中：

我在这里想念什么？

  google.charts.load('current', {packages: ['corechart']});   
            function drawChart() {
                var data = google.visualization.arrayToDataTable([
                    ['Negotiation',' Creativity ',' People Management ',' Coordination with Others ',' Orientation to serve ',' Emotional Intelligence ',' Complex Problem Solving ',' Cognitive Flexibility ',' Critical Thinking ',' Taking of Decisions'],
                    ['Líder ',      3, 2, 5,   1 ,3.2, 3.3, 3.1,2.4 ,2.5 ],
                    ['Colaborador', 2, 3, 2.5, 5 ,2.2, 5.1 ,3.6,2.1 ,3 ], 
                ]);
                var options = {
                    title : 'Talento bahia',
                    legend: {position: 'right', textStyle: {color: 'black', fontSize: 11}},
                    vAxis: {title: 'Pontuação'},
                    seriesType: 'bars',
                    series: {
                        0: { color: '#631E80' },
                        1: { color: '#FCE22B' },
                        2: { color: '#4A308B' },
                        3: { color: '#011F9B' },
                        4: { color: '#C81212' },
                        5: { color: '#AF3423' },
                        6: { color: '#247D4B' },
                        7: { color: '#23B634' },
                        8: { color: '#5EC4FF' },
                        9: { color: '#F15757' }
                    }
                };
                var chart = new google.visualization.ComboChart(document.getElementById('container'));
                chart.draw(data, options);
            }
            google.charts.setOnLoadCallback(drawChart);
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta charset="utf-8"/>
        <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js"></script>
    </head>
    <body>
        <div id = "container" style = "width: 990px; height: 400px; margin: 0 0 -100px 0 auto"></div>

标签： javascriptchartsgoogle-visualization

解决方案

您缺少一些数据...

bar 名称数组上的第一个元素类似于数组的规范：

 ['LABELS', 'Negotiation',' Creativity ',' People Management ',' Coordination with Others ',' Orientation to serve ',' Emotional Intelligence ',' Complex Problem Solving ',' Cognitive Flexibility ',' Critical Thinking ',' Taking of Decisions']

而且您的 2 个数据值数组每个只有 9 个值。在示例中，我再添加一个值 => 15

['Líder ',      15, 3, 2, 5,   1 ,3.2, 3.3, 3.1,2.4 ,2.5 ],
['Colaborador', 15, 2, 3, 2.5, 5 ,2.2, 5.1 ,3.6,2.1 ,3 ], 


  google.charts.load('current', {packages: ['corechart']});   
            function drawChart() {
                var data = google.visualization.arrayToDataTable([
                    ['LABELS', 'Negotiation',' Creativity ',' People Management ',' Coordination with Others ',' Orientation to serve ',' Emotional Intelligence ',' Complex Problem Solving ',' Cognitive Flexibility ',' Critical Thinking ',' Taking of Decisions'],
                    ['Líder ',      15, 3, 2, 5,   1 ,3.2, 3.3, 3.1,2.4 ,2.5 ],
                    ['Colaborador', 15, 2, 3, 2.5, 5 ,2.2, 5.1 ,3.6,2.1 ,3 ], 
                ]);
                var options = {
                    title : 'Talento bahia',
                    legend: {position: 'right', textStyle: {color: 'black', fontSize: 11}},
                    vAxis: {title: 'Pontuação'},
                    seriesType: 'bars',
                    series: {
                        0: { color: '#631E80' },
                        1: { color: '#FCE22B' },
                        2: { color: '#4A308B' },
                        3: { color: '#011F9B' },
                        4: { color: '#C81212' },
                        5: { color: '#AF3423' },
                        6: { color: '#247D4B' },
                        7: { color: '#23B634' },
                        8: { color: '#5EC4FF' },
                        9: { color: '#F15757' }
                    }
                };
                var chart = new google.visualization.ComboChart(document.getElementById('container'));
                chart.draw(data, options);
            }
            google.charts.setOnLoadCallback(drawChart);
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta charset="utf-8"/>
        <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js"></script>
    </head>
    <body>
        <div id = "container" style = "width: 990px; height: 400px; margin: 0 0 -100px 0 auto"></div>

推荐阅读