【highcharts應用-雙餅圖】
前言
:
最近小編在做圖形展現這塊的功能,用到了大家常用的Highcharts,本篇部落格小編來總結一下專案中的應用:
核心
程式碼
/**更新全場工作計劃**/
function updataFactoryPlainData(){
$('#factionPlainCharts').highcharts({
chart: {
type: 'pie',
height:'200'
},
yAxis: {
title: {
text: ''
}
},
colors:[
'#90EE7E',//第一個顏色 淺綠
'#F7A35C',//第二個顏色 橘黃
'#FA8072',//第三個顏色 品紅
'#DDDF00',//第四個顏色 黃色
'#32CD32' //第五個顏色 綠色
],
//禁用匯出模組
exporting:{
enabled:false
},
//資料列配置
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
borderWidth: 0
},
plotOptions: {
pie: {
shadow: false,
center: ['40%', '30%'], //餅圖圓心座標
showInLegend:true
}
},
tooltip: {
valueSuffix: '' //資料提示框 中 資料字尾
},
title:'',
//遮蔽版權資訊
credits:{
enabled:false
},
series: [{
name: '數量',
data: D_3_1_inner,
size: '80%',
dataLabels: {
enabled:false
}
}, {
name: '數量',
data: D_3_1_outer,
size: '80%',
innerSize: '80%',
dataLabels: {
enabled:false
},
id: 'versions'
}]
});
}
/**全場工作計劃**/
innerData = data.D_3_1.innerData;
outterData = data.D_3_1.outterData;
for( i=0;i<innerData.length;i++){
D_3_1_inner.push({
name: innerData[i].name,
y:innerData[i].value
});
}
for( i=0;i<outterData.length;i++){
D_3_1_outer.push({
name: outterData[i].name,
y:outterData[i].value
});
}
效果圖
官方文件:
https://api.hcharts.cn/highcharts
總結
感謝讀者的閱讀
相關文章
- Highcharts繪製餅圖
- Highcharts+PHP+Mysql生成餅狀統計圖PHPMySql
- js圖表控制元件:highcharts的應用JS控制元件
- echarts 餅圖巢狀 二級餅圖 子餅圖 複合餅圖Echarts巢狀
- 用matplotlib散點圖用餅圖示記
- 企業快速開發平臺Spring Cloud+Spring Boot+Mybatis之Highcharts 基本餅圖CloudSpring BootMyBatis
- 餅圖
- Android 折線圖之hellocharts (餅狀圖)餅圖Android
- 餅圖0625
- Highcharts 圖上文字重影問題
- 用highcharts做資料統計
- Highcharts 實現自定義匯出圖片
- echarts繪製餅圖Echarts
- 【matplotlib 實戰】--餅圖
- SVG繪製餅狀圖SVG
- Python pyecharts繪製餅圖PythonEcharts
- ECharts 餅圖繪製教程Echarts
- PHP 生成折線圖和餅圖等PHP
- Canvas(3)---繪製餅狀圖Canvas
- 使用 Flutter 繪製圖表(二)餅狀圖?Flutter
- Flutter 112: 圖解自定義 ACEPieWidget 餅狀圖Flutter圖解
- 柱狀圖、直方圖、散點圖、餅圖講解直方圖
- 用Python生成柱狀圖、折線圖、餅狀圖來統計自己的手機話費Python
- D3.js上手——餅狀圖JS
- Android-EasyChart第二波餅圖Android
- echarts間隔餅圖實現方法Echarts
- Quart2D 畫圖二 (餅狀圖、柱狀圖)
- Highcharts 7.1.1 釋出,製作圖表的純 JS 類庫JS
- gantt甘特圖可拖拽、編輯(vue、react都可用 highcharts)VueReact
- Highcharts的credits配置去掉或修改“Highcharts.com”連結標籤
- Tableau——資料前處理、折線圖、餅圖(環形圖)
- CSS3動態餅狀圖效果CSSS3
- Python 利用pandas和matplotlib繪製餅圖Python
- 微信小程式(JAVAScript)實現餅圖微信小程式JavaScript
- 自定義View合輯(2)-餅狀圖View
- 微信小程式echarts-餅狀圖微信小程式Echarts
- CSS 單雙引號應用規範CSS
- 全雙工與半雙工技術解析及其應用場景