使用 HighCharts 库的饼图切片半径

时间:2021-07-15 09:54:59

标签: highcharts

大家好,我正在使用 HighCharts 库来绘制图表,我想在饼图下方实现我找不到合适的示例,请帮助我解决这个问题。 enter image description here

2 个答案:

答案 0 :(得分:0)

您可以为蓝点启用切片状态并使用与边框相关的属性:

$this->assertNull($object->property);

现场演示: http://jsfiddle.net/BlackLabel/gnqsuefw/

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

答案 1 :(得分:0)

我在这里为您制作了提取馅饼:https://jsfiddle.net/markwan/qm8xzr93/3/

// Build the chart
Highcharts.chart('container', {
chart: {
    plotBackgroundColor: "#f5f5f5",
    backgroundColor: '#f5f5f5',
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
},
title: {
    text: ''
},
tooltip: {
    enabled: false
},
accessibility: {
    point: {
        valueSuffix: '%'
    }
},
plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',            
        showInLegend: true, 
    }
},
legend: {
  layout: 'vertical',
  align: 'right',
  verticalAlign: 'top',
  itemMarginBottom: 15,      
  x: 0,
  y: 150
},
series: [{
    name: 'Members',
    colorByPoint: true,
    data: [
    
         {
        name: 'Total Members: 1.000.000',
        y: 450000,
        color: "#393f4e",
        borderWidth: 1,
        borderColor: '#f5f5f5',
        dataLabels: {
            enabled: false,
                        
        }
    },
    {
        name: 'Targeted Members: 550.000',
        y: 550000,
        sliced: true,
        borderWidth: 15,
       
        borderColor: 'white',
        color: "#34b9d5",
        dataLabels: {
            enabled: true,
            format: '<b>{point.percentage:.0f}%</b>',
            distance: -70, 
            style: {
                fontSize: 30
            }
        }
       
    }]
}]
});