Highcharts 学习总结
来源：互联网 发布：教师赚钱软件 编辑：程序博客网 时间：2024/06/10 19:31
最近公司项目需要，需要在web页面做一些数据统计，并以折线图的形式展现在前台。选择Highcharts，当然还有其他优秀的表格插件，百度团队开发Echarts，也是很不错的，进入正题。
（1） highcharts官网地址：http://www.highcharts.com/products/highcharts/ 或者也在http://www.hcharts.cn/product/download.php 下载。
（2） highcharts 中文地址：http://www.hcharts.cn/，这里有很详细的资料介绍，API地址：http://www.hcharts.cn/api/index.php#chart.backgroundColor
2、highcharts使用
highcharts是基于jquery开发，因此在引用highchart.js前要先引用jquery:
<script src="jquery.min.js"></script> <script src="highcharts.js"></script>
引入对应的文件中，就可以在调用一些表格插件的函数，但是需要表格显示在web上，还需要为表格定义个显示位置;
<div id="container"></div>
在js文件中只要执行以下语句，就可以在对应的位置上，出现表格。
$('#container').highcharts(options）;
3、highcharts属性配置(options)
关于highcharts的属性配置，这里我只总结，常用的一些，以折线图为例，其他的详细内容可以参考API文档（http://www.hcharts.cn/api/index.php#chart.backgroundColor）。
chart:设置表格的背景颜色、边框、内外边距、字体等
chart: {backgroundColor: "#ffffff", //背景颜色 默认值 borderColor: "#EBBA95", //边框颜色 默认值 #4572A7 borderRadius: 5, //边框圆角 默认值 borderWidth: 2, //边框宽度 默认值 0 spacing: 20, //内边距 默认值 10 10 15 10 /* 外边距 margin:"", marginLeft:"", marginBottom:"", marginRight:"", marginTop:"", */ //表格样式 style: { fontFamily: 'serif' } }
title、subTitle：对应表格的标题、副标题：
// 标题 title: { text: '任务中心-数据统计', },// 副标题 subtitle: { text: '*** 数据统计', },
xAxis 、yAxis ：分别对x坐标轴、y坐标轴的设置。其中可以对表示区（plotBands），或者标示线（plotLines）。标示线、标识区的作用，可以在清晰的看见关心的基准值或者基准区间。下例中在y 轴上分别设置了标示线 、标识区，其中标示线的基准值是5、颜色为red；表示区基准值form 10 to 20 、颜色为FCFFC5。
// y坐标 yAxis: { title: { text: 'Temperature (度)' },// 标示线 plotLines: [{ value: 5, width: 2, color: 'red', label: { text: '标示线', //标签的内容 align: 'left', //标签的水平位置，水平居左,默认是水平居中center x: 10 //标签相对于被定位的位置水平偏移的像素，重新定位，水平居左10px } }],// 标示区 plotBands: [{ from: 10, to: 20, color: '#FCFFC5', zIndex: 1 }], },
color：可以设置图表中显示的颜色，以折线图为例，colo可以设置每种折线现实的颜色，系统默认有10中颜色，当要展现的数据大于10类时，颜色会循环重复，可以自定义设置；
// 默认颜色 colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],
tooptips: 展示当鼠标悬停到图中是，给出的提示信息，可以对位置、内容自定义设置，还可以设置星形线。
// 提示框信息 tooltip: { valueSuffix: '度', //前缀 valuePrefix: '温度', //后缀 shared: true, useHTML: true, headerFormat: '<small>{point.key}</small><table>', pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' + '<td style="text-align: right"><b>{point.y} </b></td></tr>', footerFormat: '</table>',// 十字星形线 crosshairs: [ { width: 2, color: '#ccc', dashStyle: 'shortdot' //短虚线 }, { width: 2, color: "#ccc", dashStyle: 'shortdot', zIndex: 100 } ], },
legend: 图例，这是表格常用的，用于说明对应的颜色或者对应的形状表示的是哪一种数据。
// 图例 legend: { layout: 'horizontal', align: 'center', borderWidth: 0, labelFormatter: function (index) { /* * 获取数据列下标，通过下标判断做一系列处理 * 还可以通过获取数据列名字等来做判断（通过 console.log(this) 来查看数据列详细信息） */ var index = this._i; // return null 则可以不显示图例项 return this.name; } },
plotOptions：图例事件，默认情况下，点击图例会影藏对应的数据。实际情况下，我们希望点击图例影藏，其他的数据，这个都可以在highchart中文网的教程上找到。但是有一个问题，如何使所有数据搜显示了。在这里，添加了一个“ALL”的图例，在传递数据时，给ALL传递一个控制。在图例事件中，通过代码控制，点击ALL的时候，显示所有数据，点击其他图例只显示对应的数据。
//图例事件 -- 点击图例影藏其他的数据plotOptions: { series: { events: { legendItemClick: function (e) { var index = this.index; var series = this.chart.series; var length = series.length; for (var i = 0; i < length; i++) { var s = series[i]; if (index != length - 1) { //非“All”图例 i === index ? s.show() : s.hide(); } else { s.show(); //点击all图例，所有的都显示 } } return false; } } }},
credits：版权信息，默认情况下，显示在表图的右下角，可以添加超链接
// 版权信息credits: { enabled: false, // 默认值，如果想去掉版权信息，设置为false即可 text: 'www.baidu.com', // 显示的文字 href: 'http://www.baidu.com', // 链接地址 position: { // 位置设置 （默认的） align: 'right', x: -10, verticalAlign: 'bottom', y: -5 }, style: { // 样式设置 cursor: 'pointer', fontSize: '12px' } },
series：这个当然是最重要的属性，传递要显示的数据。
series: [ { name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6, 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6, 7.0, 6.9, 9.5, 14.5, 18.2, 21.5 ] }, ...... { name: 'ALL' //这里对应 图例事件 }]
4、highcharts 实例
这里给出我自己写的一个demo，附件下载：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>highchart</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <script src="jquery.min.js"></script> <script src="highcharts.js"></script> <style> #container { width: 40%; height: 400px; float: right; } </style></head><body><div id="container"></div><script> $(function () { $('#container').highcharts({// 图表设置 chart: { backgroundColor: "#ffffff", //背景颜色 默认值 borderColor: "#EBBA95", //边框颜色 默认值 #4572A7 borderRadius: 5, //边框圆角 默认值 borderWidth: 2, //边框宽度 默认值 0 spacing: 20, //内边距 默认值 10 10 15 10 /* 外边距 margin:"", marginLeft:"", marginBottom:"", marginRight:"", marginTop:"", */ //表格样式 style: { fontFamily: 'serif' } },// 标题 title: { text: '任务中心-数据统计', },// 副标题 subtitle: { text: '*** 数据统计', },// x坐标 xAxis: { categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30' ], plotBands: [{ // mark the weekend color: '#FCFFC5', from: 'Mar', to: 'May', zIndex: 2, label: { text: '标示区', verticalAlign: 'middle', style: { fontSize: '12px', fontWeight: 600 } } }] },// y坐标 yAxis: { title: { text: 'Temperature (度)' },// 标示线 plotLines: [{ value: 5, width: 2, color: 'red', label: { text: '标示线', //标签的内容 align: 'left', //标签的水平位置，水平居左,默认是水平居中center x: 10 //标签相对于被定位的位置水平偏移的像素，重新定位，水平居左10px } }],// 标示区 plotBands: [{ from: 10, to: 20, color: '#FCFFC5', zIndex: 1 }], },// 默认颜色 colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],// 提示框信息 tooltip: { valueSuffix: '度', //前缀 valuePrefix: '温度', //后缀 shared: true, useHTML: true, headerFormat: '<small>{point.key}</small><table>', pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' + '<td style="text-align: right"><b>{point.y} </b></td></tr>', footerFormat: '</table>',// 十字星形线 crosshairs: [ { width: 2, color: '#ccc', dashStyle: 'shortdot' //短虚线 }, { width: 2, color: "#ccc", dashStyle: 'shortdot', zIndex: 100 } ], },// 图例 legend: { layout: 'horizontal', align: 'center', borderWidth: 0, labelFormatter: function (index) { /* * 获取数据列下标，通过下标判断做一系列处理 * 还可以通过获取数据列名字等来做判断（通过 console.log(this) 来查看数据列详细信息） */ var index = this._i; // return null 则可以不显示图例项 return this.name; } }, //图例事件 -- 点击图例影藏其他的数据 plotOptions: { series: { events: { legendItemClick: function (e) { var index = this.index; var series = this.chart.series; var length = series.length; for (var i = 0; i < length; i++) { var s = series[i]; if (index != length - 1) { //非“All”图例 i === index ? s.show() : s.hide(); } else { s.show(); //点击all图例，所有的都显示 } } return false; } } } },// 版权信息 credits: { enabled: false, // 默认值，如果想去掉版权信息，设置为false即可 text: 'www.baidu.com', // 显示的文字 href: 'http://www.baidu.com', // 链接地址 position: { // 位置设置 （默认的） align: 'right', x: -10, verticalAlign: 'bottom', y: -5 }, style: { // 样式设置 cursor: 'pointer', fontSize: '12px' } },// 数据 series: [ { name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6, 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6, 7.0, 6.9, 9.5, 14.5, 18.2, 21.5 ] }, { name: 'New York', data: [0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5, 0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5, 0.2, 0.8, 5.7, 11.3, 17.0, 22.0 ] }, { name: 'Berlin', data: [0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0, 0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0, 0.9, 0.6, 3.5, 8.4, 13.5, 17.0 ] }, { name: 'London', data: [3.9, 4.2, 5.7, 8.5, "", 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8, 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8, 3.9, 4.2, 5.7, 8.5, 11.9, 15.2 ] }, { name: 'ALL' //这里对应 图例事件 } ] }); });</script></body></html>展现效果如下：
0 0
- Highcharts 学习总结
- 项目开发-highcharts插件学习总结
- highcharts学习
- highcharts封装使用总结
- highcharts 应用总结
- highcharts使用总结
- highcharts的一些总结
- HighCharts常用方法总结
- HighCharts.js使用总结
- Highcharts图表 - 项目总结
- highcharts设置总结
- Highcharts做柱形图总结
- Highcharts学习一：Highcharts的几个函数
- highcharts 学习一
- highcharts 学习二
- Highcharts学习笔记(一)
- HighCharts学习-柱形图
- highcharts学习之线图
- Collections比较list集合里面对象的大小
- 【Codeforces】-702A- Maximum Increase（水）
- mysql 上一条 下一条
- Eclipse导入Android项目步骤
- ARN [main-SendThread(db99:2222)] zookeeper.ClientCnxn: Session 0x0 for server null, unexpected erro
- Highcharts 学习总结
- Android ListView异步加载图片乱序问题，原因分析及解决方案
- 二叉树的性质以及二叉查找树的基本操作
- 【杭电2112】HDU Today
- 个人感慨
- 继续树莓派GPIO：两片74HC595控制一个8x8LED点阵显示爱心
- js回顾第二阶段
- 编程的数学类似艺术
- java生成带有样式、表格、不定图片的word
