Highcharts 圆环图

下图是一个 Highcharts 圆环图

配置

配置属性 chart.type 为 pie 将布标设置为饼图

var chart = {
   type: 'pie'
};

范例

下面的代码列出了 Highcharts 圆环图 的基本配置

<!doctype html>
<meta charset="utf-8" />
<title>Highcharts 基础教程 | 简单教程(www.twle.cn)</title>
<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://cdn.hcharts.cn/highcharts/highcharts-more.js"></script>
<div id="container" style="width: 500px; height: 400px; margin: 0 auto"></div>
<script>  
var colors = Highcharts.getOptions().colors;
var categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'];
var data = [{
        y: 55.11,
        color: colors[0],
        drilldown: {
            name: 'MSIE versions',
            categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
            data: [10.85, 7.35, 33.06, 2.81],
            color: colors[0]
        }
    }, {
        y: 21.63,
        color: colors[1],
        drilldown: {
            name: 'Firefox versions',
            categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
            data: [0.20, 0.83, 1.58, 13.12, 5.43],
            color: colors[1]
        }
    }, {
        y: 11.94,
        color: colors[2],
        drilldown: {
            name: 'Chrome versions',
            categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
                'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
            data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
            color: colors[2]
        }
    }, {
        y: 7.15,
        color: colors[3],
        drilldown: {
            name: 'Safari versions',
            categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
                'Safari 3.1', 'Safari 4.1'],
            data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
            color: colors[3]
        }
    }, {
        y: 2.14,
        color: colors[4],
        drilldown: {
            name: 'Opera versions',
            categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
            data: [ 0.12, 0.37, 1.65],
            color: colors[4]
        }
}];

var browserData = [];
var versionsData = [];
var i, j;
var dataLen = data.length;
var drillDataLen;
var brightness;


// Build the data arrays
for (i = 0; i < dataLen; i += 1) {
  // add browser data
  browserData.push({
     name: categories[i],
     y: data[i].y,
     color: data[i].color
  });

  // add version data
  drillDataLen = data[i].drilldown.data.length;
  for (j = 0; j < drillDataLen; j += 1) {
     brightness = 0.2 - (j / drillDataLen) / 5;
     versionsData.push({
        name: data[i].drilldown.categories[j],
        y: data[i].drilldown.data[j],
        color: Highcharts.Color(data[i].color).brighten(brightness).get()
     });
  }
}

var chart = {
  type: "pie"
};
var title = {
  text: 'Browser market share, April, 2011'
};      
var yAxis = {
  title: {
     text: 'Total percent market share'
  }
};
var tooltip = {
  valueSuffix: '%'
};
var plotOptions = {
  pie: {
     shadow: false,
     center: ['50%', '50%']
  }
};
var series= [{
  name: 'Browsers',
        data: browserData,
        size: '60%',
        dataLabels: {
            formatter: function () {
                return this.y > 5 ? this.point.name : null;
            },
            color: 'white',
            distance: -30
        }
    }, {
        name: 'Versions',
        data: versionsData,
        size: '80%',
        innerSize: '60%',
        dataLabels: {
            formatter: function () {
                // display only if larger than 1
                return this.y > 1 ? '' + this.point.name + ': ' + this.y + '%'  : null;
            }
        }
    }   
];     


var options = {};

options.chart = chart;
options.title = title;
options.yAxis = yAxis;
options.series = series;
options.tooltip = tooltip;
options.plotOptions = plotOptions;

Highcharts.chart('container',options);
</script>

运行范例 »

以上范例输出如下

返回上一级

← Highcharts 半圈圆环图 Highcharts 区间柱形图 →

Highcharts 圆环图

配置

范例

学习 Hightcharts