为多个系列创建多个Pie Highcharts [英] Create multiple Pie Highcharts for multiple series

问题描述

我正在尝试使用JSON数据绘制图表.我的数据有多个系列.因此，创建了两个相互重叠的饼形图.有没有办法让我彼此相邻绘制多个高图?

I am trying to draw a highchart using JSON data. My data has multiple series. Because of that 2 pie charts are created overlapping each other. Is there a way for me to draw the multiple highcharts next to each other instead?

我的JSON，代码和饼图的工作示例相互重叠:

My JSON, code and working example of the pie charts overlapping each other:

let data = [{
    "name": "cakes",
    "data": [
        [
            "us",
            149045
        ],
        [
            "es",
            41746
        ],
        [
            "uk",
            37640
        ],
        [
            "au",
            16594
        ]
    ],
    "marker": {
        "symbol": "circle"
    }
}, {
    "name": "pie",
    "data": [
        [
            "us",
            128845
        ],
        [
            "es",
            35752
        ],
        [
            "uk",
            32246
        ],
        [
            "au",
            14333
        ]
    ],
    "marker": {
        "symbol": "circle"
    }
}]

Highcharts.chart('container', {
        chart: {
            type: 'pie',
            zoomType: 'xy'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    // format: '{series.data[0]} <b>{point.percentage:.1f}%</b>'
                }
            },
        },
        series: data
    });

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container"></div>

如何使饼形图彼此相邻而不是一个接一个?一个用于 cakes ，另一个用于 pies ?

How do I get pie charts next to each other rather than one on top of the other? One for cakes and one for pies?

推荐答案

您可以使用动态计算的样式创建多个图表:

You can create multiple charts with dynamically calculated styles:

data.forEach(function(dataEl) {
    const createdDiv = document.createElement('div');
    createdDiv.style.display = 'inline-block';
    createdDiv.style.width = 100 / data.length + '%'

    mainContainer.appendChild(createdDiv);

    Highcharts.chart(createdDiv, {
        ...,
        series: [dataEl]
    });
});

---

实时演示: https://jsfiddle.net/BlackLabel/jn4p2gq8/

或一个具有每个系列动态计算的 center 属性的图表.

Or one chart with dynamically calculated center property for each series.

API参考: https://api.highcharts.com/highcharts/series.pie.center

这篇关于为多个系列创建多个Pie Highcharts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！