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

Question

我正在尝试向高图工具添加一个按钮-tip.But我正在 未捕获的 ReferenceError：未定义 showMoreDetails 在 HTMLButtonElement.onclick

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

上的点击事件

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 或警报时，它就像魅力一样。

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

请帮我解决这个问题。提前致谢。

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

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

How to Add button in React Highchart Tooltip?

highcharts

reactjs

react-highcharts