用highcharts做网站图表，只要3步

2017-12-05 本文已影响11人胖兔123

WHY 为啥使用highcharts做图表？

免费
个人网站等非商业使用是免费的
功能稳定，强大
地图，股票等图表不在话下。
移动端友好
中文文档比较完善

官方文档：

开始吧，三步搞定

步骤一：引入hightchart.js

<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>

目前，hightchart不需要引入jQuery了。
可下载代码到自己服务器上引用。
highchart.js的引入要放在图表scripts代码的前面。

步骤二：创建div容器

在页面的 body 部分创建一个 div，且指定必须的属性（ID，高度和宽度等），代码如下

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

步骤三：配置scripts代码

在网站案例上稍作修改就好。
highcharts中文网站案例
 highcharts英文官网案例
英文官网案例比较新。
写在 <script>标签中，
下面是条形图的配置

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <div id="container" style="min-width:800px;height:400px"></div>
    <!--设置图表div-->
    <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>引入highcharts js
    <script> //配置图表数据
        var chart = new Highcharts.Chart('container', {// 图表初始化函数，其中container 为图表的容器 div的id               
        chart: {
               type: 'bar',                           //指定图表的类型，默认是折线图（line）
        },
        title: {
               text: '我的第一个图表',  //指定图表标题
        },
        xAxis: {
                categories: ['苹果', '香蕉', '橙子'],   //指定x轴分组
        },
        yAxis: {
                title: {
                        text: '个数',                 //指定y轴的标题
                },
                min:0, //指定y轴刻度从零开始
        },
        series: [{   //指定数据列
                name: '小明',   //数据列名
                data: [1, 0, 4],     //数据
        }, {
                name: '小红',
                data: [5, 7, 3],
        }]
        });
    </script>
</body>
</html>

效果如下图

无标题.png

其他

下载图片，需要引入exporting.js
在highchart.js之后引入

<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> 
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
<!--引入exporting.js，可以下载图表图片-->

y轴线刻度从零开始
默认y轴刻度开始值会自动调整。

yAxis: {  
            min: 0, // 设置y轴的开始刻度为0，可用max属性设置最大刻度。  
        },