javascript - 如何在 Chart.js [React] 中获取标签的 onClick 事件？

Question

我有一个带标签的雷达图，我想在雷达图的标签上有一个点击事件，但该元素总是返回 null。我已经注意到其他堆栈溢出问题
1而这个 2 .一个谈到用普通的 JS 方法来做，另一个对我不起作用，有人能指出我做错了什么吗？
最终目标 -> 我想获取被点击的标签，并在该标签上添加一个划线切换开关，以便我可以在雷达图中打开和关闭数据点。
我的实现

class Chart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      chartData: props.chartData
    };
  }
  render() {
    return (
      <div className="chart">
        <Radar
          data={this.state.chartData}
          options={{
            title: {
              display: true,
              text: "Testing",
              fontSize: 25
            },
            legend: {
              display: true,
              position: "right"
            },
            onClick: function(evt, element) {
              // onClickNot working element null
              console.log(evt, element);
              if (element.length > 0) {
                console.log(element, element[0]._datasetInde);
                // you can also get dataset of your selected element
                console.log(data.datasets[element[0]._datasetIndex]);
              }
            }
          }}
        />
      </div>
    );
  }
}

**Link to the sample implementation **

Answer 1

Note: This answer implementation doesn't implement strikethrough. Strikethrough could be implemented by putting unicode character \u0366 between each character of the label string. Here's an example how do this with Javascript. The reason I'm not showcasing this here, is because it didn't really look that great when I tested it on codesandbox.

In a newer version of chart.js radial scale point label positions were exposed .在下面的示例中，我使用的是 chart.js版本 3.2.0和 react-chartjs-2版本 3.0.3 .
我们可以使用每个标签的边界框和点击位置来确定我们是否点击了标签。
我用过 ref在图表上访问标签数据。
我选择将标签对应的数据值设置为 0 .我这样做是因为如果您要删除与标签对应的元素，标签将随之消失。如果您在下面的演示中看到它的实际效果，我的选择可能更有意义。

const swapPreviousCurrent = (data) => {
  const temp = data.currentValue;
  data.currentValue = data.previousValue;
  data.previousValue = temp;
};

class Chart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      chartData: props.chartData
    };
    this.radarRef = {};
    this.labelsStrikeThrough = props.chartData.datasets.map((dataset) => {
      return dataset.data.map((d, dataIndex) => {
        return {
          data: {
            previousValue: 0,
            currentValue: d
          },
          label: {
            previousValue: `${props.chartData.labels[dataIndex]} (x)`,
            currentValue: props.chartData.labels[dataIndex]
          }
        };
      });
    });
  }

  render() {
    return (
      <div className="chart">
        <Radar
          ref={(radarRef) => (this.radarRef = radarRef)}
          data={this.state.chartData}
          options={{
            title: {
              display: true,
              text: "Testing",
              fontSize: 25
            },
            legend: {
              display: true,
              position: "right"
            }
          }}
          getElementAtEvent={(element, event) => {
            const clickX = event.nativeEvent.offsetX;
            const clickY = event.nativeEvent.offsetY;
            const scale = this.radarRef.scales.r;
            const pointLabelItems = scale._pointLabelItems;
            pointLabelItems.forEach((pointLabelItem, index) => {
              if (
                clickX >= pointLabelItem.left &&
                clickX <= pointLabelItem.right &&
                clickY >= pointLabelItem.top &&
                clickY <= pointLabelItem.bottom
              ) {
                // We've clicked inside the bounding box, swap labels and label data for each dataset
                this.radarRef.data.datasets.forEach((dataset, datasetIndex) => {
                  swapPreviousCurrent(
                    this.labelsStrikeThrough[datasetIndex][index].data
                  );
                  swapPreviousCurrent(
                    this.labelsStrikeThrough[datasetIndex][index].label
                  );

                  this.radarRef.data.datasets[datasetIndex].data[
                    index
                  ] = this.labelsStrikeThrough[datasetIndex][
                    index
                  ].data.previousValue;

                  this.radarRef.data.labels[index] = this.labelsStrikeThrough[
                    datasetIndex
                  ][index].label.previousValue;
                });
                // labels and data have been changed, update the graph
                this.radarRef.update();
              }
            });
          }}
        />
      </div>
    );
  }
}

所以我使用 ref在图表上访问标签位置，我使用 event的 getElementAtEvent获得点击 x和 y使用 event.nativeEvent.offsetX 的位置和 event.nativeEvent.offsetY .
当我们点击标签时，我选择更新 ref 的值并在 0 之间交换标签数据值以及它的实际值(value)。我在自身和与 '(x)' 连接的自身之间交换标签本身.
sandbox example
我在这里不使用 state 的原因是因为我不想在标签数据更新时重新渲染图表。