- Highcharts 教程
- Highcharts - 主页
- Highcharts - 概览
- Highcharts - 环境设置
- Highcharts - 配置语法
- Highcharts - 折线图
- Highcharts - 面积图
- Highcharts - 条形图
- Highcharts - 柱状图
- Highcharts - 饼状图
- Highcharts - 散点图
- Highcharts - 气泡图
- Highcharts - 动态图
- Highcharts - 组合图
- Highcharts - 3D 图
- Highcharts - 角度仪表
- Highcharts - 热力图
- Highcharts - 树状图
- Highcharts 有用资源
- Highcharts - 快速指南
- Highcharts - 有用资源
- Highcharts - 讨论
Highcharts - 单色饼状图
下面是单色饼状图的示例。
我们在 Highcharts 配置语法 章节中已经看到用于绘制图表的配置内容。
配置
现在让我们看看添加的配置/步骤。
colors
使用 Highcharts.getOptions().plotOptions.pie.colors 属性配置每个饼的顏色。
// Make monochrome colors and set them as default for all pies Highcharts.getOptions().plotOptions.pie.colors = ( function () { var colors = []; var base = Highcharts.getOptions().colors[0]; var i; for (i = 0; i < 10; i += 1) { // Start out with a darkened base color (negative brighten), and end // up with a much brighter color colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get()); } return colors; }() );
示例
highcharts_pie_monochrome.htm
<html> <head> <title>Highcharts Tutorial</title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script src = "https://code.highcharts.com/highcharts.js"></script> </head> <body> <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div> <script language = "JavaScript"> $(document).ready(function() { var chart = { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }; var title = { text: 'Browser market shares at a specific website, 2014' }; var tooltip = { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }; var plotOptions = { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name}%</b>: {point.percentage:.1f} %', style: { color: ( Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' } } } }; var series = [{ type: 'pie', name: 'Browser share', data: [ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.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.colors = (function () { var colors = []; var base = Highcharts.getOptions().colors[0]; var i; for (i = 0; i < 10; i += 1) { // Start out with a darkened base color (negative brighten), and end // up with a much brighter color colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get()); } return colors; }()); var json = {}; json.chart = chart; json.title = title; json.tooltip = tooltip; json.series = series; json.plotOptions = plotOptions; $('#container').highcharts(json); }); </script> </body> </html>
结果
验证结果。
highcharts_pie_charts.htm
广告