首先当然是下载组件啦..... 因为我觉得简介就没必要了,时下最好用的chart组件有空我也会介绍一下
附一个官网给那些英文999的童鞋--------http://www.highcharts.com/
不bb了,现在官方提供了三种把highcharts down下来的方式,
第一种当然是最简单粗暴的下载喽,官方提供了很多链接
- 中文网下载中心:http://www.hcharts.cn/product/download.php
- 官方下载:http://www.highcharts.com/download
- Github开源项目:https://github.com/highslide-software/highcharts.com
- 中文网开放CDN:http://cdn.hcharts.cn
- 官方 CDN 服务:http://code.highcharts.com
哈哈,这么多链接,down不下来那真的是有鬼了,,,,,,
当然,作为有逼格的前端,我们肯定不能就这么来,对吧,那么我们用npm,咳咳,我这边用的是cnpm
cnpm install highcharts --save
还有就是bower,也是一样滴
bower install highcharts --save
好了,接下来就是大家都熟悉的hello world啦
有一点要注意的是highcharts是有组件依赖的,所以我这里用的就是用的最多的jquery
<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
OK,接下来创建容器
<div id="container" style="min-width:800px;height:400px"></div>
然后就是highcharts代码,ps:放在页面的任何地方都可以哦..
<script>
$(function () {
$('#container').highcharts({ //图表展示容器,与div的id保持一致
chart: {
type: 'column' //指定图表的类型,默认是折线图(line)
},
title: {
text: 'My first Highcharts chart' //指定图表标题
},
xAxis: {
categories: ['my', 'first', 'chart'] //指定x轴分组
},
yAxis: {
title: {
text: 'something' //指定y轴的标题
}
},
series: [{ //指定数据列
name: 'Jane', //数据列名
data: [1, 0, 4] //数据
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
好啦,这样出来就是一个最简单的柱状图,至于其他的图嘛,就可以慢慢来研究喽