HighCharts图表

最新推荐文章于 2023-02-16 20:53:29 发布

絮飘

最新推荐文章于 2023-02-16 20:53:29 发布

阅读量1.4k

点赞数

分类专栏： Javascript

Javascript 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

HighCharts初识

1、HighCharts是一款纯Javascript图表库，让开发者很容易在Web网站、Web应用中创建交互性的图表

Highcharts支持目前所有现在浏览器，包括IE6、iPhone/ipad。标准（W3C标准）的浏览器用SVG图形渲染，在遗留的IE浏览器中用VML绘图。

2、

Highcharts官网：http://www.highcharts.com
Highcharts官网Demo：http://www.highcharts.com/demo
Highcharts官网文档：http://www.highcharts.com/docs
Highcharts官网API：http://api.highcharts.com/highcharts

3、引用HighCharts很简单，仅仅需要引入highCharts的js文件，外加一个框架

本次学习，框架使用的是jQuery.js的框架

4、画出第一个简单的报表图形：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="highcharts.js"></script>
    </head>

    <body>
        <div id="container" style="width: 400">

        </div>

    </body>

    <script type="text/javascript">
        $(function(){
            $('#container').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'My Study HighCharts'
                },
                xAxis: {
                    categories: ['my', 'first', 'chart']
                },
                yAxis: {
                    title: {
                        text: 'sth'
                    }
                },
                series: [{
                    name: 'Jone',
                    data: [1, 0, 4]
                }, {
                    name: 'John',
                    data: [5, 7, 3]
                }]
            });
        });

    </script>
< /html>

效果如下：

若要自定义主题，可阅读相关样式设计的文档

详细分析，HighCharts的组成：

通常，HiighCharts包括这些部分：

标题(Title)，轴（Axis），数据列（Series），数据提示框（Tooltip），图例（Legend），导出功能按钮（Exporting），版权信息（Credits）等

a、Title：

标题。包括 Title 和 Subtitle ，即标题和副标题，其中副标题为非必须的。

title: {
    text: '自定义标题'
},
subtitle: {
    text: '自定义副标题'
}

动态修改Title：

通过HighCharts函数Chart.setTitle()

var chart = new Highcharts.Chart();   //Chart 构造方法
chart.setTitle("自定义标题");

获取Title的值：

var chart = new Highcharts.Chart();   //Chart 构造方法
alert(chart.title.text); 	      //直接通过属性获取值

标题可以设置为，一个链接地址，href属性即可：

因为HighCharts可以解析HTML内容

b、Axis：

轴。包括xAxis和yAxis，即x轴和y轴。多个不同的数据列可共用同一个X轴或Y轴，当然，还可以有两个X轴或Y轴，分别显示在图表的上下或左右。

图表具体的坐标轴组成部分：

很多情况下，我们会遇到需要横向图表的情况：

这个时候，需要将x，y轴进行对调，除了饼图，其他都是有X轴和Y轴的

默认情况下，x轴显示在图表的底部，y轴显示在左侧（多个y轴时可以是显示在左右两侧），通过设置chart.inverted = true 可以让x，y轴显示位置对调。

Axis Title:

坐标轴的标题：

xAxis:{
   title:{
       text:'x轴标题'
   }
}
yAxis:{
   title:{
       text:'y轴标题'
   }
}

Axis Labels

坐标轴的标签（分类），Labels常用属性有enabled、formatter、setp、staggerLines

1、enabled

是否启用Labels。x，y轴默认值都是true，如果想禁用（或不显示）Labels，设置该属性为false即可。

2、Formatter

标签格式化函数。默认实现是：

formatter:function(){
    return this.value;
}

this.value 代码坐标轴上当前点的值（也就是x轴当前点的x值，y轴上当前点的y值）

除了value变量外，还有axis、chart、isFirst、isLast可用。

yAxis: {        
    labels: {
        formatter:function(){
            if(this.value <=100) {
                return "第一等级("+this.value+")"; 
            }else if(this.value >100 && this.value <=200) {
                return "第二等级("+this.value+")"; 
            }else {
                return "第三等级("+this.value+")";
            }
        }
    }
},

效果为：

3、Step

Labels显示间隔，数据类型为number（或int）。下图说明了step的用法和作用

4、staggerLines

水平轴Lables显示行数。（该属性只对水平轴有效）当Lables内容过多时，可以通过该属性控制显示的行数。和该属性相关的还有maxStaggerLines属性。

Axis Tick

Tick为坐标轴刻度。默认情况下x轴刻度高(tickLength属性)为5px，宽为1px；y轴宽为0px(也就是不显示刻度)。Tick相关的属性主要有tickLength、tickWidth、tickColor、tickInterval、tickmarkPlacement。

1、tickLength、tickWidth、tickColor

分别代表刻度线的长度、宽度、颜色。

2、tickInterval

刻度间隔。其作用和Lables.step类似，就是不显示过多的x轴标签内容，不同的是，tickInterval是真正意义上的调整刻度，而Lables.step只是调整Labels显示间隔。所以在实际应用中，tickInterval用的多。

针对不同数据类型的坐标轴有不同的默认值。对于线性数据和Datetime类型数据，其默认值是tickPixelInterval值，对于Categorty表示间隔一个category。

3、tickmarkPlacement

刻度线对其方式，有between和on可选，默认是between。设置为on后的变化如下图：

Axis gridLines

坐标轴网格线。默认情况下，x轴网格线宽度为0,y轴网格线宽度为1px。网格线共有三个属性可设置，分别是:gridLineWidth、gridLineColor、gridLineDashStyle

1、gridLineWidth

网格线宽度。x轴默认为0，y轴默认为1px。

2、gridLineColor

网格线颜色。默认为：#C0C0C0。

3、gridLineDashStyle

网格线线条样式。和Css border-style类似，常用的有：Solid、Dot、Dash。

multiple Axis

多个轴。在Highcharts中，坐标可以是多个，最常见的是多个y轴。多轴存在时，Axis是一个数组，而在赋值时，通过Axis数组的下标与数据关联。如下图所示：

总结如下：

Series中设置每个轴值时，用轴数组下标关联。
设置opposite: true表示该轴位置反转，即为y轴时显示在右侧，为x轴时显示在顶部（和正常情况下x轴在下，y轴左构成反转）。
在Series中可以设置该轴的类型，多个轴不同的类型（例如：type:'spline'），就构成了多种图表并存的混合图。

坐标轴的类型：

坐标轴中，可以通过Type指定坐标轴类型，有linear、logarithmic、datetime、category可选，默认是：linear。指定类型的实例代码如下：

// The types are 'linear', 'logarithmic' and 'datetime'
yAxis: {
    type: 'linear',
}

// Categories are set by using an array
xAxis: {
    categories: ['Apples', 'Bananas', 'Oranges']
}

linear

线性轴。默认类型，x轴按照Axis.tickInterval值增长，y轴默认是自适应。

logarithmic

对数轴。按照数学中的对数增长，例如1,2,4,8... 用的不多，主要用于对数图表，实例请查看在线演示平台的对数直线图。

datetime

时间轴。时间使用和Javascript 日期对象一样，即用一个距1970年1月1日0时0分0秒的毫秒数表示时间，也就是时间戳。更多Javascript 日期对象请阅读W3C school 相关内容。

Highcharts有很多时间格式化函数，列举如下：

1、Date.getTime()

获取当前时间戳。实例用法如下：

time = Date.getTime();   //time = 1384442746960 (ms)  当前时间为 2013-11-14 23:25:46

2、Date.UTC(year,month,day,hours,minutes,seconds,millisec)

通过UTC方式获取指定时间的毫秒数，例如获取 2013-11-14 00:00:00的毫秒数代码如下：

time = Date.UTC(2013,11,14,0,0,0,0);  // time = 1386979200000 (ms);

3、Highcharts.dateFormat(String format)

Highcharts时间格式化函数，同 PHP格式化函数。具体用法参考API文档 Highcharts.dateFormat() ，当然，在本教程的《函数使用》章节中具体讲解。