Javascript chart.js多个数据集的一个图例
我用chart.js图表创建了一个HTML文件，其中包含一个图例。现在我添加了一个secound数据集，但图例仅显示第一个数据集的标签 我也读过其他类似的问题，但每次我尝试从中编码时，它都不起作用。 因此，也许您可以更新我的代码，使第一个和第二个数据集的标签都显示在我的图例中 编码如下：Javascript chart.js多个数据集的一个图例,javascript,chart.js,Javascript,Chart.js,我用chart.js图表创建了一个HTML文件，其中包含一个图例。现在我添加了一个secound数据集，但图例仅显示第一个数据集的标签 我也读过其他类似的问题，但每次我尝试从中编码时，它都不起作用。 因此，也许您可以更新我的代码，使第一个和第二个数据集的标签都显示在我的图例中 编码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<script src="./js/script.js"></script>
</head>
<body>
<div class="container" style="height: 400px; width: 60%; margin:0px auto;">
<canvas id="myChart"></canvas>
</div>
<script>
let myChart = document.getElementById('myChart').getContext('2d');
Chart.defaults.global.defaultFontFamily = 'Lato';
Chart.defaults.global.defaultFontSize = 12;
Chart.defaults.global.defaultFontColor = '#fff';
let massPopChart = new Chart(myChart, {
type: "pie",
data: {
labels: ["17.10.2006", "18.10.2006", "19.10.2006", "20.10.2006", "24.10.2006", "25.10.2006", "26.10.2006", "06.11.2006", "13.11.2006", "14.11.2006", "15.11.2006", "23.11.2006", ],
datasets: [{
label: 'Februar',
data: [160.52, 106.21, 182.86, 81.31, 85.67, 478.11, 162.67, 188.84, 32.37, 144.26, 110.31, 36.77, ],
backgroundColor: ['#0068a9', '#67e7f5', '#424245', '#ff3b3e', '#ffa500', '#ba686c', '#b04bdb', '#09ed8a', '#fffd6e', '#ffb3eb', '#228258', '#704936', '#7a005a', ],
labels: ["17.10.2006", "18.10.2006", "19.10.2006", "20.10.2006", "24.10.2006", "25.10.2006", "26.10.2006", "06.11.2006", "13.11.2006", "14.11.2006", "15.11.2006", "23.11.2006", ],
borderWidth: 1,
borderColor: '#fff',
hoverBorderWidth: 3,
hoverBorderColor: '#000'
}]
},
options: {
responsive: true,
plugins: {
datalabels: {
color: '#000',
align: 'start',
anchor: 'end',
display: 'auto',
formatter: (value, ctx) => {
let sum = ctx.dataset._meta[0].total;
let percentage = (value * 100 / sum).toFixed(2) + "%";
let text = value + '\n' + percentage;
return text;
},
}
},
title: {
display: false,
fontColor: '#000000',
fontSize: 25
},
legend: {
display: true,
position: 'bottom',
labels: {
fontColor: '#000'
}
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var index = tooltipItem.index;
return dataset.labels[index] + ': ' + dataset.data[index];
}
}
}
}
});
function addData() {
massPopChart.data.datasets.push({
labels: ['21.02.2020', '22.02.2020'],
backgroundColor: ['#ff0000', '#704936', ],
data: [150, 160],
borderWidth: 1,
borderColor: '#fff',
hoverBorderWidth: 3,
hoverBorderColor: '#000',
});
massPopChart.update();
}
addData();
</script>
</body>
</html>
让myChart=document.getElementById（'myChart'）.getContext（'2d'）；
Chart.defaults.global.defaultFontFamily='Lato'；
Chart.defaults.global.defaultFontSize=12；
Chart.defaults.global.defaultFontColor='#fff'；
让massPopChart=新图表（myChart{
键入：“馅饼”，
数据：{
标签：[“17.10.2006”、“18.10.2006”、“19.10.2006”、“20.10.2006”、“24.10.2006”、“25.10.2006”、“26.10.2006”、“06.11.2006”、“13.11.2006”、“14.11.2006”、“15.11.2006”、“23.11.2006”]，
数据集：[{
标签：“二月”，
数据：[160.52、106.21、182.86、81.31、85.67、478.11、162.67、188.84、32.37、144.26、110.31、36.77、]，
背景色：[“#0068a9”、“#67e7f5”、“#4245”、“#ff3b3e”、“#ffa500”、“#ba686c”、“#b04bdb”、“#09ed8a”、“#fffd6e”、“#ffb3eb”、“#228258”、“#704936”、#A005A”，
标签：[“17.10.2006”、“18.10.2006”、“19.10.2006”、“20.10.2006”、“24.10.2006”、“25.10.2006”、“26.10.2006”、“06.11.2006”、“13.11.2006”、“14.11.2006”、“15.11.2006”、“23.11.2006”]，
边框宽度：1，
边框颜色：“#fff”，
悬停边界宽度：3，
悬停边框颜色：“#000”
}]
},
选项：{
回答：是的，
插件：{
数据标签：{
颜色：“#000”，
对齐：“开始”，
主持人:"结束",，
显示：“自动”，
格式化程序：（值，ctx）=>{
设sum=ctx.dataset.\u meta[0]。总计；
设百分比=（值*100/和）.toFixed（2）+“%”；
让text=值+'\n'+百分比；
返回文本；
},
}
},
标题：{
显示：假，
fontColor:“#000000”，
尺寸：25
},
图例：{
显示：对，
位置：'底部'，
标签：{
fontColor:“#000”
}
},
工具提示：{
回调：{
标签：函数（工具提示项、数据）{
var dataset=data.datasets[tooltipItem.datasetIndex]；
var index=工具提示项索引；
返回dataset.labels[index]+'：'+dataset.data[index]；
}
}
}
}
});
函数addData（）{
massPopChart.data.datasets.push({
标签：['21.02.2020'，'22.02.2020']，
背景颜色：['ff0000'，'704936'，]，
数据：[150160]，
边框宽度：1，
边框颜色：“#fff”，
悬停边界宽度：3，
悬停边框颜色：“#000”，
});
massPopChart.update（）；
}
addData（）；