Jak używać formatowania podpowiedzi wykresu w schematach high-chart?

Question

Jak mogę użyć formantu narzędzia wykresu? Używam wrapper reagowania na highcharts.
mam config tak:

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 
    }, 
    ... 
}  

Ale nie może uzyskać dostępu do zakresu wykresu przy użyciu tego słowa kluczowego, a także nie może uzyskać punkt z podpowiedzi param. Dziękujemy

Answer 1

Już napotkałem ten problem. Rozwiązałem go, tworząc funkcję formatowania etykiety narzędzia i stosując wartości domyślne do żądanych danych.

Oto a live example z poniższym kodzie:

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'));