如何禁用多图图形上其中一个图上的工具提示,而保留其他图。
我试图在不需要工具提示的情节上将'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,
                        },{

最佳答案

您可以使用tooltip filter callback函数。如果显示工具提示,则返回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>

10-05 20:51
查看更多