猿问

Charts Js Stacked Bar Graph 显示没有值？

我有一个像这样的 javascript 地图..


var Severity = {

3M:[0, 3, 1, 0, 0],

5T:[0, 0, 1, 0, 0],

6S:[0, 0, 2, 0, 0]

}

以及调用 Stacked Chart Bar 的 JS 函数。在这里，我创建了一个 JS 函数，它从 jsp 页面获取 id 和地图。映射结构与上面定义的相同。我想显示图表，其中 x 轴上的数据是地图中的键，y 轴上是 5 个元素的堆叠数据。


function StackedBar(id,Severity) {


    var label = Object.keys(Severity); // getting the labels


    var Critical = [];

    var High = [];

    var Medium = [];

    var Low = [];

    var Others = [];



    for(let i=0;i<label.length;i++){    //assigning the data to arrays created

        Critical.push(Severity[label[i]][0]);

        High.push(Severity[label[i]][1]);

        Medium.push(Severity[label[i]][2]);

        Low.push(Severity[label[i]][3]);

        Others.push(Severity[label[i]][4]);

    }


    var ctxL = document.getElementById(id).getContext('2d');   //id from the html canvas

    var chart = new Chart(ctxL, {

        type: 'bar',

        data: {

            labels: label, 

            datasets: [

                {

                label: 'Critical',

                data: Critical,

                backgroundColor: '#aa000e'

            },

                {

                label: 'High',

                data: High,

                backgroundColor: '#e65905'

            },

                {

                label: 'Medium',

                data: Medium,

                backgroundColor: '#e00ce6'

            },

                {

                label: 'Low',

                data: Low,

                backgroundColor: '#b8ab16'

            },

                {

                label: 'Others',

                data: Others,

                backgroundColor: '#00aaaa'

            }

            ]

        },

        }

    });

}

这里显示图表，我在 x 轴上得到标签......但图表值不显示，我得到以下错误......

HTML


<canvas id="overall"></canvas>

<script>StackedBar('overall',Overall);</script>


            

我想知道出了什么问题，并希望我能帮助解决这个问题......


慕尼黑5688855
浏览 84回答 1
1回答

慕婉清6462132

我将以上内容放在一个文件中并且它有效（尽管我必须在通话中将“总体”更改为“严重性”）。所以我希望您使用的东西可能与上面的示例不匹配。我使用的版本：<html><body>&nbsp; &nbsp; <canvas id="overall"></canvas></body><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script><script>&nbsp; &nbsp; var Severity = {&nbsp; &nbsp; &nbsp; &nbsp; "3M": [0, 3, 1, 0, 0],&nbsp; &nbsp; &nbsp; &nbsp; "5T": [0, 0, 1, 0, 0],&nbsp; &nbsp; &nbsp; &nbsp; "6S": [0, 0, 2, 0, 0]&nbsp; &nbsp; };</script><script>&nbsp; &nbsp; function StackedBar(id, Severity) {&nbsp; &nbsp; &nbsp; &nbsp; var label = Object.keys(Severity); // getting the labels&nbsp; &nbsp; &nbsp; &nbsp; var Critical = [];&nbsp; &nbsp; &nbsp; &nbsp; var High = [];&nbsp; &nbsp; &nbsp; &nbsp; var Medium = [];&nbsp; &nbsp; &nbsp; &nbsp; var Low = [];&nbsp; &nbsp; &nbsp; &nbsp; var Others = [];&nbsp; &nbsp; &nbsp; &nbsp; for (let i = 0; i < label.length; i++) {&nbsp; &nbsp; //assigning the data to arrays created&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Critical.push(Severity[label[i]][0]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; High.push(Severity[label[i]][1]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Medium.push(Severity[label[i]][2]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Low.push(Severity[label[i]][3]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Others.push(Severity[label[i]][4]);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; var ctxL = document.getElementById(id).getContext('2d');&nbsp; &nbsp;//id from the html canvas&nbsp; &nbsp; &nbsp; &nbsp; var chart = new Chart(ctxL, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'bar',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; labels: label,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; datasets: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: 'Critical',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: Critical,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: '#aa000e'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: 'High',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: High,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: '#e65905'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: 'Medium',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: Medium,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: '#e00ce6'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: 'Low',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: Low,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: '#b8ab16'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: 'Others',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: Others,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: '#00aaaa'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; options: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; responsive: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; legend: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: 'right'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scales: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xAxes: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stacked: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; yAxes: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stacked: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }</script><script>StackedBar('overall', Severity);</script></html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答