码迷,mamicode.com
首页 > 其他好文 > 详细

Highcharts——大气好用的图标制作工具

时间:2014-10-11 20:30:26      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   io   os   ar   java   

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 在线演示平台

    学习的重点就是这个在线演示平台啦,它包含了下载包中的所有示例文件。而且可以点击bubuko.com,布布扣页面中间的这个“编辑代码”可以跳转到一个“在线测试平台”的地方,像这里http://www.hcharts.cn/test/index.php?from=demo&p=10

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

  highcharts学习的入口是什么呢,就是官网的这个图啦(这里从官网拿下来):

bubuko.com,布布扣

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

 

这里是官网上的一个简单的图表示例:bubuko.com,布布扣

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

bubuko.com,布布扣
<!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>
bubuko.com,布布扣

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

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

Highcharts——大气好用的图标制作工具

标签:des   style   blog   http   color   io   os   ar   java   

原文地址:http://www.cnblogs.com/Brainpan/p/4019390.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!