HighCharts入门

最新推荐文章于 2025-08-30 10:51:20 发布

原创最新推荐文章于 2025-08-30 10:51:20 发布 · 333 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#js #html #javascript

HighCharts是一款基于JavaScript的图表库，提供多种类型的图表，如柱状图、饼图等。它以其功能强大、易用性和开源免费等特点受到广泛应用。在开始使用前，需要熟悉HTML、jQuery和Ajax等前端知识，以及至少一种后台语言。本文将介绍HighCharts的API文档、入门准备及提供一个简单的入门示例。

Highcharts摘要

HighCharts是一款纯javascript编写的图表库，是目前最为流行的图表插件,应用范围广泛，
目前支持直线图、曲线图、面积图、曲线面积图、面积范围图、曲线面积范围图、柱状图、柱状范围图、条形图、饼图、散点图、箱线图、气泡图、误差线图、漏斗图、仪表图、瀑布图、雷达图，共18种类型图表。由于其功能强大、简单易用、开源免费等优点，在之前工作技术选型的时候，果断的选择了他。

Highcharts API文档

https://api.highcharts.com.cn/highcharts

入门准备

熟悉Html、jQuery、Json、Ajax等前端知识
至少会一种后台语言，例如 Php、Java、Asp.net、Nodejs 等（Highcharts只是做数据展现，
具体的数据来源必须通过动态语言

Highcharts入门小示例：

引入在线资源
在页面的head标签里引入在线资源1.8.3.min.js和highcharts.js, 代码如下:

 <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>　
 
 <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>

创建div容器
在页面的 body 部分创建一个div，并指定div 的 id，高度和宽度，代码如下：

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

编写Highcharts代码
编写Highcharts必须的代码，在body部分，用 script 标签包裹，代码可以放在页面的任意地方，一个最简单的图表实例代码下：

 <script>
        $(function () {
            $('#container').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: '我的第一个图表'
                },
                xAxis: {
                    categories: ['苹果', '香蕉', '橙子']   //指定x轴分组
                },
                yAxis: {
                    title: {
                        text: '数量'
                    }
                },
                series: [{                                //指定数据列
                    name: '小明',                          //数据列名
                    data: [1, 2, 4]                        //数据
                }, {
                    name: '小红',
                    data: [5, 7, 3]
                }]
            });
        });
    </script>