数据饼状图（data pie chart）

更多有趣示例 尽在 小红砖社区

示例

代码

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sunburst.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

CSS

#container {
	min-width: 310px;
	max-width: 500px;
	margin: 0 auto
}

JS

var data = [
  {
    id:'0',
    parent:'',
    name: ' ',
    color:'white'
  },
  {
            id: 'R',
    parent:'0',
            name: 'Rural',
           color: "#ecb37c"
        }, {
            id: 'U',
    parent:'0',
            name: 'Urban'
        }, {
        	id:'RV',
            name: 'Vehicles',
            parent: 'R'
        }, {
        	id:'RO',
            name: 'Others',
            parent: 'R'
        },   {
        	id:'UV',
            name: 'Vehicles',
            parent: 'U'
        }, {
        	id:'UO',
            name: 'Others',
            parent: 'U'
        },  {
            name: 'Cars and minivans',
            parent: 'RV',
            value: 6767
        },  {
            name: 'Pickups',
            parent: 'RV',
            value: 2965
        },  {
            name: 'SUVs',
            parent: 'RV',
            value: 2973
        },  {
            name: 'Large trucks',
            parent: 'RV',
            value: 501
        },  {
            name: 'Motorcycles',
            parent: 'RV',
            value: 1986
        },  {
            name: 'Pedestrians',
            parent: 'RO',
            value: 1141
        },  {
            name: 'Bicyclists',
            parent: 'RO',
            value: 187
        },  {
            name: 'Cars and minivans',
            parent: 'UV',
            value: 6727
        },  {
            name: 'Pickups',
            parent: 'UV',
            value: 1367
        },  {
            name: 'SUVs',
            parent: 'UV',
            value: 2114
        },  {
            name: 'Large trucks',
            parent: 'UV',
            value: 173
        },  {
            name: 'Motorcycles',
            parent: 'UV',
            value: 3025
        },  {
            name: 'Pedestrians',
            parent: 'UO',
            value: 4642
        },  {
            name: 'Bicyclists',
            parent: 'UO',
            value: 554
        }];

// Splice in transparent for the center circle
//Highcharts.getOptions().colors.splice(0, 0, 'transparent');

Highcharts.setOptions({
    colors: [ '#FAA74B','#01BAF2', '#71BF45','#f6fa4b', '#fbb2ea']
}); 
Highcharts.chart('container', {

    chart: {
        height: '100%'
    },

    title: {
        text: 'Urban vs rural road fatalities in 2017'
    },
  subtitle:{
    text:'Source: <a href="https://www.iihs.org/topics/fatality-statistics/detail/urban-rural-comparison">Insurance Institute for Highway Safety </a>'
  },
    series: [{
        type: "sunburst",
        data: data,
        allowDrillToNode: true,
        cursor: 'pointer',
        dataLabels: {
            format: '{point.name}',
            filter: {
                property: 'innerArcLength',
                operator: '>',
                value: 16
            }
        },
        levels: [{
            level: 1,
            levelIsConstant: false,
            dataLabels: {
                filter: {
                    property: 'outerArcLength',
                    operator: '>',
                    value: 64
                }
            }
        }, {
            level: 2,
            colorByPoint: true
        },
        {
            level: 3,
            colorVariation: {
                key: 'brightness',
                to: -0.5
            }
        }, {
            level: 4,
            colorVariation: {
                key: 'brightness',
                to: 0.5
            }
        }]

    }],
    tooltip: {
        headerFormat: "",
        pointFormat: 'The population of <b>{point.name}</b> is <b>{point.value}</b>'
    }
});