Отзывчивый несколько круговых диаграмм в ReactHighcharts - PullRequest
Новая
       9

Отзывчивый несколько круговых диаграмм в ReactHighcharts

0 голосов
/ 12 июня 2018

Я использую 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>

1 Ответ

0 голосов
/ 14 июня 2018

Я недавно нашел решение, которое показывает мне pieCharts отзывчиво.Он также работает с ReactHighcharts.Единственное, что вам нужно изменить:

From: Highcharts.seriesTypes.pie.prototype.getCenter

To: 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>
...