jQuery插件HighCharts繪制2D帶Label的折線圖效果示例【附demo源碼下載】

2019-11-19 17:14:55

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jQuery插件HighCharts繪制2D帶Label的折線圖效果。分享給大家供大家參考，具體如下：

1、示例代碼：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HighCharts 2D帶Label的折線圖</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(){   $('#lineDefaultChart').highcharts({    chart: {     type: 'line'    },    title: {     text: '(VeVB.COm)統計某周水果銷售情況'    },    subtitle: {     text: '水果銷量'    },    xAxis: {     categories: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']    },    yAxis: {     title: {      text: '單位(kg)'     }    },    tooltip: {     enabled: true,     formatter: function() {      return '<b>'+ this.series.name +'</b><br/>'+       this.x +': '+ this.y +'kg';     }    },    legend: {     layout: 'vertical',     align: 'bottom',     verticalAlign: 'bottom',     borderWidth: 10    },    series: [{     name: '蘋果',     data: [98,25,69,45,15,78,67]    }, {     name: '橘子',     data: [46,78,16,85,67,24,17]    }, {     name: '桃子',     data: [19,54,74,18,34,90,34]    }, {     name: '梨子',     data: [63,52,90,65,47,34,97]    }, {     name: '荔枝',     data: [56,74,99,41,43,65,78]    }]   });  });</script></head><body> <div id="lineDefaultChart" style="width: 1200px; height: 500px; margin: 0 auto"></div></body></html>

2、運行效果圖：