时间戳

首页 > 解决方案 > 如何添加变量饼图以响应项目？

javascript - 如何添加变量饼图以响应项目？

问题描述

这是我的代码。如何在反应页面中呈现高图。包括 highcharts.js 和 variable-pie.js 文件。这段代码对吗？？加载图表后，我们没有收到任何错误。而且我们只使用了两个 highchart 库。不使用任何其他 highchart 反应包。这段代码是否足以显示或渲染 reactjs 的 highcharts？

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

标签： javascriptreactjshighchartschart.js

解决方案

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

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

但是，您可以在这里找到一个没有包装器的工作示例：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"));

推荐阅读