jquery 图表插件highcharts & highstock

 Highcharts是纯JavaScript编写的图表库,提供了直观的、交互式图表,您的web站点或web应用程序。Highcharts目前支持线,花键、面积、areaspline、柱、栏、馅饼和散射图表类型。

 
Highstock允许您创建股票或一般的时间表图表在纯JavaScript,包括复杂的导航选项就像一个小导航仪系列,预定日期范围、日期选择器、滚动和淘金。

 

 

Read More：

所有参数api,    http://api.highcharts.com/highcharts

 

共有参数：（以   line-basic  为例）

 chart: {
                renderTo: 'container',      //作用div  ID
                type: 'line',                      //类型
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: 'Monthly Average Temperature',    //图表标题
                x: -20 //center
            },
            subtitle: {
                text: 'Source: WorldClimate.com',         //说明
                x: -20
            },
            xAxis: {         //X轴坐标值,所传的值一定要前端数组类型，因为后台传过来是文本型
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {     //Y轴
                title: {
                    text: 'Temperature (°C)'
                },
                plotLines: [{          //Y轴开始，宽度，颜色
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {                  //移到某个坐标点时提示内容
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y +'°C';
                }
            },
            legend: {
                layout: 'vertical',               //实体说明样式，当鼠标移到坐标点上时，出现坐标值，实体指下面的series的                                                             //name值
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },

 

          plotOptions: {        //是不是在图表上直接显示坐标具体值

                line: {

                    dataLabels: {

                        enabled: true      //true:显示     false:不显示

                    },

                    enableMouseTracking: false      //上面   legend  效果

                }

            },

            series: [{                  //实体,data的类型一定要是数组型，并且每一个数据内容为数值型， parseFloat(值)

//或parseInt(内容)
                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]
            }, {
                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]
            }, {
                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]
            }, {
                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]
            }]

 

 

兼容
它适用于所有现代浏览器包括iPhone / iPad和Internet Explorer从版本6。 标准的浏览器使用SVG图形渲染。在遗留Internet Explorer图形绘制VMLAlign使用

免费为非商业
你想要使用Highcharts对于一个个人网站,一个学校的网站或一个非盈利组织吗?然后你不需要作者的许可,就继续和使用Highcharts。对于商业网站和项目,查看许可证和定价。

开放
其中一个关键特性是,在Highcharts任何许可证,免费或没有,你可以下载源代码并使你自己的编辑。这允许个人修改和极大的灵活性。 

 

纯JavaScript
Highcharts完全基于本地浏览器技术,不需要客户端插件,比如Flash或Java。而且你不需要安装任何服务器上。没有PHP或ASP.NET。 Highcharts只需要两个JS文件运行:Highcharts。 js的核心,要么jQuery,MooTools或原型框架。 这些框架的一个最有可能已经在使用您的web页面。

 

大量图表类型
Highcharts支持线,花键、面积、areaspline、柱、栏、馅饼和散射图表类型。这些可以被合并到一个图表。

 

简单的配置语法
设置Highcharts配置选项不需要特殊的编程技能。给出的选项在一个JavaScript对象符号结构,这基本上是一组键和值由冒号连接,之间用逗号隔开并分组由花括号。

 

动态
通过一个完整的API,您可以添加、删除和修改系列和点轴或修改后的任何时间图表的创建。众多的事件钩子提供编程霍霍图表。结合jQuery,MooTools或原型的Ajax API,这将打开解决像实时图表不断更新与值从服务器,用户提供的数据和更多。

多个轴
有时你想比较变量的不完全相同的规模,例如温度和降雨和空气压力。Highcharts允许您指定一个y轴为每个系列——或者一个x轴如果你想比较数据集的不同类别。每个轴可以放置向左或向右,顶部或底部的图表。所有的选项都可以单独设置,包括换向、样式和位置。

 

工具提示标签
在悬停图表Highcharts可以显示一个工具提示文本信息在每个点和系列。工具提示是作为用户将鼠标图,并已采取努力使其粘附到最近的点以及使它容易读一个点,低于另一个点。

 

Datetime轴
75%的图表用X和Y轴有一个日期-时间X轴。因此Highchart非常聪明的关于时间值。用毫秒轴单位,决定将,这样Highcharts总是本月初或一周,午夜到中午的时候,整个小时等。

 

打印
与exporting module起用,您的用户可以导出图表,PNG,JPG,PDF或SVG格式点击一个按钮,或打印图表直接从web页面。

 

缩放
通过放大图表您可以检查一个特别有趣的部分数据更密切。缩放可以在X或Y维度,或两者兼而有之。

 

外部数据加载
Highcharts需要数据在一个JavaScript数组,可以定义在本地配置对象,在一个单独的文件或者甚至在不同的网站。此外,数据可以处理到Highcharts在任何形式,和一个回调函数用来解析数据到一个数组中。

 

倒图表或逆转轴
有时你需要翻你的图表,让X轴出现垂直,比如说在一个条形图。扭转轴,具有最高价值出现离起点,支持。

 

文本旋转为标签
所有的文本标签,包括轴标签、数据标签点和轴冠军,在任何角度都可以旋转。

 

 

 

简捷版：

http://www.scriptlover.com/controls/highcharts/index.htm  （不包括：Highstock）

 

 

全英文版：

http://www.highcharts.com/

 

所有参数api:

 http://api.highcharts.com/highcharts

 

如果只是做一些简单的统计图表，建议查看简捷版，直观明了。但全英文版包括Highstock