專案中可能會用到餅狀圖、柱狀圖、環形圖等，ichartjs是一個很不錯的插件，體量小，只需引入ichart.1.2.1.min.js即可滿足基礎需求，github下載地址是：https://github.com/wanghetommy/ichartjs
先來看一個效果圖：
一、引入ichart.1.2.1.min.js及jquery：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iChart</title>
<meta charset="utf-8" />
<script src="https://www.cnblogs.com/smileZAZ/archive/2021/01/13/scripts/ichart.1.2.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
二、所需資料（json陣列）：
var data = https://www.cnblogs.com/smileZAZ/archive/2021/01/13/[
{ name:'UC瀏覽器', value: 40.0, color: '#4572a7' },
{ name: 'QQ瀏覽器', value: 37.1, color: '#aa4643' },
{ name: '歐朋瀏覽器', value: 13.8, color: '#89a54e' },
{ name: '百度瀏覽器', value: 1.6, color: '#80699b' },
{ name: '海豚瀏覽器', value: 1.4, color: '#92a8cd' },
{ name: '天天瀏覽器', value: 1.2, color: '#db843d' },
{ name: '其他', value: 4.9, color: '#a47d7c' }
];
三、創建iChart物件（本例中使用2D環形圖：iChart.Donut2D）：
var chart = new iChart.Donut2D({
render: 'canvasDiv', //系結的標簽id
data: data, //資料
title: { //標題
text: '2012年第3季度中國第三方手機瀏覽器市場份額',
color: '#3e576f'
},
footnote: { //頁腳
text: 'ichartjs.com',
color: '#486c8f',
fontsize: 11,
padding: '0 38'
},
center: { //環形圖中間的文本
text: '90%',
color: '#3e576f',
shadow: true,
shadow_blur: 2,
shadow_color: '#557797',
shadow_offsetx: 0,
shadow_offsety: 0,
fontsize: 40
},
sub_option: {
label: { //標注
background_color: null,
sign: true, //設定啟用label的小圖示
padding: '0 4',
border: {
enable: false,
color: '#666666'
},
fontsize: 15,
fontweight: 600,
color: '#4572a7'
},
border: {
width: 2,
color: '#ffffff'
}
},
shadow: true, //開啟參考
shadow_blur: 6,
shadow_color: '#aaaaaa',
shadow_offsetx: 0,
shadow_offsety: 0,
background_color: '#fefefe',
offset_angle: -120, //逆時針偏移120度
showpercent: false, //關閉百分比
decimalsnum: 2, //小數點位數
width: 800,
height: 400,
radius: 120
});
四、開啟繪圖：
chart.draw();
完整代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iChart</title>
<meta charset="utf-8" />
<script src="https://www.cnblogs.com/smileZAZ/archive/2021/01/13/scripts/ichart.1.2.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="canvasDiv" style="border:1px solid blue">
</div>
<script>
$(function () {
var data = https://www.cnblogs.com/smileZAZ/archive/2021/01/13/[
{ name:'UC瀏覽器', value: 40.0, color: '#4572a7' },
{ name: 'QQ瀏覽器', value: 37.1, color: '#aa4643' },
{ name: '歐朋瀏覽器', value: 13.8, color: '#89a54e' },
{ name: '百度瀏覽器', value: 1.6, color: '#80699b' },
{ name: '海豚瀏覽器', value: 1.4, color: '#92a8cd' },
{ name: '天天瀏覽器', value: 1.2, color: '#db843d' },
{ name: '其他', value: 4.9, color: '#a47d7c' }
];
var chart = new iChart.Donut2D({
render: 'canvasDiv', //系結的標簽id
data: data, //資料
title: { //標題
text: '2012年第3季度中國第三方手機瀏覽器市場份額',
color: '#3e576f'
},
footnote: { //頁腳
text: 'ichartjs.com',
color: '#486c8f',
fontsize: 11,
padding: '0 38'
},
center: { //環形圖中間的文本
text: '90%',
color: '#3e576f',
shadow: true,
shadow_blur: 2,
shadow_color: '#557797',
shadow_offsetx: 0,
shadow_offsety: 0,
fontsize: 40
},
sub_option: {
label: { //標注
background_color: null,
sign: true, //設定啟用label的小圖示
padding: '0 4',
border: {
enable: false,
color: '#666666'
},
fontsize: 15,
fontweight: 600,
color: '#4572a7'
},
border: {
width: 2,
color: '#ffffff'
}
},
shadow: true, //開啟參考
shadow_blur: 6,
shadow_color: '#aaaaaa',
shadow_offsetx: 0,
shadow_offsety: 0,
background_color: '#fefefe',
offset_angle: -120, //逆時針偏移120度
showpercent: false, //關閉百分比
decimalsnum: 2, //小數點位數
width: 800,
height: 400,
radius: 120
});
chart.draw();
})
</script>
</body>
</html>
轉載于：https://blog.csdn.net/qq_39306736
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/248476.html
標籤：其他
上一篇：深入淺出Javascript閉包
下一篇：實作Vue的多頁簽組件