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>
我想知道出了什么问题，并希望我能帮助解决这个问题......
慕尼黑56888551回答
-
慕婉清6462132
我将以上内容放在一个文件中并且它有效（尽管我必须在通话中将“总体”更改为“严重性”）。所以我希望您使用的东西可能与上面的示例不匹配。我使用的版本：<html><body> <canvas id="overall"></canvas></body><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script><script> var Severity = { "3M": [0, 3, 1, 0, 0], "5T": [0, 0, 1, 0, 0], "6S": [0, 0, 2, 0, 0] };</script><script> 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' } ] }, options: { responsive: true, legend: { position: 'right' }, scales: { xAxes: [{ stacked: true }], yAxes: [{ stacked: true }] } } }); }</script><script>StackedBar('overall', Severity);</script></html>
随时随地看视频慕课网APP
相关分类
JavaScript