ChartJS 4.4.0:有没有办法在图表上获得某种onLeave事件?

drnojrws  于 2023-10-18  发布在  Chart.js
关注(0)|答案(1)|浏览(154)

我有一个x轴上没有任何网格的图表,我想在悬停的x轴数据集上显示一条虚线。我设法使用onHover函数添加了这条虚线,但我无法检测到鼠标离开了图表。据我所知,图表没有onLeave函数。
有没有人有一个想法,我如何才能让这个工作?
我为这个问题创建了一个最小的Codepen:https://codepen.io/rbierbauer/pen/KKbZKjy当鼠标悬停在图表中时,虚线会被添加,但不能在鼠标离开时删除。
我还尝试了自定义交互,但也只有悬停事件,而没有鼠标离开事件。

5rgfhyps

5rgfhyps1#

你可以让ChartJS监听mouseOut事件。https:www.chartjs.org/docs/latest/configuration/interactions.html#event-option
然后使用自定义插件捕获该事件并删除行:

plugins: [{
    id: 'someEventCatcher',
    beforeEvent(chart, args, pluginOptions) {
        if (args.event.type === 'mouseout') {
            chart.options.scales.x.grid.color = new Array(5).fill('transparent');
            chart.update();
        }
    }
}],

我还向onHover函数添加了以下内容:

if (!chartElement.length) {
    return;
}

这将防止chartElement[0].index;在没有悬停对象时失败
基于您的codepen的小演示

const chartCanvas = document.getElementById('chart-canvas');
const chart = new Chart(chartCanvas, {
  type: 'line',
  data: {
    labels: ['December 2022','January 2023','February 2023','March 2023','Aprile 2023'],
    datasets: [ 
      {
        label: 'Label 1',
        data: [10020, 4120, 63510, 13220, 11225],
        borderWidth: 1,
        borderColor: '#C6AB8D',
        backgroundColor: '#C6AB8D',
        pointRadius: 0,
        pointHoverRadius: 6,
      },
      {
        label: 'Label 2',
        data: [9020, 325, 6512, 7220, 4220],
        borderWidth: 1,
        borderColor: '#ffffff',
        backgroundColor: '#ffffff',
        pointRadius: 0,
        pointHoverRadius: 6,
      }                                              
    ]
  },
  plugins: [{
    id: 'someEventCatcher',
    beforeEvent(chart, args, pluginOptions) {
      if (args.event.type === 'mouseout') {
        chart.options.scales.x.grid.color = new Array(5).fill('transparent');
        chart.update();
      }
    }
  }],
  options: {
  events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
    responsive: true,
    maintainAspectRatio: false,
    interaction: {
      mode: 'index',
      intersect: false,
    },
    scales: {
      x: {
        offset: true,
        border: {
          color: 'rgba(255, 245, 236, 0.4)',
          dash: [4,4]
        },
        grid: {
          color: 'transparent',
        },
        ticks: {
          color: 'rgba(255, 245, 236, 0.4)',
        }
      },
      y: {
        beginAtZero: true,
        border: {
          color: 'rgba(255, 245, 236, 0.4)',
        },
        grid: {
          color: 'rgba(255, 245, 236, 0.1)',
        },
        ticks: {
          color: 'rgba(255, 245, 236, 0.4)',
        }
      }
    },
    onHover: (event, chartElement) => {
    
    if (!chartElement.length) {
    
        return;
    }
      const index = chartElement[0].index;
      const totalCount = chart.data.labels.length;

      const gridColors = [];
      for (let i = 0; i < totalCount; i++) {
        if (i == index) {
          gridColors.push('rgba(255, 245, 236, 0.4)');
        } else {
          gridColors.push('transparent');
        }
      }
      chart.options.scales.x.grid.color = gridColors;

      chart.update();
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div style="background: rgba(0, 23, 47, 1);">
  <canvas id="chart-canvas" height="600"></canvas>
</div>

相关问题