HighCharts学习笔记(一)HighCharts入门

一、HighCharts简介

Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

 

二、ighCharts的主要特性包括:[1]

1.兼容性:HighCharts采用纯JavaScript编写,兼容当今大部分的浏览器,包括Safari、IE和火狐等等;

2.图表类型:HighCharts支持图表类型,包括曲线图、区域图、柱状图、饼状图、散状点图和综合图表等等,可以满足各种需求。

3.不受语言约束:HighCharts可以在大多数的WEB开发中使用,并且对个人用户免费,支持ASP,PHP,JAVA,.NET等多种语言中使用。

4.提示功能:HighCharts生成的图表中,可以设置在数据点上显示提示效果,即将鼠标移动到某个数据点上,可以显示该点的详细数据,并且可以对显示效果进行设置。

5.放大功能:HighCharts可以大量数据集中显示,并且可以放大某一部分的图形,将图表的精度增大,进行详细的显示,可以选择横向或者纵向放大。

6.时间轴:可以精确到毫秒。

三、Highcharts 基本组成

四、HighCharts整体结构:

通过查看API文档我们知道HighCharts结构如下:(API文档在文章后面提供下载)

var chart = new Highcharts.Chart({

       chart: {…}             // 配置chart图表区

       colors: [{…}]         // 配置主体显示颜色(多个线条和柱体的颜色顺序的)

       credits: {…}          // 配置右下角版权链接

       exporting: {…}        // 配置导出及打印

       global: {…}           // Highcharts.SetOptions方法调用

       labels: {…}           // HTML标签,可以放置在绘图的任何位置

       lang: {…}             // 语言对象属性配置

       legend: {…}           // 配置图例选项

       loading: {…}          // 配置图表加载选项

       navigation: {…}       // 配置导出按钮属性

       pane: {…}             // 仅适用于极性图表和角仪表

       plotOptions: {…}      // 配置数据点选项

       series: [{…}]        // 配置数据列选项

       subtitle: {…}         // 配置副标题

       title: {…}            // 配置标题

       tooltip: {…}          // 配置数据点提示框

       xAxis: {…}            // 配置x轴选项

       yAxis: {…}            // 配置y轴选项

})

五、HighCharts 实例

HtmlCode:

 

 

 

 

 

 

JavaScript Code

$(function () {

    $(‘#container’).highcharts({

        title: {

            text: ‘Monthly Average Temperature’,

            x: -20 //center

        },

        subtitle: {

            text: ‘Source: WorldClimate.com’,

            x: -20

        },

        xAxis: {

            categories: [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’,’Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’]

        },

        yAxis: {

            title: {

                text: ‘Temperature (°C)’

            },

            plotLines: [{

                value: 0,

                width: 1,

                color: ‘#808080’

            }]

        },

        tooltip: {

            valueSuffix: ‘°C’

        },

        legend: {

            layout: ‘vertical’,

            align: ‘right’,

            verticalAlign: ‘middle’,

            borderWidth: 0

        },

        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]

        }, {

            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]

        }]

    });

});

                           

六、HighCharts相关资料

1.下载地址:http://www.hcharts.cn/product/download.php

2.API文档:http://www.hcharts.cn/api/index.php

发表评论

电子邮件地址不会被公开。