HighCharts入门 | 易学教程

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>

完成后的效果图：

Highcharts的入门演示：
https://www.highcharts.com.cn/demo/highcharts

来源：CSDN

作者：Cherry_Amy

链接：https://blog.csdn.net/Cherry_Amy/article/details/103830995

标签

Highcharts