qpieslice 渐变效果_饼图与渐变(Pie chart with gradient)

饼图与渐变(Pie chart with gradient)

以下是单色饼图的示例。

配置 (Configurations)

现在让我们看一下所采取的其他配置/步骤。

颜色

使用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;

}()

);

例子 (Example)

highcharts_pie_monochrome.htm

Highcharts Tutorial

$(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}: {point.percentage:.1f}%'

};

var plotOptions = {

pie: {

allowPointSelect: true,

cursor: 'pointer',

dataLabels: {

enabled: true,

format: '{point.name}%: {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);

});

结果 (Result)

验证结果。

新页面打开