javascript - 如何避免悬停元素chartjs触发下一个元素悬停

Question

我需要为图表 js 中的条显示独立的悬停效果。

问题

当我悬停其中一个栏时，下一个将获得他的悬停样式。

如果我将黑色悬停，它应该会得到较浅的颜色，但除非我悬停它，否则蓝色不能改变。

这是我的代码。没有模拟数据

import React from 'react';
import { Bar } from 'react-chartjs-2';
import { Wrapper, LegendsWrapper } from './style';
import Legend from './Legend/Legend';

const Chart = ({ labels, graphData, colors = ['#17C7D6', '#02193D'] }) => {
  const innerData = {
    labels,
    datasets: graphData.map(({ category, data }, i) => ({
      label: category,
      data,
      backgroundColor: Array(data.length).fill(colors[i]),
      yAxisID: category,
    })),
  };

  const options = {
    tooltips: {
      filter: tooltipItem => tooltipItem.datasetIndex === 0,
      backgroundColor: `#fff`,
      titleFontFamily: `var(--main-font)`,
      titleFontColor: '#000',
      bodyFontFamily: `var(--main-font)`,
      bodyFontSize: 10,
      bodyFontColor: `#888888`,
      // mode: 'nearest',
      cornerRadius: 4,
      position: 'nearest',
    },
    onHover: (e, el) => {
      const section = el[0];
      const currentStyle = e.target.style;
      console.log(e.target);

      currentStyle.color = section && section._start ? 'red' : 'green'; // <-- default here
      currentStyle.cursor = section ? 'pointer' : 'default'; // <-- default here
    },
    layout: {
      padding: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 10,
      },
    },
    legend: {
      display: false,
    },
    maintainAspectRatio: false,
    scales: {
      pointLabels: {
        fontStyle: 'bold',
      },
      xAxes: [
        {
          categoryThickness: 200,
          barThickness: 12,
          gridLines: {
            // display: false,
            drawOnChartArea: false,
            tickMarkLength: 4,
            color: `#052442`,
          },
          ticks: {
            min: 0,
            fontFamily: `var(--main-font)`,
            fontSize: 8,
            fontColor: `#9E9E9E`,
            padding: 15,
            maxRotation: -45,
            minRotation: -45,
          },
        },
      ],
      yAxes: [
        {
          id: graphData[0].category,
          ticks: {
            min: 0,
            fontFamily: `var(--main-font)`,
            fontSize: 8,
            fontColor: `#6e6e6e`,
            padding: 5,
          },
          gridLines: {
            drawOnChartArea: false,
            drawBorder: true,
            tickMarkLength: 4,
            color: `#052442`,
          },
        },
        {
          id: graphData[1].category,
          position: 'right',
          ticks: {
            fontFamily: `var(--main-font)`,
            fontSize: 8,
            fontColor: `#6e6e6e`,
            padding: 5,
          },
          gridLines: {
            // display: false,g
            drawOnChartArea: false,
            drawBorder: true,
            tickMarkLength: 4,
            color: `#052442`,
          },
        },
      ],
    },
  };

  return (
    <Wrapper>
      <LegendsWrapper>
        {graphData.map(({ category }, i) => (
          <Legend text={category} color={colors[i]} />
        ))}
      </LegendsWrapper>

      <Bar data={innerData} options={options} />
    </Wrapper>
  );
};

export default Chart;

模拟数据

labels: ['1950', '1960', '1970', '1980', '1990', '2000', '2010'],
            graphData: [
              {
                category: 'EHR Patients',
                data: [11500, 11600, 14000, 19700, 13000, 3000, 2300],
              },
              {
                category: 'IGM Patients',
                data: [1.2, 3.8, 16.2, 19, 11.7, 1.4, 1.2],
              },
            ],

我已经尝试过hover:() => {}，hoverBackgroundColor但它总是会触发机器人栏的悬停样式。

这是完整的图表。

预期行为

当我悬停黑色条时，它会将他的颜色更改为任何其他颜色，例如“红色”。

但是蓝色的应该保持不变，当我将蓝色悬停时，它应该将他的颜色更改为任何其他颜色，例如“绿色”。

标签： javascriptreactjschartsreact-chartjs