hicharts 时间曲线图
2015-10-13 11:39
302 查看
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>用水量时间曲线图</title> <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> <script type="text/javascript" src="exporting.js"></script> <script type="text/javascript"> $(function () { var arrayData = [12.8446, 14.8445, 5.8444, 0, 24.8418, 40.8264, 32.8258, 12.8232, 24.8233, 22.8258, 16.8283, 18.8278, 6.8256, 7.8292, 21.8239, 33.8239, 39.8245, 50.8265, 21.8261, 11.8269]; var data1 = [40,40,40,50,30,29,36,24,51,46,5,9,6,6] ; console.log( Date.UTC(2015, 0, 01)); $('#container').highcharts({ chart: {//图表类型 zoomType: 'x' }, title: {//标题 text: '每天用水量分析' }, subtitle: {//副标题 text: document.ontouchstart === undefined ? '可点击拖动区域' : 'Pinch the chart to zoom in' }, credits: {//是否显示logo enabled:false }, xAxis: {//x轴 type: 'datetime', dateTimeLabelFormats: { day: '%m-%d' }, minRange: 14 * 24 * 3600000// fourteen days }, yAxis: {//y轴 title: { text: '用水量 (m³)' } }, legend: {//图例 enabled: false }, plotOptions: { area: { fillColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1}, stops: [ [0, Highcharts.getOptions().colors[0]], [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] ] }, marker: { radius: 2 }, lineWidth: 1, states: { hover: { lineWidth: 1 } }, threshold: null } }, series: [{ type: 'area', name: '用水量', pointInterval: 24 * 3600 * 1000, pointStart: Date.UTC(2015, 0, 01), data: data1 }], tooltip:{ formatter:function(){ return Highcharts.dateFormat('%Y-%m-%d',this.x)+'<br><strong>'+this.series.name+'</strong>'+' : '+this.y+' m³'; } } }); }); </script> </head> <body> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> </body> </html>
相关文章推荐
- 自旋锁(spin lock)与互斥量的区别
- 国家商用密码申请
- java 笔试面试易错题
- 一共81个,开源大数据处理工具汇总(上)
- 毫秒倒计时小Demo
- JSP自定义标签 - 嵌套
- PHP中empty()和isset()的区别
- oracle中的rownum、order by与分页
- Nginx报错及解决方案汇总
- BCC操作Log
- Java DOM 解析 XML详解
- MVC api json 格式
- 软件测试之客户化测试
- ubuntu14.04使用IceGridAdmin图形界面
- C# VS2012下的3D显示(二)
- ScrollView嵌套GridView,并实现GridView竖直分页加载
- 安装Leptonica、Tesseract-OCR
- iOS Quartz 绘图
- ALSA 接口编程实例——语音聊天
- iOS 对Image图片本身进行旋转0,90,180,270