highcharts繪製3D傾斜的餅圖
阿新 • • 發佈：2020-09-07
繪製類似的3D餅圖時，echart已經無法滿足要求了！
百度查詢使用highcharts就可以了。可以參考官方文件：https://api.highcharts.com.cn/highcharts
直接複製DEMO程式碼就可以雲行了
<html>
<head>
<meta charset="UTF-8" />
<title>餅圖</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script><script src="https://cdn.highcharts.com.cn/highcharts/highcharts-3d.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script type="text/javaScript">
var pieColors = (function () { // 此處是基礎著色，如果設定好顏色，此處就沒有看的必要了var colors =[],
base = Highcharts.getOptions().colors[0],
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;
}());
$(document).ready(function() {
var chart = {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
};
var title = {
text: '測試佔有率'
};
var tooltip = {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
};
var colors=['#FF0000','#00FF00','#0000FF','#FFFF00','#00FFFF','#FF00FF']; //設定餅圖顏色
var credits = {
enabled: false //禁用版權url 此處不設定， 會顯示highecharts.com
};
var plotOptions = {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 25, //餅圖厚度
// color:pieColors,
dataLabels: {
distance: 20,//設定引導線的長度
// color:'red',//全域性設定字型顏色
enabled: true,
// format: '{point.name}',
formatter: function() { //設定字型與引導線和餅圖顏色一致
if(this.point.name == '中國'){
return '<span style="color:#FF0000">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
}else if(this.point.name == '美國'){
return '<span style="color:#00FF00">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
}else if(this.point.name == '俄羅斯'){
return '<span style="color:#0000FF">['+ this.point.name +' '+Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
}else if(this.point.name == '英國'){
return '<span style="color:#FFFF00">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
}else if(this.point.name == '朝鮮'){
return '<span style="color:#00FFFF">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
}else if(this.point.name == '日本'){
return '<span style="color:#FF00FF">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
}
}
/* style: {
fontSize: '10px',//設定字型大小
fontFamily: 'Verdana, sans-serif'
}*/
}
}
};
var series= [{
type: 'pie',
name: 'Browser share',
startAngle: 180,//調整餅圖的角度 方向：順時針
data: [
['中國', 45.0],
['美國', 16.8],
{
name: '俄羅斯',
y: 22.8,
sliced: true,
selected: true
},
['英國', 8.5],
['朝鮮', 6.2],
['日本', 0.1]
]
}];
var json = {};
json.chart = chart;
json.title = title;
json.tooltip = tooltip;
json.colors = colors; // 設定餅圖顏色
json.credits = credits;
json.plotOptions = plotOptions;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
遇到問題：文字總是有白色描邊，去掉辦法：
style:{
color:'#eee',
fontSize:'14px',
textOutline:"none"
}
轉自於：https://www.cnblogs.com/xiaomg/articles/10382506.html