ChartJS，禁用多图表数据上的一个绘图的工具提示

Question

如何在我的多重绘图上禁用其中一个绘图上的工具提示，而保留其他绘图。我曾尝试在我不想要工具提示的绘图上将'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,
                        },{

Answer 1

您可以使用tooltip filter callback函数。如果应该显示工具提示，则返回true，否则返回false。下面的示例指定应仅为第一个数据集显示工具提示。

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

请看下面的runnable代码示例。

​

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>

​