您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)使用HighCharts怎么繪制一個(gè)2D堆柱狀圖,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
1、HighCharts之2D堆柱狀圖源碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D堆柱狀圖</title> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript"> $(function(){ $('#stackedChart').highcharts({ chart: { type: 'column' }, title: { text: '堆柱狀圖' }, xAxis: { categories: ['星期一', '星期二', '星期三', '星期四', '星期五','星期六','星期日'] }, yAxis: { min: 0, title: { text: '水果銷量' }, stackLabels: { enabled: true, style: { fontWeight: 'bold', color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' } } }, legend: { align: 'right', x: -70, verticalAlign: 'top', y: 20, floating: true, backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white', borderColor: '#CCC', borderWidth: 1, shadow: false }, tooltip: { formatter: function() { return '<b>'+ this.x +'</b><br/>'+ this.series.name +': '+ this.y +'<br/>'+ 'Total: '+ this.point.stackTotal; } }, plotOptions: { column: { stacking: 'normal', dataLabels: { enabled: true, color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', style: { textShadow: '0 0 3px black, 0 0 3px black' } } } }, series: [{ name: '蘋果', data: [58, 31, 49, 12, 35,65,98] }, { name: '梨子', data: [12, 45, 63, 24, 17,87,35] }, { name: '桃子', data: [67, 89, 47, 27, 58,67,34] }, { name: '橘子', data: [54, 36, 78, 64, 35,78,94] }] }); }); </script> </head> <body> <div id="stackedChart" ></div> </body> </html>
看完上述內(nèi)容,你們對(duì)使用HighCharts怎么繪制一個(gè)2D堆柱狀圖有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。