Charts chartjs添加新数据集并使用secound数据集的标签更新图例
我用chatjs图表创建了一个litte仪表板，现在我想要实现一个函数，可以在我的图表中添加一个新的数据集。此外，图表图例应使用secound数据集中的标签进行更新。我尝试了很多其他的方法来解决这个问题，但每次都有一个方法不起作用。 请尝试更新我的代码，以便我可以使用函数添加新的数据集，图表的图例也具有secound数据集的标签。我希望你能理解我的问题 编码如下：Charts chartjs添加新数据集并使用secound数据集的标签更新图例,charts,dataset,chart.js,add,legend,Charts,Dataset,Chart.js,Add,Legend,我用chatjs图表创建了一个litte仪表板，现在我想要实现一个函数，可以在我的图表中添加一个新的数据集。此外，图表图例应使用secound数据集中的标签进行更新。我尝试了很多其他的方法来解决这个问题，但每次都有一个方法不起作用。 请尝试更新我的代码，以便我可以使用函数添加新的数据集，图表的图例也具有secound数据集的标签。我希望你能理解我的问题 编码如下： <!DOCTYPE html> <html> <head> <meta charse
<!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://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<script src="./js/script.js"></script>
</head>
<!-- Row 1 -->
<div style="width: 100%; display: table;">
<div style="display: table-row; height: 600px;">
<div style="width:50%; display: table-cell;">
<canvas id="canvas1"></canvas>
</div>
<div style="width:50%; display: table-cell;">
<canvas id="canvas2"></canvas>
</div>
</div>
</div>
<!-- Row 2 -->
<div style="width: 100%; display: table;">
<div style="display: table-row; height: 300px;">
<div style="width:25%; display: table-cell;">
<canvas id="canvas3"></canvas>
</div>
<div style="width:25%; display: table-cell;">
<canvas id="canvas4"></canvas>
</div>
<div style="width:25%; display: table-cell;">
<canvas id="canvas5"></canvas>
</div>
<div style="width:25%; display: table-cell;">
<canvas id="canvas6"></canvas>
</div>
</div>
</div>
var数据；
var标签；
//图表颜色
var colors=['#0068a9'、'#67e7f5'、'#ff3b3e'、'#ffa500'、'#ba686c'、'#b04bdb'、'#09ed8a'、'fffd6e'、'ffb3eb'、'228258'、'704936'、'7a005a'、]；
var donutOptions={
图例：{
位置：'底部'，
填充：5，
标签：{
fontColor:“#000”，
}
},
插件：{
数据标签：{
颜色：“#000”，
对齐：“开始”，
主持人:"结束",，
显示：“自动”，
格式化程序：（值，ctx）=>{
设和=0；
让dataArr=ctx.chart.data.datasets[0].data；
dataArr.map（数据=>{
总和+=数据；
});
设百分比=（值*100/和）.toFixed（2）+“%”；
返回值+“\n”+百分比；
},
}
},
};
变量行选项={
图例：{
显示：假
},
插件：{
数据标签：{
显示：假，
}
}
};
函数DataDonat（Ddata、Dlabels）{
变量DonutData={
标签：数据标签，
数据集：[
{
背景颜色：颜色。切片（0,5），
边框宽度：0，
数据：Ddata，
边框宽度：1，
边框颜色：“#fff”，
悬停边界宽度：3，
悬停边框颜色：“#000”，
},
],
};
返回数据；
}
变量lineData={
标签：['A'，'B'，'C'，'D'，'E']，
数据集：[
{
背景色：“透明”，
pointBackgroundColor:colors.slice（0,5），
边框宽度：0，
边框颜色：“rgb（0,0,0,0.6）”，
数据：[74,11,40,26,120]，
}
]
};
标签=['A'，'B'，'C'，'D'，'E']；
数据=[74,11,40,26,120]；
//甜甜圈1
var ctx1=document.getElementById（“canvas1”）；
var图表1=新图表（ctx1{
键入“pie”，
数据：DataDonat（数据、标签），
选项：donutOptions
});
//甜甜圈2
var ctx2=document.getElementById（“canvas2”）；
var图表2=新图表（ctx2{
键入“pie”，
数据：DataDonat（数据、标签），
选项：donutOptions
});
//第1行
var ctx3=document.getElementById（“canvas3”）；
var chart3=新图表（ctx3{
键入：“行”，
数据：lineData，
选项：线条选项
});
//第2行
var ctx4=document.getElementById（“canvas4”）；
var图表4=新图表（ctx4{
键入：“行”，
数据：lineData，
选项：线条选项
});
//第3行
var ctx5=document.getElementById（“canvas5”）；
var图表5=新图表（ctx5{
键入：“行”，
数据：lineData，
选项：线条选项
});
//第4行
var ctx6=document.getElementById（“canvas6”）；
var图表6=新图表（ctx6{
键入：“行”，
数据：lineData，
选项：线条选项
});
函数addData（数据、标签）{
}
<script>
var data;
var labels;
// chart colors
var colors = ['#0068a9', '#67e7f5', '#ff3b3e', '#ffa500', '#ba686c', '#b04bdb', '#09ed8a', '#fffd6e', '#ffb3eb', '#228258', '#704936', '#7a005a',];
var donutOptions = {
legend: {
position: 'bottom',
padding: 5,
labels: {
fontColor: '#000',
}
},
plugins: {
datalabels: {
color: '#000',
align: 'start',
anchor: 'end',
display: 'auto',
formatter: (value, ctx) => {
let sum = 0;
let dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(data => {
sum += data;
});
let percentage = (value * 100 / sum).toFixed(2) + "%";
return value + "\n" + percentage;
},
}
},
};
var lineOptions = {
legend: {
display: false
},
plugins: {
datalabels: {
display: false,
}
}
};
function DataDonat(Ddata, Dlabels){
var DonutData = {
labels: Dlabels,
datasets: [
{
backgroundColor: colors.slice(0, 5),
borderWidth: 0,
data: Ddata,
borderWidth: 1,
borderColor: '#fff',
hoverBorderWidth: 3,
hoverBorderColor: '#000',
},
],
};
return DonutData;
}
var lineData = {
labels: ['A', 'B', 'C', 'D', 'E'],
datasets: [
{
backgroundColor: 'transparent',
pointBackgroundColor: colors.slice(0, 5),
borderWidth: 0,
borderColor: 'rgb(0, 0, 0, 0.6)',
data: [74, 11, 40, 26, 120],
}
]
};
labels = ['A', 'B', 'C', 'D', 'E'];
data = [74, 11, 40, 26, 120];
// donut 1
var ctx1 = document.getElementById("canvas1");
var chart1 = new Chart(ctx1, {
type: 'pie',
data: DataDonat(data, labels),
options: donutOptions
});
// donut 2
var ctx2 = document.getElementById("canvas2");
var chart2 = new Chart(ctx2, {
type: 'pie',
data: DataDonat(data, labels),
options: donutOptions
});
// line 1
var ctx3 = document.getElementById("canvas3");
var chart3 = new Chart(ctx3, {
type: 'line',
data: lineData,
options: lineOptions
});
// line 2
var ctx4 = document.getElementById("canvas4");
var chart4 = new Chart(ctx4, {
type: 'line',
data: lineData,
options: lineOptions
});
// line 3
var ctx5 = document.getElementById("canvas5");
var chart5 = new Chart(ctx5, {
type: 'line',
data: lineData,
options: lineOptions
});
// line 4
var ctx6 = document.getElementById("canvas6");
var chart6 = new Chart(ctx6, {
type: 'line',
data: lineData,
options: lineOptions
});
function addData(data, labels){
}
</script>
</body>
</html>