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属性设置最大刻度。
},
网友评论