我已经阅读了Chart.js文档上提供的教程,但我正在努力弄清楚如何使我的数据符合库的要求.
我的代码是这样的
const labels = [
'1980',
'1981',
'1982'
]
const dat = [
{"1980":{"legal":{"departments":1, "Foreign Agency":3, Corporation:3}},
"1981":{"legal":{"departments":2, "Foreign Agency":2, Corporation:5}},
"1982":{"legal":{"departments":3, "Foreign Agency":1, Corporation:8}}
}
];
const data1 = {
labels: labels,
datasets: [{
label: 'Department number',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: dat,
parsing: {
yAxisKey: dat[0][1980]["legal"][" departments"]
}
}]
};
const config1 = {
type: 'bar',
data: data1,
options: {
plugins: {
title: {
display: true,
text: 'Stacked Bar Chart of legal entities 1980-1982'
},
},
responsive: true,
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
}
}
};
const myChart1 = new Chart(
document.getElementById('myChart1'),
config1
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.1/chart.min.js"></script>
<canvas id="myChart1" ></canvas>
在现实中,数据要长得多,但采用这种一般形式.我还可以控制数据是如何生成的.
除了图形中什么都没有显示(没有生成错误)之外,我的另一个问题是,指定要显示的法律数据的年份和类别从一开始就不是一种真正实用的方法.当然,理想情况下,标签应该从数据中生成,因为它们就在那里.
预期的输出将是一个堆叠的条形图,其中包含代表每一年的每个法律类别的值