折线图的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的图例下使用中的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>
    );
  }
}

​

​