通过在 React 中调用 jsx 文件设置 Highcharts piechart chartDefaults

Question

我正在使用以下语法来呈现 Highcharts 饼图。

var ContainingClass = React.createClass({
  render: function() {
    return (
        <PieChart
            title={this.props.title}
            series={this.props.series}
        />
    );
  },
});

这很好用，但我需要覆盖 PieChart 中的 tooltip 字段。我可以在 ContainingClass 中更改什么来实现这一点？

编辑：这是一个示例 fiddle PieChart - http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/pie-basic/ 我知道我需要设置工具提示字段并且可以用 javascript 或jquery。我不知道如何在 React 中从 ContainingClass 传递我想要的 tooltip 值。

Answer 1

正确答案是传递一个 ChartOverride 函数，如下所示：

var ContainingClass = React.createClass({

  render: function() {
    return (
        <PieChart
            title={this.props.name}
            series={this.props.series}
            chartOverrides={this.chartOverrides()}
        />
    );
  },
  chartOverrides: function() {
    return {
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      },
    }
  }

});

通过在 React 中调用 jsx 文件设置 Highcharts piechart chartDefaults

Setting Highcharts piechart chartDefaults from calling jsx file in React

javascript

highcharts

reactjs

react-jsx