Диаграмма JS, Отключить всплывающую подсказку для одного графика на данных нескольких графиков - PullRequest
Новая
       5

Диаграмма JS, Отключить всплывающую подсказку для одного графика на данных нескольких графиков

0 голосов
/ 01 апреля 2020

Как вы можете отключить всплывающие подсказки на одном из графиков на моем графике с несколькими графиками, но сохранить остальные. Я попытался установить 'showToolTip' в false на графике, для которого я не хочу всплывающие подсказки, но это не работает. 

let ctx = document.getElementById('myChart').getContext('2d');
                var chart = new Chart(ctx, {
                    type: 'scatter',
                    data :{
                        labels : cLabels,
                        datasets : [{
                            label: 'Points',
                            backgroundColor: 'rgb(255, 99, 132)',
                            borderColor: 'rgb(255, 99, 132)',
                            pointStyle: 'circle',
                            pointRadius: 10,
                            data : cData,
                            showTooltips: false, //<- THis line does not work, and there is a global property to remove all tooltips
                            order: 2,
                        },{
                            label: '',
                            backgroundColor: 'rgb(255, 255, 255)',
                            borderColor: 'rgb(255, 255, 255)',
                            pointStyle: 'circle',
                            pointRadius: 5,
                            data : cData,

                            order: 1,
                        },{

1 Ответ

1 голос
/ 01 апреля 2020

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

options: {
  ...
  tooltips: {
    filter: tooltipItem => tooltipItem.datasetIndex == 0
  }

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

const data = [
  { 
    series: [ 
      {date: '2020-01', value: 5 },
      {date: '2020-02', value: 20 },
      {date: '2020-03', value: 10 },
      {date: '2020-04', value: 15 }
    ]
  },
  {
    series: [ 
      {date: '2020-01', value: 10 },
      {date: '2020-02', value: 8 },
      {date: '2020-03', value: 16 },
      {date: '2020-04', value: 12 }
    ]
  }
];
new Chart(document.getElementById('canvas'), {
  type: 'line',
  data: {
    datasets: [{
      label: data[0].name,
      fill: false,
      backgroundColor: 'red',
      borderColor: 'red',
      data: data[0].series.map(x => ({ x: new Date(x.date), y: x.value }))
    }, {
      label: data[1].name,
      fill: false,
      backgroundColor: 'blue',
      borderColor: 'blue',
      data: data[1].series.map(x => ({ x: new Date(x.date), y: x.value }))
    }]
  },
  options: {
    responsive: true,
    title: {
      display: false
    },
    legend: {
      display: false
    },
    tooltips: {
      filter: tooltipItem => tooltipItem.datasetIndex == 0
    },
    scales: {      
      xAxes: [{
        type: 'time',
        time: {
          unit: 'month',
          displayFormats: {
            'month': 'MMM YYYY',
          },
          tooltipFormat: 'MMM YYYY'
        }
      }],
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="canvas" height="90"></canvas>
...