AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】

51自学网 http://www.wanshiok.com
jQuery,插件,HighCharts,绘制,2D,带Label,折线图

本文实例讲述了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: '(wanshiok.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、运行效果图:

附:完整实例代码点击此处本站下载

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结

希望本文所述对大家jQuery程序设计有所帮助。


jQuery,插件,HighCharts,绘制,2D,带Label,折线图  
上一篇:jquery仿苹果的时间/日期选择效果  下一篇:js/jq仿window文件夹移动/剪切/复制等操作代码