Highcharts——让你的网页上图表画的飞起

Highcharts是一款纯javascript编写的图表库，能够很简单便捷的在Web网站或Web应用中添加交互性的图表，Highcharts目前支持直线图、曲线图、面积图、柱状图、饼图、散点图等多达18种不同类型的图表，可以满足你对Web图表的任何需求！

　　以上是Highcharts中文网上的简介！

　　如果论语法的简单性，或者需要画功能简单的折线、柱状以及饼状图，Highcharts是远远不如js图标库——js charts 的，但是如果涉及到复杂多样的功能特性，Highcharts甩了js charts何止8条街！

　　这类的Js框架通常很容易学习。下载了包后，看例子就可以了，不过Highcharts在这点上做的是非常好！　

　　见：

　　Highcharts中文网首页：http://www.hcharts.cn/index.php

　　Highcharts官网：http://www.highcharts.com/

　　学习highcharts无需按照包下的examples例子一个个去试（我学js charts就是这么做的 !- -），

　　通过中文网提供的这3个页面，一个小时你就可以初步掌握这项技术！

　 Highcharts中文教程

　　Highcharts API文档

　　Highcharts 在线演示平台

　学习的重点就是这个在线演示平台啦，它包含了下载包中的所有示例文件。而且可以点击aaarticlea/png;base64,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" alt="" />页面中间的这个“编辑代码”可以跳转到一个“在线测试平台”的地方，像这里http://www.hcharts.cn/test/index.php?from=demo&p=10

　在线演示平台做的也非常详细，不过很多版块还在完善中。。。

　　highcharts学习的入口是什么呢，就是官网的这个图啦（这里从官网拿下来）：

Highcharts——让你的网页上图表画的飞起

　　这里是一个图表的所有属性。一目了然。

这里是官网上的一个简单的图表示例： Highcharts——让你的网页上图表画的飞起

这个示例是由下面的代码直接生成的。我简单注释了一下。代码位于Highlchar-4.0.3下，\Highcharts-4.0.3\examples\line-labels\index.html，直接打开即可。

<!DOCTYPE HTML>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title>Highcharts Example</title>

        <!--值得注意的是，Highcharts运行需要两个js文件，Highcharts.js及jQuery、MooTools 、Prototype 、
Highcharts Standalone Framework 中的一个框架文件。（抄自官网...）-->

        <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>

        <style type="text/css">

${demo.css}

        </style>

        <script type="text/javascript">

$(function () {

        $('#container').highcharts({

            chart: {    //图表总体的设置

                type: 'line'    //这个默认为line即折线图,还可以为柱状column，不过饼状图不是这里设置，而是直接在series数据列上指定 type: 'pie',

            },

            title: {    //图表标题

                text: 'Monthly Average Temperature' //标题名称

            },

            subtitle: { //副标题

                text: 'Source: WorldClimate.com'

            },

            xAxis: {    //x轴

                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']    //x轴数据

            },

            yAxis: {    //Y轴

                title: {

                    text: 'Temperature (째C)'    //y轴标题

                }

            },

            plotOptions: {                  //图表标示的各种选项

                line: {                     //这里由于是折线图，那么就是折线图的选项

                    dataLabels: {           //数据标签

                        enabled: true       //允许显示数据，默认为false，不显示具体数据

                    },

                    enableMouseTracking: false  //这个让鼠标放到数据点的时候，不动态显示一个小圆圈，默认为true

                }

            },

            series: [{  //这里省略了一个data数组的标示，更为方便，实际上下面的name和data都是属于data数组元素的属性，下面2组数据，就代表2组数据并列

                name: 'Tokyo',      //数据名

                data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]  //具体数据

            }, {

                name: 'London',

                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

            }]

        });

    });

        </script>

    </head>

    <body>

<script src="../../js/highcharts.js"></script>

<script src="../../js/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

    </body>

</html>

　　highcharts是一个简单的js图表框架，不建议仔细阅读API文档，建议根据示例和实际需求，一边添加功能，一边快速学习。

　　PS : 经斯克迪亚提醒，才发现，这个highchars中文网跟bootstrap中文网基本基于同样的主页样式，是一个今年刚毕业的学生创办的，实在年轻有为！跟highcharts官方（http://www.highcharts.com）的关系其实不大。不过作为非营利性的网站，是很不错了！bootstrap中文网其实也跟这个类似。个人猜测，这些中文网可能跟国外官网的关系都不大，只是国内热心的技术人员为了技术交流而自行创立的，网站内容基本是源于官网的。

转载请注明出处：http://www.cnblogs.com/zrtqsk/p/4013980.html 谢谢！

秒客网

Highcharts——让你的网页上图表画的飞起

相关文章