快速上手highcharts

最新推荐文章于 2023-01-28 13:59:15 发布

super欣

最新推荐文章于 2023-01-28 13:59:15 发布

阅读量1k

点赞数 2

文章标签： jquery html javascript

本文链接：https://blog.csdn.net/qq_44514860/article/details/120071762

版权

快速上手

引入 Highcharts

Highcharts 最基本的运行只需要一个 JS 文件，即 highcharts.js，以使用 CDN 文件为例，对应的代码是：

<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>

创建一个简单的图表

在绘图前我们需要为 Highcharts 准备一个 DOM 容器，并指定其大小

<div id="container" style="width: 600px;height:400px;"></div>

然后通过 Highcharts 的初始化函数Highcharts.chart来创建图表
该函数接受两个参数，第一个参数是 DOM 容器的 Id，第二个参数是图表配置，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 Highcharts 图表</title>
</head>
<body>
    <!-- 图表容器 DOM -->
    <div id="container" style="width: 600px;height:400px;"></div>
    <!-- 引入 highcharts.js -->
    <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script>
        // 图表配置
        var options = {
            chart: {
                type: 'bar'                          //指定图表的类型，默认是折线图（line）
            },
            title: {
                text: '我的第一个图表'                 // 标题
            },
            xAxis: {
                categories: ['苹果', '香蕉', '橙子']   // x 轴分类
            },
            yAxis: {
                title: {
                    text: '吃水果个数'                // y 轴标题
                }
            },
            series: [{                              // 数据列
                name: '小明',                        // 数据列名
                data: [1, 0, 4]                     // 数据
            }, {
                name: '小红',
                data: [5, 7, 3]
            }]
        };
        // 图表初始化函数
        var chart = Highcharts.chart('container', options);
    </script>
</body>
</html>

图表配置

图表容器

Highcharts 实例化中绑定容器的方式有很多种方式，这里列举两种：

通过构造函数

var charts = Highcharts.chart('container', {
  // Highcharts 配置
});

如果你的页面已经引入了 jQuery，那么还可以 jQuery 插件的形式调用
```
$("#container").highcharts({
    // Highcharts 配置  
}); 
```

图表样式

宽度、高度

如果容器没有设定宽高，默认是宽 400px，高 400px，
另外设置容器的 min-width属性可以让 highcharts 自适应宽度，实例：

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

图表样式

图表样式属性包括 border、backgroundColor、margin、spacing、style等
边框：包括 borderColor、borderRadius、borderWidth
背景：包括 backgroundColor
外边距：包括 margin、marginTop、marginRight、marginBottom、marginLeft
内边距：包括 spacing、spacingTop、spacingRight、spacingBottom、spacingLeft
其他样式：其他属性例如字体等属性，实例代码

示例代码：

chart: {
    style: {
        fontFamily: "",
        fontSize: '12px',
        fontWeight: 'bold',
        color: '#006cee'
    }
}

其他配置

图表类型

通过 chart.type来指定图表类型，表示如果默认图表类型
如果 series 中没有指定 type，那么图表的类型就由该属性来确定。highcharts 支持的所有图表类型见 plotOptions。

图表缩放

图表缩放包括缩放（zoom）和平移（pan），对应的属性有：

zoomType ：缩放类型，值可以是“x”、“y”、“xy”，分别表示水平缩放、竖直缩放、平面缩放
缩放恢复按钮：可以指定按钮的样式、位置等，见resetZoomButton，按钮的文字可以通过 lang中的属性来指定
panKey：平移键，默认是“Shift”，即在启用平移后，按住指定的按键即可对图表进行平移操作
panning ：是否启用平移，启用平移后，按住平移键，然后就可以用鼠标对图表进行平移操作（即平移操作是平移键加鼠标拖动）

其他

图表反转：图表反转指的是将图表的 x轴和 y轴进行对调操作，对应的只需要设置chart.inverted = true即可。

图标主要组成及配置

Highcharts 基本组成部分如下图所示：
在这里插入图片描述

标题（Title）

标题默认显示在图表的顶部，包括标题和副标题（subTitle）
其中副标题是非必须的。设置标题和副标题的示例代码如下：

title: {
    text: '我是标题'
},
subtitle: {
    text: '我是副标题'
}

标题的常用属性

标题只有一些文字信息，所以标题的配置无非是一些定位、字体大小、颜色等的配置，常见属性如下表所示：

属性名	描述	默认值
text	标题的文字	“Chart title”
align	文字水平对齐方式，有left、center、right可选	“center”
verticalAlign	文字垂直对齐方式，有top、middle、bottom可选	“”
useHTML	是否解析html标签，设置解析后，可以使用例如a等html标签	false
floating	是否浮动，设置浮动后，标题将不占用图表区位置	false
margin	标题和图表区的间隔，当有副标题时，表示标题和副标题之间的间隔	15
style	文字样式，可以设置文字颜色、字体、字号，注意和css有略微的不同，例如font-size用fontSize、font-family用fontFamily表示
x	相对于水平对齐的偏移量，可以是负数，单位是px	0
y	相对于垂直对齐的偏移量，可以使负数，单位是px	0

动态设置和获取标题

获取标题内容：可以通过Highcharts对象获取标题内容，实例代码如下

var chart = Highcharts.chart(el, options);    // Highcharts构造函数
var title  = chart.title.textStr;             // 通过chart对象获取标题内容

动态设置标题：Highcharts 提供了 setTitle()函数供动态设置标题用
```
setTitle (Object title, object subtitle, Boolean redraw)
```
参数说明：
- title : 标题对象
- subtitle: 副标题对象
- redraw：是否重绘，即设置标题后是否重新绘制图表，默认是false
  实例说明：
```
var title = {
    text:"我是新标题",
    style:{
        color:"#ff0000"
    }
};

chart.setTitle(title);
```
上述方法不仅仅是设置标题的文字，有的时候我们可能只需要更改标题的样式，例如颜色、字号的，也可以通过该函数实现，示例代码如下
```
var subtitle = {
    style:{
        color:"#000",
        fontWeight:"bold"
    }
};

chart.setTitle(null, subtitle);     //设置副标题，第一个参数设置为null
```

坐标轴（Axis）

笛卡尔图表（普通的二维数据图）都有X轴和Y轴，默认情况下，x轴显示在图表的底部，y轴显示在左侧（多个y轴时可以是显示在左右两侧），通过设置chart.inverted = true可以让x，y轴显示位置对调。下图为图表中坐标轴组成部分
在这里插入图片描述

坐标轴标题

坐标轴标题。默认情况下，x轴为null（也就是没有title），y轴为'Value'，设置坐标轴标题的代码如下：

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

坐标轴刻度标签

坐标轴标签（分类）。Labels常用属性有enabled、formatter、step、staggerLines

属性	作用
enabled	是否启用Labels。x，y轴默认值都是true，如果想禁用（或不显示）Labels，设置该属性为false即可。
formatter	this.value代码坐标轴上当前点的值（也就是x轴当前点的x值，y轴上当前点的y值），除了value变量外，还有axis、chart、isFirst、isLast可用。
step	Labels显示间隔，数据类型为number（或int）。
staggerLines	水平轴 Labels 显示行数。（该属性只对水平轴有效）当 Labels 内容过多时，可以通过该属性控制显示的行数。和该属性相关的还有maxStaggerLines属性。

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+")";
      }
    }
  }
}

坐标轴网格线

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

属性	作用
gridLineWidth	网格线宽度。x轴默认为0，y轴默认为1px。
gridLineColor	网格线颜色。默认为：#C0C0C0。
gridLineDashStyle	网格线线条样式。和Css border-style类似，常用的有：Solid、Dot、Dash。

多轴

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

数据列（Series）

数据列是一组数据集合，例如一条线，一组柱形等。图表中所有点的数据都来自数据列对象，数据列的基本构造是：

series : [{
    name : '',
    data : []
}]

提示：数据列配置是个数组，也就是数据配置可以包含多个数据列。
数据列中的name代表数据列的名字，并且会显示在数据提示框（Tooltip）及图例（Legend）中。

数据列中的数据

在数据列的 data属性中，我们可以定义图表的数据数组，通常有三种定义方式：

数值数组。在这种情况下，配置数组中的数值代表 Y 值，X 值则根据 X 轴的配置
要么自动计算，要么从 0 起自增，或者是根据pointStart及pointInterval自增；
在分类轴中， X 值就是 categoies 配置，数值数组配置实例如下：
```
data : [1, 4, 6, 9, 10] 
```
包含两个值的数组集合。在这种情况下，集合中数组的第一个值代表 X，第二个值代表 Y；
如果第一个值是字符串，则代表该点的名字，并且 X 值会如 1 中所说的情况决定。
数组集合的实例：
```
data ： [ [5, 2], [6,3], [8,2] ]
```
数据点对象集合。在这种情况下，集合中元素都是数据点对象，对象中可以配置数据见 plotOptions.series 或 plotOptions.{图表类型} 所列。配置实例：
```
data : [{
    name : "point 1",
    color : "#00ff00",
    y : 0
}, {
    name : "Point 2",
    color : "#ff00ff",
    y : 5
}] 
```

数据点及标记

在直角坐标图（即常规的包含X、Y轴的图表）中，数据点相当于图表中的一个（x,y）点。数据点的配置可以在数据列中是数据数组里指定。
对于其他类型的图表（非直角坐标图），数据点不仅仅表示 X，Y值，例如在范围图中，数据点包含 x，low， high值；
在 OHLC （蜡烛柱状图）中，数据点包含 x，open ， high， low， close；在饼图或仪表图中，数据点只表示一个值。

数据点配置适用所有图表，下面的例子说明了如何指定某个点的颜色：

series : [{
    data : [ 29,9, 71.5, 106.4, 
    {
        y : 200,
        color : "#BF0B23"
    }, 194.1 , 20 ]
}]

在直线图、曲线图、面积图及面积范围图中可以为数据点指定标记，可以是某种形状，图片等，实例：

series : [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6,148.5,
    {
      y: 216.4, 
      marker: { 
          fillColor: '#BF0B23',
          radius: 10 
      }
    }, 194.1, 95.6, 54.4]
}]

数据列配置

数据列共有三个级别的配置，权重从低到高依次如下：

配置在 plotOptions.series 中：对应的 API 为：plotOptions.series 中，针对所有类型图表有效，一般是通用配置。
配置在 plotOptions.{图表类型} 中：对应的 API 为： plotOptions 下的指定图表类型，针对当前类型图表有效，一般是某一种图表的通用配置。
配置在 series 中：对应的 API 为：series，针对当前数据列有效

数据提示框（Tooltip）

当鼠标悬停在某点上时，以框的形式提示该点的数据，比如该点的值、数据单位等。数据提示框内提示的信息完全可以通过格式化函数动态指定。

图例（Legend）

图例是图表中用不同形状、颜色、文字等标示不同数据列，通过点击标示可以显示或隐藏该数据列。

版权标签（Credits）

显示在图表右下方的包含链接的文字，默认是Highcharts官网地址。通过指定credits.enabled=false即可不显示该信息。

导出功能（Exporting）

通过引入 exporting.js即可增加图表导出为常见文件功能。

标示线（PlotLines）

可以在图表上增加一条标示线，比如平均值线，最高值线等。

标示区（PlotBands）

可以在图表添加不同颜色的区域带，标示出明显的范围区域。

super欣

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
2
评论
快速上手highcharts

引入 HighchartsHighcharts 最基本的运行只需要一个 JS 文件，即 highcharts.js，以使用 CDN 文件为例，对应的代码是：创建一个简单的图表在绘图前我们需要为 Highcharts 准备一个 DOM 容器，并指定其大小然后通过 Highcharts 的初始化函数 Highcharts.chart 来创建图表，该函数接受两个参数，第一个参数是 DOM 容器的 Id，第二个参数是图表配置，代码如下：第一个 Highcharts 图表
复制链接

扫一扫