How can I use chart tooltip formatter in react-highcharts?

问题

how can I use chart tooltip formatter? I am using react wrapper for highcharts.
I have config like this:

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

But I can't access chart scope using this keyword and also I can't get point from tooltip param. Thanks

回答1:

I've already encountered this problem. I've solved it by creating a function to format the tooltip, and applying default values to the data I wanted.

Here is a live example, with the code below:

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

回答2:

OP couldn't figure out how to access the scope of the chart using the this keyword. The simple answer is because OP was using a fat arrow function. Instead, try using a normal function as per this modified version of the OP's code:

const CHART_CONFIG = {
    ...
    tooltip:  
    {
        formatter() {   // Use a normal fn, not a fat arrow fn
            // Access properties using `this`
            // Return HTML string
        },
        shared: true
    },
    ...
}

回答3:

here's another way that also helps you use React components as part of the tooltip itself.

const Item = ({name, value}) => <div> {name}: {value}</div>

const config = { 
  formatter(this) {
    const container = document.createElement("div");
    return this.points.map(point => {
      ReactDOM.render(
        <Item name={point.series.name} value={point.y}/>
      )
      return container.innerHTML
    }
  }
}

回答4:

I have created a tooltip switcher which can be used as a regular tooltip or as shared.

The isTooltipShared is a boolean prop that indicates if a tooltip is shared or not.

const options = {
    tooltip: {
              formatter: props.isTooltipShared ?
                function () {
                  let s = `<b> ${this.x} </b>`;
                  this.points.forEach((point) => {
                    s += `<br/> ${point.series.name} : ${point.y}`;
                  });
                  return s;
                } : function () {
                  return `${this.series.name} : <b> ${this.x} </b> - <b> ${this.y} </b>`;
                },
              shared: props.isTooltipShared,
            },
};

And used with,

<HighchartsReact
   highcharts={Highcharts}
   options={options}
/>

来源：https://stackoverflow.com/questions/45612603/how-can-i-use-chart-tooltip-formatter-in-react-highcharts

标签

javascript

reactjs

Highcharts

react-redux

react-highcharts