如何添加可变饼图反应项目？

Question

这是我code.How呈现highcharts在反应页。包括highcharts.js和可变pie.js文件。这是代码的权利？一旦我们加载图表，我们没有得到任何错误。而我们只用只有两个highchart库。不使用任何其他highchart反应包。这是代码，就足以显示或呈现highcharts为reactjs？

 componentDidMount() {
            const options = this.highchartsOptions();
            this.chart = Highcharts.chart('pie-chart-profile', options);
        }
    highchartsOptions() {
            const options = {
                chart: {
                    // renderTo: 'container',
                    type: 'variablepie',
                    margin: [0, 0, 0, 0],
                    // marginLeft: -100,
                    events: {
                        load: function() {
                            this.renderer
                                .circle(
                                    this.chartWidth / 2,
                                    this.plotHeight / 2 + this.plotTop,
                                    this.plotHeight / 4,
                                )
                                .attr({
                                    fill: 'rgba(0,0,0,0)',
                                    stroke: '#2ec277',
                                    left: -100,
                                    'stroke-width': 1,
                                })
                                .add();
                        },
                    },
                },
                colors: ['#2ec277', '#2db799', '#b7e886', '#6d5494', '#0077b4'],

                title: {
                    text: null,
                },

                legend: {
                    align: 'right',
                    verticalAlign: 'top',
                    layout: 'vertical',
                    x: 20,
                    y: 100,
                    itemMarginTop: 5,
                    itemMarginBottom: 5,
                    itemStyle: {
                        font: '17pt Trebuchet MS, Verdana, sans-serif',
                        color: '#333333',
                    },
                },
                plotOptions: {
                    series: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: false,
                        },
                        showInLegend: true,
                        size: 185,
                    },
                },

                series: [
                    {
                        minPointSize: 10,
                        innerSize: '27%',
                        zMin: 0,
                        name: 'Job Match',
                        data: [
                            {
                                name: 'Job Title Match  99%',
                                y: 100,
                                z: 99,
                            },
                            {
                                name: 'Industry Match 98%',
                                y: 100,
                                z: 98,
                            },
                        ],
                    },
                ],
            };
            return options;
        }


    return (
    <div
                                        className="chart-toggle-display"
                                        id="pie-chart-profile"
                                        style={style}
                                    />
    )

Answer 1

我建议你使用highcharts-react-official包装：https://github.com/highcharts/highcharts-react#readme

它可以让你简单地使用Highcharts与反应。例如：https://codesandbox.io/s/ovx6kqokqq

然而，在这里你可以找到没有包装的工作示例：https://codesandbox.io/s/v6rrn7n745

import React from "react";
import { render } from "react-dom";
// Import Highcharts
import Highcharts from "highcharts/highstock";
import variablePie from "highcharts/modules/variable-pie.js";

variablePie(Highcharts);

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const options = this.highchartsOptions();
    this.chart = Highcharts.chart("pie-chart-profile", options);
  }
  highchartsOptions() {
    const options = {
      chart: {
        // renderTo: 'container',
        type: "variablepie",
        margin: [0, 0, 0, 0],
        // marginLeft: -100,
        events: {
          load: function() {
            this.renderer
              .circle(
                this.chartWidth / 2,
                this.plotHeight / 2 + this.plotTop,
                this.plotHeight / 4
              )
              .attr({
                fill: "rgba(0,0,0,0)",
                stroke: "#2ec277",
                left: -100,
                "stroke-width": 1
              })
              .add();
          }
        }
      },
      colors: ["#2ec277", "#2db799", "#b7e886", "#6d5494", "#0077b4"],

      title: {
        text: null
      },

      legend: {
        align: "right",
        verticalAlign: "top",
        layout: "vertical",
        x: 20,
        y: 100,
        itemMarginTop: 5,
        itemMarginBottom: 5,
        itemStyle: {
          font: "17pt Trebuchet MS, Verdana, sans-serif",
          color: "#333333"
        }
      },
      plotOptions: {
        series: {
          stacking: "normal",
          dataLabels: {
            enabled: false
          },
          showInLegend: true,
          size: 185
        }
      },

      series: [
        {
          minPointSize: 10,
          innerSize: "27%",
          zMin: 0,
          name: "Job Match",
          data: [
            {
              name: "Job Title Match  99%",
              y: 100,
              z: 99
            },
            {
              name: "Industry Match 98%",
              y: 100,
              z: 98
            }
          ]
        }
      ]
    };
    return options;
  }

  render() {
    return <div className="chart-toggle-display" id="pie-chart-profile" />;
  }
}

render(<App />, document.getElementById("root"));

Answer 2

我相信#pie-chart-profile应该已经有在render()即内部render()最后返回

componentDidMount() {
    const options = this.highchartsOptions();
    this.chart = Highcharts.chart('pie-chart-profile', options);
}
highchartsOptions() {
    const options = {
        chart: {
            // renderTo: 'container',
            type: 'variablepie',
            margin: [0, 0, 0, 0],
            // marginLeft: -100,
            events: {
                load: function() {
                    this.renderer
                        .circle(
                            this.chartWidth / 2,
                            this.plotHeight / 2 + this.plotTop,
                            this.plotHeight / 4,
                        )
                        .attr({
                            fill: 'rgba(0,0,0,0)',
                            stroke: '#2ec277',
                            left: -100,
                            'stroke-width': 1,
                        })
                        .add();
                },
            },
        },
        colors: ['#2ec277', '#2db799', '#b7e886', '#6d5494', '#0077b4'],

        title: {
            text: null,
        },

        legend: {
            align: 'right',
            verticalAlign: 'top',
            layout: 'vertical',
            x: 20,
            y: 100,
            itemMarginTop: 5,
            itemMarginBottom: 5,
            itemStyle: {
                font: '17pt Trebuchet MS, Verdana, sans-serif',
                color: '#333333',
            },
        },
        plotOptions: {
            series: {
                stacking: 'normal',
                dataLabels: {
                    enabled: false,
                },
                showInLegend: true,
                size: 185,
            },
        },

        series: [
            {
                minPointSize: 10,
                innerSize: '27%',
                zMin: 0,
                name: 'Job Match',
                data: [
                    {
                        name: 'Job Title Match  99%',
                        y: 100,
                        z: 99,
                    },
                    {
                        name: 'Industry Match 98%',
                        y: 100,
                        z: 98,
                    },
                ],
            },
        ],
    };
    return options;
}

render() {
    return (
        <div
            className="chart-toggle-display"
            id="pie-chart-profile"
            style={style}
        />
    )
}