javascript - 需要在变量饼 Highcharts 上放置边框吗？

Question

1.需要给变量饼图加上边框。

2.需要更改图表的颜色。2.需要更改图例的文字大小。

我尝试过，但显示错误。这可以做到上面的想法吗？

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

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



Highcharts.chart('container', {
chart: {
    type: 'variablepie'
},
title: {
    text: 'Countries compared by population density and total area.'
},
tooltip: {
    headerFormat: '',
    pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b><br/>' +
        'Area (square km): <b>{point.y}</b><br/>' +
        'Population density (people per square km): <b>{point.z}</b><br/>'
},
series: [{
    minPointSize: 10,
    innerSize: '20%',
    zMin: 0,
    name: 'countries',
    data: [{
        name: 'Spain',
        y: 505370,
        z: 92.9
    }, {
        name: 'France',
        y: 551500,
        z: 118.7
    }, {
        name: 'Poland',
        y: 312685,
        z: 124.6
    }, {
        name: 'Czech Republic',
        y: 78867,
        z: 137.5
    }, {
        name: 'Italy',
        y: 301340,
        z: 201.8
    }, {
        name: 'Switzerland',
        y: 41277,
        z: 214.5
    }, {
        name: 'Germany',
        y: 357022,
        z: 235.6
    }]
}]
});

需要像该图像一样在图表顶部绘制边框。

Answer 1

1 - 要添加边框，请使用 Highcharts。 SVG渲染器:

chart: {
    type: 'variablepie',
    events: {
        load: function() {
            this.renderer.circle(
                this.chartWidth / 2,
                this.plotHeight / 2 + this.plotTop,
                this.plotHeight / 2
            ).attr({
                fill: 'rgba(0,0,0,0)',
                stroke: 'green',
                'stroke-width': 2
            }).add()
        }
    }
}

API:https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#circle

2 - 要更改点的颜色，请设置 colors 数组:

colors: ['#4286f4', '#19e597', '#e84a4a', '#bbd827', '#27cfd8', '#d827cf', '#3a1c0f'],

API:https://api.highcharts.com/highcharts/colors

3 - 要更改图例中的文本大小，请在 itemStyle 中设置 fontSize:

legend: {
    itemStyle: {
        fontSize: 16
    }
}

API:https://api.highcharts.com/highcharts/legend.itemStyle

现场演示:https://jsfiddle.net/BlackLabel/dLv2e0hq/