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、运行效果图：