#chart.js
Вопрос:
Я пытаюсь удалить набор данных из метки: 
Но обратный вызов метки вызывается дважды, поэтому я не знаю, как это сделать.
Я ожидал, что в обратном вызове будет массив, и что вы можете просто удалить тот, который не нужен.
вот что я до сих пор и пробовал:
var labels = [];
for (let index = 0; index < 12; index ) {
labels.push(index);
}
window.onload = function () {
var canvas = document.getElementById('elm-chart'),
ctx = canvas.getContext('2d');
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: '-15',
data: [
{
x: 0,
y: 10,
},
{
x: 1,
y: 20,
},
],
borderColor: 'red',
},
{
label: '15',
data: [
{
x: 1,
y: 20,
},
{
x: 2,
y: 30,
},
],
borderColor: 'blue',
},
{
label: '25',
data: [
{
x: 2,
y: 30,
},
{
x: 3,
y: 35,
},
],
borderColor: 'yellow',
},
{
label: '-15',
data: [
{
x: 6,
y: -10,
},
{
x: 7,
y: -20,
},
],
borderColor: 'red',
},
{
label: '15',
data: [
{
x: 7,
y: -20,
},
{
x: 8,
y: -30,
},
],
borderColor: 'blue',
},
{
label: '25',
data: [
{
x: 8,
y: -30,
},
{
x: 9,
y: -35,
},
],
borderColor: 'yellow',
},
],
},
options: {
responsive: true,
plugins: {
legend: {
onClick: (evt, legendItem, legend) => {
let newVal = !legendItem.hidden;
legend.chart.data.datasets.forEach((dataset) => {
if (dataset.label === legendItem.text) {
dataset.hidden = newVal;
}
});
legend.chart.update();
},
labels: {
filter: (legendItem, chartData) => {
let entries = chartData.datasets.map((e) => e.label);
return entries.indexOf(legendItem.text) === legendItem.datasetIndex;
},
},
},
},
scales: {
x: {
type: 'linear',
ticks: {
stepSize: 30,
},
},
},
plugins: {
tooltip: {
callbacks: {
title: function (context) {
return [`test`, 'test2'];
},
label: function (context) {
console.log(context.dataset.label);
console.log(context.formattedValue);
console.log(context);
return [
`${context.dataset.label}:${context.formattedValue}`,
'test',
];
},
},
},
},
},
});
}; <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js"></script>
<canvas id="elm-chart" width="640" height="480"></canvas> Поэтому, чтобы было ясно, я не хочу удалять точку данных в наборе данных. Я просто хочу удалить 1 точку данных с метки, всегда верхнюю
Комментарии:
1. Есть ли причина, по которой у вас так много наборов данных?
2. @Jesper Да, мне нужно было переключать каждую строку и придавать каждой цвет. Сделать каждую строку набором данных казалось лучшим решением.
Ответ №1:
Что вы можете сделать, так это вместо использования всплывающей подсказки по умолчанию использовать всплывающую подсказку html.
В JS, который делает всплывающую подсказку вместо циклического обхода каждого активного элемента, вы берете только первый и отображаете его.
Официальный образец html-подсказки: https://www.chartjs.org/docs/master/samples/tooltip/html.html
Комментарии:
1. Спасибо! Я попробую это сделать. Не по теме, как бы вы написали имя поверх строки? Есть ли что-то вроде внешней подсказки, которую вы можете нарисовать html на графике?
2. Для этого вы можете использовать плагин datalabels: chartjs-plugin-datalabels.netlify.app/samples/charts/line.html