php3d饼状图的教学,Highcharts 3D饼图

Highcharts 3D饼图

以下实例演示了3D饼图。

我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。

配置

chart.options3d 配置

以下列出了 3D 图的基本配置，设置 chart 的 type 属性为 pie，options3d 选项可设置三维效果。

var chart = {

type: 'pie',

options3d: {

enabled: true, //显示图表是否设置为3D， 我们将其设置为 true

alpha: 15, //图表视图旋转角度

beta: 15, //图表视图旋转角度

depth: 50, //图表的合计深度，默认为100

viewDistance: 25 //定义图表的浏览长度

}

};

实例

文件名：highcharts_3d_pie.htm

Highcharts 教程 | 菜鸟教程(runoob.com)

$(document).ready(function() {

var chart = {

type: 'pie',

options3d: {

enabled: true,

alpha: 45,

beta: 0

}

};

var title = {

text: '2014 年特定网站各浏览器占有率'

};

var tooltip = {

pointFormat: '{series.name}: {point.percentage:.1f}%'

};

var plotOptions = {

pie: {

allowPointSelect: true,

cursor: 'pointer',

depth: 35,

dataLabels: {

enabled: true,

format: '{point.name}'

}

}

};

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]

]

}];

var json = {};

json.chart = chart;

json.title = title;

json.tooltip = tooltip;

json.plotOptions = plotOptions;

json.series = series;

$('#container').highcharts(json);

});

以上实例输出结果为：