Javascript 如何在图表中使用图表工具提示格式化程序？

如何使用图表工具提示格式化程序？ 我正在使用react包装器制作海图。
我有这样的配置：

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

const图表\u配置={
...
工具提示：
{
格式化程序：（工具提示）=>{
var s=''+此.x+''；
_.each（this.points，（）=>{
s+='
'+this.series.name+'：'+this.y+'m'；
});
返回s；
},
分享：真的
},
...
}    

但我不能使用这个关键字访问图表范围，也不能从工具提示参数中获取点。

---

谢谢

我已经遇到了这个问题。我通过创建一个函数来格式化工具提示，并将默认值应用于我想要的数据，从而解决了这个问题

以下是，代码如下：

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

import React，{Component}来自'React'；
从'react dom'导入{render}；
从“react highcharts”导入react highcharts；
导入“/style.css”；
类应用程序扩展组件{
静态格式工具提示（工具提示，x=this.x，points=this.points）{
设s=`${x}`；
点数。forEach（（点数）=>
s+=`
${point.series.name}:${point.y}m`
);
返回s；
}
静态getConfig=（）=>({
xAxis：{
类别：[一月、二月、三月、四月、五月、六月、七月、八月、九月、十月、十一月、十二月]
},
工具提示：{
格式化程序：App.formatTooltip，
分享：是的，
},
系列：[{
数据：[29.9,71.5,106.4,129.2,144.0,176.0,135.6148.5,216.4194.1,95.6,54.4]
}, {
数据：[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（）{
返回(
);
}
}
render（，document.getElementById（'root'））；

还有另一种方法可以帮助您将React组件作为工具提示本身的一部分使用

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

const Item=（{name，value}）=>{name}:{value}
const config={
格式化程序（本）{
const container=document.createElement（“div”）；
返回此.points.map（点=>{
ReactDOM.render(
)
return container.innerHTML
}
}
}

我创建了一个工具提示切换器，可以用作常规工具提示或共享工具提示

isTooltipShared

是一个布尔属性，指示是否共享工具提示

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

const选项={
工具提示：{
格式化程序：props.isTooltipShared？
函数（）{
设s=`${this.x}`；
this.points.forEach（（点）=>{
s+=`
${point.series.name}:${point.y}`；
});
返回s；
}：函数（）{
返回`${this.series.name}:${this.x}-${this.y}`；
},
共享：props.isTooltipShared，
},
};

并与

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

---

OP无法确定如何使用

this

关键字访问图表范围。简单的答案是，OP使用了一个胖箭头函数。相反，请尝试按照OP代码的修改版本使用普通函数：

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

---

Highcharts期望tootlip fromatter返回HTML字符串。当使用Highcharts的react包装器时，可以使用格式化数据编写自定义工具提示组件，然后在设置格式化程序功能时的选项中，可以使用ReactDOMServer的

renderToString

方法，该方法将从给定的元素。 尽管renderToString主要用于服务器端渲染，但它可以毫无问题地在浏览器环境中使用。

从“react dom/server”导入ReactDOMServer；
从“/CustomTooltip”导入CustomTooltip；
常量选项={
工具提示：{
格式化程序（）{
返回ReactDOMServer.renderToString（）；
},
},
};

您传递的

这个.props.navs

的目的是什么？我在渲染函数之前将它记录到控制台，但它没有定义？这是因为箭头函数无法跟踪“this”，我们必须使用普通函数：）谢谢

import ReactDOMServer from 'react-dom/server';
import CustomTooltip from './CustomTooltip';

const options = {
    tooltip: {
        formatter() {
            return ReactDOMServer.renderToString(<CustomTooltip {...this} />);
        },
    },
};