Question

我使用ReactHighcharts在饼图中可视化我的系列。

我的问题是：如何以响应的方式可视化多个饼图，动态获取其数据。我无法手动更改“中心”饼图道具，因此我使用for循环遍历该系列并自动设置中心属性。

const config = Highcharts.chart('container', {
    chart: {
        type: 'pie',
        plotBorderWidth: 1
    },
    title: {
        text: 'Group Name'
    },
    series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    name: 'bar',
    center: ["20%", "50%"]//Horizontal and vertical position
  }, {
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    name: 'bar',
    center: ["40%", "50%"]//Horizontal and vertical position
  }, {
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    name: 'bar',
    center: ["60%", "50%"]//Horizontal and vertical position
  }, {
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    name: 'bar',
    center: ["80%", "50%"]//Horizontal and vertical position
  }],
    plotOptions: {
        pie: {
            dataLabels: {
                enabled: false
            }                
        }            
    }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/highcharts.js"></script>
<div id="container">

</div>

Answer 1

我最近找到了一个以响应方式向我展示pieCharts的解决方案。它也与ReactHighcharts合作。你唯一需要改变的是：

发件人：Highcharts.seriesTypes.pie.prototype.getCenter

收件人：ReactHighcharts.Highcharts.seriesTypes.pie.prototype.getCenter

我希望我可以帮助其他人解决同样的问题。

以下是解决代码剪辑的问题：

Highcharts.seriesTypes.pie.prototype.getCenter = function () {
	var allPies = this.chart.series.filter(function (s) {
            return s.type === 'pie';
        }),
        count = allPies.length,
        index = allPies.indexOf(this),
        plotWidth = this.chart.plotWidth,
        plotHeight = this.chart.plotHeight,
        smallestSize = Math.min(plotWidth / count, plotHeight);

	return [(plotWidth / count) * (index + 0.5) , plotHeight / 2, smallestSize, 0]	
};

var chart = Highcharts.chart('container', {

    chart: {
        type: 'pie',
        plotBorderWidth: 1
    },
    title: {
        text: 'Group Name'
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        name: 'foo'
    }, {
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        name: 'bar'
    }, {
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        name: 'bar'
    }, {
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        name: 'bar'
    }],
    plotOptions: {
        pie: {
            dataLabels: {
                enabled: false
            }                
        }            
    }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/highcharts.js"></script>
<div id="container" style="height: 300px"></div>

在ReactHighcharts中响应多个pieCharts

1 个答案: