Question

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

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

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。

另一方面，当我添加简单的console.log或在onclick中发出警报时，它的作用就像魅力。

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

请帮助我。预先感谢。

Answer 1

您需要将Resultado 2: (4) [Array(1), Array(1), Array(1), Array(1)] 0: [DetailedUsageVoiceModel] 1: [DetailedUsageVoiceModel] 2: [DetailedUsageVoiceModel] 3: [DetailedUsageVoiceModel] length: 4 __proto__: Array(0)设置为全局函数。请检查以下具有功能的示例：

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

showMoreDetails

实时演示： https://codesandbox.io/s/highcharts-react-demo-wgznb

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

1 个答案: