highcharts饼图设置饼的各个色块

最新推荐文章于 2023-08-18 11:22:38 发布

jiming923

最新推荐文章于 2023-08-18 11:22:38 发布

阅读量2k

点赞数

分类专栏： PHP开发

本文链接：https://blog.csdn.net/jiming923/article/details/26727129

版权

PHP开发专栏收录该内容

56 篇文章 0 订阅

订阅专栏

$series = "[['一星级',2],['二星级',3],['三星级',4],['四星级',5],['五星级',6]]";

$(function () {
    $('#pie_chart').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        colors:[
                '#C80000',//第一个颜色，欢迎加入Highcharts学习交流群294191384
                '#C800C8',//第二个颜色
                '#0062FF',//第三个颜色
                '#00AAFF',
                '#00B400'
              ],
        title: {
            text: ''
        },
        tooltip: {
            pointFormat: '<span style="font-size:14px;font-weight:600;">{series.name}</span>: <span style="font-size:18px;font-weight:600;font-family:Georgia;">{point.percentage:.1f}%</span>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#212121',
                    connectorColor: '#000000',
                    format: '<span style="font-size:14px;font-weight:800;">{point.name}</span>: <span style="font-size:18px;font-weight:800;font-family:Georgia;">{point.percentage:.1f} %</span>'
                }
            }
        },
        series: [{
            type: 'pie',
            name: '百分比',
            data: <?=$series?>
//              [
//                 ['Firefox',   45.0],
//                 ['IE',       26.8],
//                 {
//                     name: 'Chrome',
//                     y: 12.8,
//                     sliced: true,
//                     selected: true
//                 },
//                 ['Safari',    8.5],
//                 ['Opera',     6.2],
//                 ['Others',   0.7]
//            ]
        }]
    });
});

</script>