reactjs - 如何在 React Highchart 工具提示中添加按钮？

Question

我正在尝试向高级图表工具提示添加一个按钮。但是我收到未捕获的 ReferenceError: showMoreDetails is not defined at HTMLButtonElement.onclick

以下是我用于图表选项的代码。我正在尝试使用工具提示格式化程序添加工具提示。请让我知道是否有在 React-highchart 工具提示上收听点击事件的解决方案

showMoreDetails = () => {
console.log('showDetails');
}


chartOptions = {
    ...options,
    tooltip: {
      useHTML: true,
      backgroundColor: '#000000',
      borderRadius: 6,
      borderColor: '#000000',
      valueDecimals: 2,
      animation: true,
      style: {
        color: 'white',
        opacity: 0.75,
        shadow: '0px 3px 6px #000000',
        pointerEvents: 'auto'
      },
      hideDelay: 1000,
      formatter() {
        const { point } = this;
       return `<span>
        <span>Rating = ${point.y}</span>
        <button type="button" onclick="showMoreDetails()">More Details</button>
       </span>`
      }
    }
  }

然后我将其作为选项传递给 React High-charts。

另一方面，当我在 onclick 中添加简单的 console.log 或 alert 时，它就像魅力一样。

<button type="button" onclick="alert('this shows an alert')"> details </button>

请帮助我。提前致谢。

标签： reactjshighchartsreact-highcharts

Answer 1

您需要设置showMoreDetails为全局函数。请检查以下带有功能的示例：

• 在本地范围内：http: //jsfiddle.net/BlackLabel/L6hygs35/
• 在全球范围内：http: //jsfiddle.net/BlackLabel/ycmb5xr3/

---

window.showMoreDetails = function() {
  console.log("showMoreDetails");
};

现场演示： https ://codesandbox.io/s/highcharts-react-demo-wgznb