Highcharts快速使用指南

最新推荐文章于 2021-07-21 15:26:19 发布

. . . . .

最新推荐文章于 2021-07-21 15:26:19 发布

阅读量558

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/yexudengzhidao/article/details/103611125

版权

前端开发专栏收录该内容

350 篇文章 19 订阅

订阅专栏

一. 产品简介：

Highcharts 系列软件包含 Highcharts JS，Highstock JS，Highmaps JS 共三款软件，均为纯 JavaScript 编写的 HTML5 图表库，全部源码开放，个人及非商业用途可以任意使用及源代码编辑。

1. Highcharts

Highcharts 是一个用纯 JavaScript 编写的一个图表库，图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。

2. Highstock

Highstock 是用纯 JavaScript 编写的股票图表控件，可以开发股票走势或大数据量的时间轴图表。它包含多个高级导航组件：预设置数据时间范围，日期选择器、滚动条、平移、缩放功能。

3. Highmaps

Highmaps 是一款基于 HTML5 的优秀地图组件。Highmaps 继承了 Highcharts 简单易用的特性，利用它可以方便快捷的创建用于展现销售、选举结果等其他与地理位置关系密切的交互性地图图表。Highmaps 可以单独使用，也可以作为 Highcharts 的一个组件来使用。

二. 快速使用:

Highcharts 最基本的运行只需要一个 JS 文件，即 highcharts.js，在绘图前我们需要为 Highcharts 准备一个 DOM 容器，并指定其大小。然后通过 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 是通过 JavaScript 对象的形式（JSON）来定义图表的配置参数。

当使用图表构造函数 Highcharts.Chart 来初始化图表时，图表的配置对象是以第二个参数传递给该构造函数的。

说到图表，我们来想一下图表应该有哪些配置呢？

3.1 全局配置

全局配置是针对同一个页面多个图表有效的配置，我们将多个图表的相同配置提取出来并配置在全局配置中（这样就可以省去在每个图表中配置一样的参数，这也是 Highcharts API 灵活性的表现）。

四. Highcharts 兼容性(理解他们这种思想，可以减少代码体积)

Highcharts 7 在 Highcharts 6 的基础上进一步将低版本浏览器相关函数的兼容包独立成一个文件，即 oldie-polyfills.js

从 Highcharts 6.0.0 开始，我们将兼容低版本 IE 的代码单独成一个模块文件，这样用户可以根据需求是否加载对应的文件，可以减少在主流浏览器上加载代码的大小，推荐以下面形式加载这个文件：

<script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js">
<!-- 其他 Highcharts 需要的文件 -->

<!--[if lt IE 9]>
<script src="https://cdn.highcharts.com.cn/highcharts/modules/oldie.js"></script>
<![endif]-->

. . . . .

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
Highcharts快速使用指南

一. 产品简介：Highcharts 系列软件包含 Highcharts JS，Highstock JS，Highmaps JS 共三款软件，均为纯 JavaScript 编写的 HTML5 图表库，全部源码开放，个人及非商业用途可以任意使用及源代码编辑。1. HighchartsHighcharts 是一个用纯 JavaScript 编写的一个图表库，图表类型有直线图、曲线图、区域图、柱状...
复制链接

扫一扫