图表插件——Highcharts插件的使用（一柱状图）

标签：

1.下载Highcharts插件

官方下载网址：http://www.highcharts.com/download

2.引入需要的js文件

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/Highcharts-4.2.5/js/highcharts.js"></script>

3.创建div容器

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

4.编写Highcharts代码

<script type="text/javascript">
$(function () {
$(‘#container‘).highcharts({ //图表展示容器，与div的id一致
chart: {
type: ‘column‘ //指定图表的类型，默认是折线图(line)
},
title: {
text: ‘网址访问量统计‘ //指定图表标题
},
xAxis: {
categories: [‘最高日访问量‘, ‘评价日访问量‘, ‘最低日访问量‘] //指定x轴分组
},
yAxis: {
title: {
text: ‘访问=人数(千万)‘ //指定y轴的标题
}
},
series: [{ //指定数据列
name: ‘2015‘, //数据列名
data: [1, 0, 4] //数据
}, {
name: ‘2016‘,
data: [5, 7, 3]
}]
})
});
</script>

图表插件——Highcharts插件的使用（一柱状图）

标签：

原文地址：http://www.cnblogs.com/mfc-itblog/p/5497490.html