如何在图表JS中的线图中的整个线中悬停效应

Question

ngOnInit(): void {   
  var myChart = new Chart('myChart', {
  type: 'bar',
  data: {
    labels: ['Modes'],
    datasets: [
      {
        label: 'A',
        data: [this.data.a],
        borderColor: 'rgba(255,105,180,1)',
        backgroundColor: 'rgba(255,105,180,0.2)',
        barPercentage:0.4,
        borderWidth:2,
        order: 1
      },
      {
        label: 'B',
        data: [this.data.b],
        borderColor: 'rgba(75, 192, 192, 1)',
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        barPercentage:0.4,
        borderWidth:2,
        order: 2
      },
      {
        label: 'Total Recordings',[![image of current scenario][1]][1]
        data:[this.data.totalrecordings,this.data.totalrecordings],
        type:'line',
        borderColor:'rgba(2,117,216,1)',
        backgroundColor:'rgba(2,117,216,0.2)',
        pointRadius:0,//3,
        pointHoverRadius:0,//4,
        xAxisID:'xAxis2',
        order:0
      }
    ]
  },
  options: {
    responsive: true,
    //hover:{
      //mode:'index',
      // intersect:false
    //},
    plugins: {
      legend: {
        position: 'top',
      },
      tooltip:{
        mode:'index',
        callbacks:{
          title:(ttItems)=> (ttItems[0].dataset.type === 'line' ? '' : ttItems[0].label)
        },
      }
    },
    scales:{
      xAxis:{},
      xAxis2:{
        display:false,
        offset:false,
        labels:[' ',' ']
      }
    }
  },
})

}

我希望，当我将悬停在线图上的任何位置时，它应该显示数据。现在，只有当我悬停在一开始或末尾时，只有我才能看到数据。同样，在悬停时，我可以看到总记录值的值，但是在悬停时，我就可以看到所有数据集的值。任何输入都会有很大帮助

Answer 1

您可以使用单个浮子栏使用dataset，而不是使用行，可以将其定义如下：

{
  label: 'Total Recordings',
  data: [[data.totalrecordings -0.5, data.totalrecordings + 0.5]]
  categoryPercentage: 1,
  barPercentage: 1,
  ...
}

与此相同：与此一起，您需要定义tooltip.callbacks.label < /代码>正确报告TotalRecordings的功能。

tooltip: {
  mode: 'index',
  callbacks: {
    label: ctx => ctx.dataset.label + ': ' + (ctx.datasetIndex == 2 ? data.totalrecordings : ctx.parsed.y)
  }
}

请查看您的修订代码，看看它是如何工作的。

const data = {
  a: 37,
  b: 50,
  totalrecordings: 87
}

new Chart('myChart', {
  type: 'bar',
  data: {
    labels: ['Modes'],
    datasets: [{
        label: 'A',
        data: [data.a],
        borderColor: 'rgba(255,105,180,1)',
        backgroundColor: 'rgba(255,105,180,0.2)',
        barPercentage: 0.4,
        borderWidth: 2,
        order: 1
      },
      {
        label: 'B',
        data: [data.b],
        borderColor: 'rgba(75, 192, 192, 1)',
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        barPercentage: 0.4,
        borderWidth: 2,
        order: 2
      },
      {
        label: 'Total Recordings',
        data: [[data.totalrecordings -0.5, data.totalrecordings + 0.5]],
        borderColor: 'rgba(2,117,216,1)',
        borderSkipped: false,
        backgroundColor: 'rgba(2,117,216,0.2)',
        borderWidth: 2,
        categoryPercentage: 1,
        barPercentage: 1,
        xAxisID: 'xAxis2',
        order: 0
      }
    ]
  },
  options: {
    responsive: false,
    plugins: {
      legend: {
        position: 'top',
      },
      tooltip: {
        mode: 'index',
        callbacks: {
          label: ctx => ctx.dataset.label + ': ' + (ctx.datasetIndex == 2 ? data.totalrecordings : ctx.parsed.y)
        }
      }
    },
    onHover: (evt, activeElems, chart) => {
      const datsetIndex = chart.getElementsAtEventForMode(evt, 'y', {})[0]?.datasetIndex;      
      if (datsetIndex == 2) {
        chart.tooltip.setActiveElements([
          {datasetIndex: 2, index: 0 },
          {datasetIndex: 0, index: 0 },
          {datasetIndex: 1, index: 0 }         
        ]);
        chart.update();
      }
    },
    scales: {
      xAxis: {},
      xAxis2: {
        display: false
      }
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<canvas id="myChart" width="400" height="300"></canvas>