如何使用Highcharts做图形处理

最新推荐文章于 2024-07-12 16:27:40 发布

baby_Xiao

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量661

点赞数 3

文章标签： javascript java 大数据 intellij idea

本文链接：https://blog.csdn.net/baby_Xiao/article/details/103831745

版权

使用Highcharts做图形处理

Highcharts介绍

Highcharts 是一个用纯 JavaScript 编写的一个图表库，能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。
Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。

Highcharts优点

兼容性、非商业使用免费、开源、纯 JavaScript、丰富的图表类型、简单的配置语法、动态交互性、支持多坐标轴、数据提示框、方便加载外部数据等等

Highcharts获取

直接引用我提供的CDN服务，无需下载，高速稳定
通过官网下载页面获取资源包，资源包包含所有相关文件的源代码及压缩版本，丰富的实例及使用说明文档，关于下载包的详细文件说明请参考资源包下载及使用
通过Npm ， Bower 等第三方包管理工具下载

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>

这样你的第一个图表就诞生了！
在这里插入图片描述

不懂什么意思的可以看看代码注释，或者去看官网api

注：想要具体了解Highcharts的具体信息，可以点击下面的链接去了解一下
Highcharts官网api

baby_Xiao

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
如何使用Highcharts做图形处理

使用Highcharts做图形处理Highcharts介绍Highcharts 是一个用纯 JavaScript 编写的一个图表库，能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，...
复制链接

扫一扫