Наведите указатель мыши на данные графика, чтобы активировать другой набор данных в Chart.js. - PullRequest
Новая
       17

Наведите указатель мыши на данные графика, чтобы активировать другой набор данных в Chart.js.

1 голос
/ 03 июля 2019

Я создаю линейный график, используя Chart.js. Диаграмма имеет два набора данных. Ось X - это дата, а ось Y - это значение. При наведении курсора на первые данные в наборе данных 1 первые данные в наборе данных 2 также активны (увеличение). Это не я ожидал. Есть ли способ активировать только обнаруженные данные. И есть ли способ активировать все данные по их значению y, а не по индексу.

Я пытался изменить режим всплывающих подсказок, но результат не тот, который я ожидал. Он показывает всплывающие подсказки в наборе разностных данных с тем же индексом. https://www.chartjs.org/docs/latest/general/interactions/modes.html

var ctx = document.getElementById("myChart");
var barChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: 'Dataset 1',
            data: [{
                x: '2019-01-15',
                y: 100
            }, {
                x: '2019-02-03',
                y: 300
            }],
            backgroundColor: 'rgba(0, 0, 0, 0)',
            borderColor: 'rgba(255, 0, 0, 1)',
            borderWidth: 1
        }, {
            label: 'Dataset 2',
            data: [{
                x: '2019-01-03',
                y: 150
            }, {
                x: '2019-01-15',
                y: 200
            }, {
                x: '2019-02-06',
                y: 250
            }],
            backgroundColor: 'rgba(0, 0, 0, 0)',
            borderColor: 'rgba(0, 255, 255, 1)',
            borderWidth: 1
        }],
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                }
            }],
            xAxes: [{
                type: 'time',
                position: 'bottom',
                time: {
                    min: "2019-1-1",
                    max: "2019-2-28",
                    unit: "month",
                    displayFormats: {
                        "month": "YYYY-MM",
                    }
                }
            }]
        }
    }
});

https://jsfiddle.net/t1gmrujo/2/

1 Ответ

0 голосов
/ 03 июля 2019

Я пытался редактировать режим всплывающих подсказок, но результат не тот, который я ожидал.Он показывает всплывающие подсказки в наборе разностных данных с тем же индексом.

Конфигурация tooltip управляет отображением всплывающей подсказки , а не точек набора данных.Точки контролируются конфигурацией hover .Это упоминается на странице , которую вы связали (выделено мной):

При настройке взаимодействия с графиком с помощью наведения или всплывающих подсказок , доступно несколько различных режимов.

Если вы хотите, чтобы была выделена только одна точка, над которой вы зависаете, используйте: 

options: {
  hover: {
    mode: 'point'
  }
}

Если вы хотите весь набор данныхвыделенный при наведении курсора на любую отдельную точку набора данных, используйте: 

options: {
  hover: {
    mode: 'dataset'
  }
}

Если вы хотите выделить набор данных и увидеть все значения набора данных во всплывающей подсказке, используйте: 

options: {
  hover: {
    mode: 'dataset'
  },
  tooltips: {
    mode: 'dataset'
  }
}
...