谷歌图表未显示配置的所有条形图答案

【问题标题】：Google charts not showing all bars configured谷歌图表未显示配置的所有条形图
【发布时间】：2020-08-04 23:17:59
【问题描述】：

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

我在这里错过了什么？

  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>

【问题讨论】：

您想显示十个条，但是缺少什么条？您期望的描述和价值是什么？不清楚....而且您的代码看起来不错，因为 'Líder' 和 'Colaborador' 有 9 个值。
你好@LuisPauloPinto！我希望为协商创建一个栏，正如您在代码中看到的那样，虽然我将它插入到数组中它没有出现在图表中
在您的数组定义中，'Negotiation' 是 x 轴值的列标题。您需要将 'Negotiation' 重命名为其他名称，为 'Negotiation' 添加另一个值列...

标签： javascript charts google-visualization

【解决方案1】：

您缺少一些数据...

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

 ['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>

【讨论】：