如何添加可变饼图以反应项目? [英] How to add variable-pie chart to react project?

问题描述

这是我的代码.如何在react页面中渲染高图.包含highcharts.js& variable-pie.js文件.此代码正确吗?加载图表后，便没有任何错误.而且我们仅使用两个highchart库.而不使用任何其他highchart react程序包.这段代码是否足以显示或呈现reactjs的图表?

This is my code.How to render highcharts in react page. Included highcharts.js & variable-pie.js files. Is this code right ?? Once we load the chart, we didn't get any error. And we are only using two highchart library only. without using any other highchart react packages. Is this code is enough to display or render highcharts for 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}
                                    />
    )

推荐答案

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

I recommend you to use highcharts-react-official wrapper: https://github.com/highcharts/highcharts-react#readme

它将允许您将Highcharts与React一起使用.示例: https://codesandbox.io/s/ovx6kqok​​qq

It will allow you to simply use Highcharts with React. Example: https://codesandbox.io/s/ovx6kqokqq

但是，您可以在这里找到不带包装的有效示例: https://codesandbox.io/s/v6rrn7n745

However, here you can find a working example without the wrapper: 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"));

这篇关于如何添加可变饼图以反应项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！