时间戳

首页 > 解决方案 > 需要在variablepie highchart上加边框吗？

javascript - 需要在variablepie highchart上加边框吗？

问题描述

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
    }]
}]
});

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

标签： javascriptjqueryhighchartschart.js

解决方案

1 - 添加边框使用Highcharts. SVGRenderer：

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 - 要更改图例集中fontSize的文本大小itemStyle：

legend: {
    itemStyle: {
        fontSize: 16
    }
}

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

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

推荐阅读