Как избежать элементов Hover chartjs, триггеры hover для следующих элементов - PullRequest
Новая
       29

Как избежать элементов Hover chartjs, триггеры hover для следующих элементов

2 голосов
/ 08 октября 2019

Мне нужно показать независимые эффекты при наведении курсора на столбцы в моем графике js.

Задача

Когда я наводю один из баров, следующий получает егостиль наведения.

enter image description here

Если я наведу черный, он должен получить более светлый цвет, но синий не должен меняться, пока я не наведу его.

Это мой код. без макетов данных 

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, но этовсегда запускает стили наведения для ботов.

Это полный график.

enter image description here

Ожидаемое поведение

Когда я наведу черную полосу, он изменит его цвет на любой другой цвет, например, «красный».

Но синий должен остаться прежним, а когда я наведу синююон должен изменить свой цвет на любой другой цвет, например, «зеленый».

...