<head> <title>业务统计</title> <meta name="decorator" content="default"/> <script type="text/javascript" src="${ctxStatic}/Highcharts-4.1.7/js/highcharts.js"></script> <script type="text/javascript" src="${ctxStatic}/Highcharts-4.1.7/js/modules/exporting.js"></script> <style type="text/css"> .info-title { color: #333; font-size: 18px; fill: #333; width: 90%; text-align: center; margin: 20px; font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,sans-serif; } #contentTable {width: 95%; margin: 0 auto;} </style> <script type="text/javascript"> function page(){ $("#searchForm").attr("action","${ctx}/stat/businessChart/"); $("#searchForm").submit(); return false; } $(function () { //categories为逗号分隔的字符串 var categories = new Array(${categories}); var allNumSeries = new Array(${allNumSeries}); var webNumSeries = new Array(${webNumSeries}); var appNumSeries = new Array(${appNumSeries}); var wapNumSeries = new Array(${wapNumSeries}); //售票张数 $('#numContainer').highcharts({ scrollbar: { enabled: true }, credits: { //去掉官网水印 enabled: false }, title: { text: '业务统计 - 售票张数一览表', x: -20 //center }, subtitle: { text: '${paramMap.beginDate} 至 ${paramMap.endDate}', x: -20 }, xAxis: { categories: categories }, yAxis: { title: { text: '售票张数' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { valueSuffix: '张' }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series: [{ name: '所有售票', data: allNumSeries }, { name: '互联网WEB售票', data: webNumSeries }, { name: '手机APP售票', data: appNumSeries }, { name: '微信WAP售票', data: wapNumSeries }] }); </script> </head> <body> <!-- 售票张数统计(图表) --> <div id="numContainer" style="min-width: 310px; height: 450px; margin: 20px auto;"></div> </body>
Highcharts-4.1.7使用实例(关键部分代码)
原创
©著作权归作者所有:来自51CTO博客作者GeeYL的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
Vue:使用highCharts
使用highcharts
HighCharts Vue 数据 作用域 ajax -
Highcharts使用指南
一、前言(Preface) Highcharts是一个非常流行,界面美观
Highcharts 数据 jquery -
使用highcharts实现无其他信息纯趋势图实战实例
使用highcharts实现无其他信息纯趋势图实战实例Highcharts去掉或者隐藏掉y轴的刻度线
Js highcharts 纯趋势图 Axis 隐藏掉x轴