如何在圖表工具提示格式化程序中使用react-highcharts？

Question

我該如何使用圖表工具提示格式化程序？ 我正在使用反應包裝的highcharts。
我的配置是這樣的：

const CHART_CONFIG = { 
    ... 
    tooltip: 
    { 
     formatter: (tooltip) => { 
      var s = '<b>' + this.x + '</b>'; 
      _.each(this.points,() => { 
       s += '<br/>' + this.series.name + ': ' + this.y + 'm'; 
      }); 
      return s; 
     }, 
     shared: true 
    }, 
    ... 
}  

但是使用這個關鍵字我無法訪問表範圍，也是我不能得到提示PARAM點。 謝謝

Answer 1

我已經遇到過這個問題。我已經通過創建一個格式化工具提示的函數並將默認值應用於我想要的數據來解決此問題。

這裏是a live example，用下面的代碼：

import React, { Component } from 'react'; 
import { render } from 'react-dom'; 
import ReactHighcharts from 'react-highcharts'; 
import './style.css'; 

class App extends Component { 
    static formatTooltip(tooltip, x = this.x, points = this.points) { 
    let s = `<b>${x}</b>`; 
    points.forEach((point) => 
     s += `<br/>${point.series.name}: ${point.y}m` 
    ); 

    return s; 
    } 

    static getConfig =() => ({ 
    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 
    tooltip: { 
     formatter: App.formatTooltip, 
     shared: true, 
    }, 
    series: [{ 
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
    }, { 
     data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4] 
    }], 
    }) 

    render() { 
    return (
     <div> 
     <ReactHighcharts config={App.getConfig())} /> 
     </div> 
    ); 
    } 
} 

render(<App />, document.getElementById('root'));