用于折线图的 React-Vis Legend 切换过滤器

Question

我正在使用 react-vis 并尝试实现一个带有图例的折线图，该图例可以过滤，如本网站顶部的第一个图所示：https://uber.github.io/react-vis/examples/showcases/plots 基本上，当单击图例项时，整个系列以及图例项都会变暗。

我猜想我需要在 https://uber.github.io/react-vis/documentation/api-reference/legends 中的 Legends 下使用 onItemClick 属性来更改线条的不透明度，我已成功创建

<LineSeries
     data={data1}
     opacity={1}
     stroke="#f5222d"
     strokeStyle="solid"
/>

我不确定如何从这里开始，为 onItemClick

构建函数

Answer 1

这是一个简单的例子

import React from "react";
import {
  XYPlot,
  LineSeries,
  DiscreteColorLegend
} from "react-vis";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      series: [{
        title: "Apples",
        disabled: false,
        data: [{ x: 0, y: 12 }, { x: 1, y: 22 }]
      }]
    };
  }

  clickHandler = (item, i) => {
    const { series } = this.state;
    series[0].disabled = !series[0].disabled;
    this.setState({ series });
  };

  render() {
    const { series } = this.state;

    return (
      <div>
        <DiscreteColorLegend
          onItemClick={this.clickHandler}
          width={180}
          items={series}
        />
        <XYPlot height={200} width={200}>
          <LineSeries
            data={series[0].data}
            opacity={series[0].disabled ? 0.2 : 1}
            stroke="#f5222d"
            strokeStyle="solid"
          />
        </XYPlot>
      </div>
    );
  }
}

用于折线图的 React-Vis Legend 切换过滤器

React-Vis Legend toggle filter for line chart

javascript

reactjs

react-vis