实例详解Highcharts图表库
如果你正在寻找如何创建图表，那我们这篇文章就是为你准备的。我曾经在网上找了很多的资料，怎样去完美的解决创建图表的方案，让我惊喜的是发现了一个很好的很强悍的Javascript图表库：Highcharts。这是一个纯Javascript库，它主要包括两个部分：Highcharts和Highstock。Highcharts可以为您的网站或Web应用程序提供直观，互动式的图表。目前支持线，样条，面积，areaspline，柱形图，条形图，饼图和散点图类型。Highstock可以为您方便地建立股票或一般的时间轴图表。它包括先进的导航选项，预设的日期范围，日期选择器，滚动和平移等等。接下来，我们就用实例来学习Highcharts 。
主要的特性有：
· 兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等；
· 对个人用户完全免费；
· 纯JS，无BS；
· 支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；
· 跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库或者MooTools类库；
· 提示功能：鼠标移动到图表的某一点上有提示信息；
· 放大功能：选中图表部分放大，近距离观察图表；
· 易用性：无需要特殊的开发技能，只需要设置一下选项就可以制作适合自己的图表；
· 时间轴：可以精确到毫秒；
我认为在现有的阶段来说，这是最好的方式来为用户表达图表信息了。今天就准备几个例子，分享给大家，一起来见证这精彩的时刻吧。先看看demo效果图，也一并提供Highcharts最新版下载，有需要的童鞋请猛击！
第一步：HTML
| 1 2 3 4 5 |
<!-- add scripts --> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="js/highcharts.js"></script> <script src="js/gray.js"></script> <script src="js/main.js"></script> |
其实Highcharts也是一个jQuery库，所以在顶部还是要引用jQuery库。在我们的附件里面，gray.js是自定义图表设计。你还可以看到其他的几个小文件：dark-blue.js，dark-green.js，grid.js和skies.js。他们都定义了不同的设计风格。你可以选择其中的一个js文件（本例中是引用了gray.js灰色风格）看不同的图表设计。最后一个文件：main.js这是个初始化代码文件。在我们的演示中提供了不同的图表，让我们看看最终的代码：
| 1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- Chart type switchers --> <div> <button id="column">column</button> <button id="area">area</button> <button id="line">line</button> <button id="spline">Spine</button> <button id="areaspline">areaspline</button> </div>
<!-- two different charts --> <div id="chart_1"></div> <div id="chart_2"></div> |
第二步：CSS
现在的图标是没有任何的样式风格，我们需要给图表加上一些固定的宽度和按钮的样式：
css/main.css
| 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 |
.actions, .chart { margin: 15px auto; width: 820px; } button { background: none repeat scroll 0 0 #E3E3E3; border: 1px solid #BBBBBB; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 1px 1px #F6F6F6 inset; color: #333333; font: bold 12px; margin: 0 5px; padding: 8px 0 9px; text-align: center; text-shadow: 0 1px 0 #FFFFFF; width: 150px; } button:hover { background: none repeat scroll 0 0 #D9D9D9; box-shadow: 0 0 1px 1px #EAEAEA inset; color: #222222; cursor: pointer; } button:active { background: none repeat scroll 0 0 #D0D0D0; box-shadow: 0 0 1px 1px #E3E3E3 inset; color: #000000; } |
第三步：JS
js/main.js
最后，让我们一起看看我们的初始化javascript代码：
| 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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
// Change Chart type function function ChangeChartType(chart, series, newType) { newType = newType.toLowerCase(); for (var i = 0; i < series.length; i++) { var srs = series[0]; try { srs.chart.addSeries({ type: newType, stack: srs.stack, yaxis: srs.yaxis, name: srs.name, color: srs.color, data: srs.options.data }, false); series[0].remove(); } catch (e) { } } }
// Two charts definition var chart1, chart2;
// Once DOM (document) is finished loading $(document).ready(function() {
// First chart initialization chart1 = new Highcharts.Chart({ chart: { renderTo: ’chart_1’, type: ’column’, height: 350, }, title: { text: ’Tools developers plans to use to make html5 games (in %)’ }, xAxis: { categories: [’Processing.js’, ’Impact.js’, ’Other’, ’Ease.js’, ’Box2D.js’, ’WebGL’, ’DOM’, ’CSS’, ’Canvas’, ’Javascript’] }, yAxis: { title: { text: ’Interviewed’ } }, series: [{ name: ’Dev #1’, data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90] }, { name: ’Dev #2’, data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70] }, { name: ’Dev #3’, data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100] }] });
// Second chart initialization (pie chart) chart2 = new Highcharts.Chart({ chart: { renderTo: ’chart_2’, plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, height: 350, }, title: { text: ’Pie chart diagram for the first developer’ }, tooltip: { pointFormat: ’<b>{point.percentage}%</b>’, percentageDecimals: 1 }, plotOptions: { pie: { allowPointSelect: true, cursor: ’pointer’, dataLabels: { enabled: false }, showInLegend: true } }, series: [{ type: ’pie’, name: ’Dev #1’, data: [ [’Processing.js’, 5], [’Impact.js’, 10], [’Other’, 20], [’Ease.js’, 22], [’Box2D.js’, 25], [’WebGL’, 28], [’DOM’, 30], [’CSS’, 40], [’Canvas’, 80], [’Javascript’, 90] ] }] });
// Switchers (of the Chart1 type) - onclick handler $(’.switcher’).click(function () { var newType = $(this).attr(’id’); ChangeChartType(chart1, chart1.series, newType); }); }); |
在一开始的时候我定义了一个函数：ChangeChartType，这个函数可以改变我们的图标类型，当我们点击按钮的时候，触发onClick事件，我们称之为ChangeChartType功能的ID属性的值传递到这个函数（如所需的图表类型的名称）。现在，请注意我们如何初始化Highcharts.Chart对象。我们定义了对象，就出现相对应的图标以及类型，当然我们也可以定义X轴和Y轴，更多的可以到官方网站去了解API参考文档。
文章来自：慧都控件网