快速了解上手Highcharts

小刘不吃肉肉

于 2020-07-23 10:08:24 发布

阅读量186

点赞数

分类专栏：框架文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_45099578/article/details/107247090

版权

框架专栏收录该内容

6 篇文章 0 订阅

订阅专栏

产品介绍

Highcharts系列软件包含 Highcharts JS,Highstock JS,Highmaps JS 共三款软件，均为纯Javascript编写得HTML5图标库。

Highcharts
概念：Highcharts是一个用纯 Javascript编写的一个图标库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表。（直线图，曲线图，区域图，柱状图，饼状图，散状点图，仪表图，旗袍图，瀑布流图等多达20多种图表，其中很多图表可以集成在同一个图行中形成混合图）

获取Highcharts:

通过官网下载页面获取资源包，资源包包含所有相关文件的源码代码及压缩版本，丰富的示例及使用说明文档，关于下载包的详细文件说明参考资源包下载及使用
通过npm , bower等第三方包管理工具下载

引入Highcharts

Highcharts最基本得运行只需要一个JS文件，已使用CDN文件为例，对应的代码是：
<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>

创建一个简单的图表
1.在绘图前我们需要为Highcharts准备一个DOM容器，并指定其大小。

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

然后通过Highcharts的初始化函数，Highcharts来创建图表，该函数接受两个参数，第一个参数是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>

小刘不吃肉肉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
快速了解上手Highcharts

产品介绍Highcharts系列软件包含 Highcharts JS,Highstock JS,Highmaps JS 共三款软件，均为纯Javascript编写得HTML5图标库。Highcharts概念：Highcharts是一个用纯 Javascript编写的一个图标库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表。（直线图，曲线图，区域图，柱状图，饼状图，散状点图，仪表图，旗袍图，瀑布流图等多达20多种图表，其中很多图表可以集成在同一个图行中形成混合图）获取Hig
复制链接

扫一扫