图表插件的简单使用"/>
Highcharts,Web前段图表插件的简单使用
HIGHCHARTS 简介:
Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表,其中很多图表可以集成在同一个图形中形成混合图。
Highcharts 可以在所有的移动设备及电脑上的浏览器中使用,包括 iPhone,iPad 和 IE6 以上的版本,在 IOS 和 Android 系统中 Highcharts 支持多点触摸功能,因而可以给您提供极致的用户体验。在现代的浏览器中使用 SVG 技术进行图形绘制,在低版本 IE 则使用 VML 进行图形绘制。
图表类型 line:直线图 spline:曲线图 area:面积图 areaspline:曲线面积图 arearange:面积范围图 areasplinerange:曲线面积范围图 column:柱状图 columnrange:柱状范围图 bar:条形图 pie:饼图 scatter:散点图 boxplot:箱线图 bubble:气泡图 errorbar:误差线图 funnel:漏斗图 gauge:仪表图 waterfall:瀑布图 polar:雷达图 pyramid:金字塔
页面引入JS即可<script src="<%=basePath%>highcharts/highcharts.js"></script>
页面元素<div id="container" style="width:48%;height:48%;float:left;"></div> <div id="container1" style="width:48%;height:48%;float:left;"></div> <div id="container2" style="width:48%;height:48%;float:left;"></div>
页面JS方法
function setChart(type){ highcharts("container",type,'日志分类统计',jsonobj.names,jsonobj.vals,"日志数","条"); highcharts("container1",type,'近三十日(日日志统计)',jsonobj.names1,jsonobj.vals1,"日志数","条"); highcharts("container2",type,'近十二月(月日志统计)',jsonobj.names2,jsonobj.vals2,"日志数","条"); } function highcharts(id,type,title,categories,data,ytitle,ext){ $('#'+id).highcharts({ chart: { type: type }, title: { text: title }, subtitle: { text: '' }, xAxis: { categories:categories, crosshair: true }, yAxis: { min: 0, title: { text: ytitle } }, tooltip: { headerFormat: '<span style="font-size:10px">{point.key}</span><table>', pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:f} '+ext+'</b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, series: [{ name: ytitle, data: data }] }); }
切换图表 <SELECT id="chart" οnchange="setChart(this.value)" style="float:right;margin-right:10px"> <option value="column">条形统计图</option> <option value="spline">折线统计图</option> <option value="area">面积图</option> </SELECT>
更多推荐
Highcharts,Web前段图表插件的简单使用
发布评论