Javascript 图例单击图表js时如何显示/隐藏动画
我添加了动画,以在折线图js中的值点上显示标签值数据。但当我单击图例隐藏一条线时,标签不会消失。老实说,我真的没有任何线索来修复它Javascript 图例单击图表js时如何显示/隐藏动画,javascript,chart.js,Javascript,Chart.js,我添加了动画,以在折线图js中的值点上显示标签值数据。但当我单击图例隐藏一条线时,标签不会消失。老实说,我真的没有任何线索来修复它 我想在行隐藏时通过单击标签来隐藏标签,这样标签和行就会一起隐藏/显示。我找到了答案。只需删除动画,并使用插件datalabel chart js。hello@Yudha Adtia您有一些小提琴示例可以使用吗?这里是小提琴,您的小提琴不起作用…图表js不够吗?我想我的问题只存在于图表动画/回调/传奇中。我想看看运行图表,以更好地帮助你。还有一个问题,很多人会来寻求帮
我想在行隐藏时通过单击标签来隐藏标签,这样标签和行就会一起隐藏/显示。我找到了答案。只需删除动画,并使用插件datalabel chart js。hello@Yudha Adtia您有一些小提琴示例可以使用吗?这里是小提琴,您的小提琴不起作用…图表js不够吗?我想我的问题只存在于图表动画/回调/传奇中。我想看看运行图表,以更好地帮助你。还有一个问题,很多人会来寻求帮助,他们会发现我解决了我的问题。
var ctxTotal = $("#grap_trajec_divisi");
var chartOptions = {
responsive: true,
maintainAspectRatio: false,
legend: {
position: 'bottom',
},
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function (tooltipItems, data) {
var dataM = tooltipItems.yLabel;
formatM(dataM);
var multistringText = [data_M];
multistringText.push(tooltipItems.yLabel);
multistringText.push(data.datasets[tooltipItems.datasetIndex].label);
return multistringText;
}
}
},
scales: {
xAxes: [{
display: true,
gridLines: {
color: "#f3f3f3",
drawTicks: true,
},
scaleLabel: {
display: false,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
gridLines: {
color: "#f3f3f3",
drawTicks: true,
},
scaleLabel: {
display: false,
labelString: 'Value'
},
ticks: {
callback: function (value, index, values) {
var dataYaxis = value;
formatM(dataYaxis);
return data_M;
}
},
}]
},
animation: {
duration: 1,
onComplete: function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = '.7rem "Calibri",sans-serif';
ctx.fillStyle = '#555';
ctx.textAlign = "center";
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = dataset.data[index];
formatM(data);
ctx.fillText(data_M, bar._model.x, bar._model.y - 5);
});
});
}
}
//title: {
// display: true,
// text: 'Chart.js Line Chart - proyeksi'
//}
};
var chartData = {
labels: arr,
datasets: [{
label: "RKAP",
data: value_LT,
fill: false,
borderColor: "rgb(89,159,240)",
pointBorderColor: "rgb(89,159,240)",
pointBackgroundColor: "#FFFFFF",
pointBorderWidth: 1,
pointHoverBorderWidth: 1,
pointRadius: 3,
spanGaps: true,
}, {
label: "Target",
data: value_LT2,
fill: false,
borderColor: "rgb(186,179,61)",
pointBorderColor: "rgb(186,179,61)",
pointBackgroundColor: "#FFFFFF",
pointBorderWidth: 1,
pointHoverBorderWidth: 1,
pointRadius: 3,
spanGaps: true,
}, {
label: "Actual",
data: value_LO,
fill: false,
borderColor: "rgb(78,199,138)",
pointBorderColor: "rgb(78,199,138)",
pointBackgroundColor: "#FFFFFF",
pointBorderWidth: 1,
pointHoverBorderWidth: 1,
pointRadius: 3,
spanGaps: true,
}, {
label: "Proyeksi",
data: value_LP,
fill: false,
borderColor: "rgb(241,151,89)",
pointBorderColor: "rgb(241,151,89)",
pointBackgroundColor: "#FFFFFF",
pointBorderWidth: 1,
pointHoverBorderWidth: 1,
pointRadius: 3,
spanGaps: true,
}],
};
var config = {
type: 'line',
options: chartOptions,
data: chartData
};
if (window.chartTrajecDivisi != undefined) {
window.chartTrajecDivisi.destroy();
}
window.chartTrajecDivisi = new Chart(ctxTotal, config);