Highcharts 单色饼图.pdfVIP

Highcharts 单⾊饼图 Highcharts 单⾊饼图 Highcharts 饼图 以下实例演⽰了单⾊饼图。 我们在前⾯的章节已经了解了 Highcharts 基本配置语法。接下来 我们来看下其他的 配置。 配置 colors 配置 使⽤ Highcharts.getOptions() .plotOptions.pie .colors 属性来配置每个饼的颜⾊。 // 设置单⾊并为所有饼设置默认主题 Highcharts.getOptions().plotOptions.pie.colors = (function () { var colors = []; var base = Highcharts.getOptions().colors[0]; var i; for (i = 0; i 0; i += ) { // 以⼀暗⾊开始并以亮⾊结束 colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get } return colors; }()); 实例 ⽂件名：highcharts_pie_monochrome .htm html head meta charset=UTF-8 / titleHighcharts 教程 | W3Cschool教程()/title script src=/libs/jquery/2. .4/jquery .min.js script src=/highcharts.js/script /head body div id=container style=width: 550px; height: 400px; margin: 0 script language=JavaScript $(document).ready(function() { var chart = { plotBackgroundColor: null, plotBorderWidth: null, plotShadow : false }; var title = { text: Browser market shares at a specific website, 20 4 }; var tooltip = { pointFormat: {}: b{point.percentage:. f}%/b }; var plotOptions = { pie: { allowPointSelect: true, cursor: pointer, dataLabels: { enabled: true, format: b{}%/b: {point.percentage:. f} style: { color: (Highcharts.theme Highcharts.theme.contra } } } }; var series= [{ type: pie, name: Browser share, data: [ [Firefox, 45.0], [IE, 26.8], { name: Chrome, y : 2.8, sliced: true, selected: true }, [Safari, 8.5], [Opera, 6.2], [Others, 0.7] ] }]; // Make monochrome colors and set them as default for all pies Highcharts.getOptions().plotOptions.pie.