通过在React中调用jsx文件来设置Highcharts饼图图表默认值 [英] Setting Highcharts piechart chartDefaults from calling jsx file in React

问题描述

我正在使用以下语法来渲染Highcharts PieChart.

I am using the following syntax to render a Highcharts PieChart.

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

这很好用，但是我需要覆盖PieChart中的tooltip字段.我可以在ContainingClass中进行哪些更改以实现此目的?

This works well, but I need to overwrite the tooltip field in PieChart. What can I change in ContainingClass to make this happen?

这是带有PieChart的样本小提琴-

Here is a sample fiddle with PieChart - http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/pie-basic/ I know that I need to set the tooltip field and could do it in plain javascript or jquery. I don't know how to pass my desired tooltip value from ContainingClass in React.

推荐答案

正确的答案是传递ChartOverride函数，如下所示:

The correct answer is to pass a ChartOverride function as follows:

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饼图图表默认值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！