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插件的使用(一柱状图)的更多相关文章

  1. 图表插件Highcharts的动态化赋值,实现图表数据的动态化设置显示

    在很早之前就介绍过图表插件Highcharts的使用了,在2014年的随笔<基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts>,这里基本上都介绍 ...

  2. jQuery插件Highcharts

    Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用. ...

  3. 数据统计表插件,highcharts插件的简单应用

    highcharts插件的简单应用,非常全能好用的一个数据统计表插件. $(function () { $('#container').highcharts({ chart:{ type:" ...

  4. JS图表组件 highcharts 简单的介绍

    把highcharts拿来做个简单的介绍,希望更多的朋友可以用到这个用来做图表的js插件. preparation Highcharts Highcharts是一个制作图表的纯Javascript类库 ...

  5. 数据的图表统计highcharts

    数据统计常用的图表一般是饼状图.柱状图.线状图,HighCharts可以很好的实现. HighCharts highcharts是基于jquery的一个功能强大的插件,使用时先导入jquery.js ...

  6. Qt中如何 编写插件 加载插件 卸载插件

    Qt中如何 编写插件 加载插件 卸载插件是本文要介绍的内容.Qt提供了一个类QPluginLoader来加载静态库和动态库,在Qt中,Qt把动态库和静态库都看成是一个插件,使用QPluginLoade ...

  7. 转 jquery插件--241个jquery插件—jquery插件大全

    241个jquery插件—jquery插件大全 jquery插件jqueryautocompleteajaxjavascriptcoldfusion jQuery由美国人John Resig创建,至今 ...

  8. Vim插件之插件管理器Vundle

    Vim插件之插件管理器Vundle 1.介绍下载 相比Sublime.Text2等现代编辑器,Vim缺乏默认的插件管理器,所有插件的文件都散布在~/.vim下的几个文件夹中,配置Vim的过程, 就是在 ...

  9. Android图表库MPAndroidChart(十三)——简约的底部柱状图

    Android图表库MPAndroidChart(十三)--简约的底部柱状图 我们继续上一讲,今天还是说下柱状图,这个图的话应该是用的比较多的,所有拿出来溜溜,先看下效果 我们还是来看下基本实现 一. ...

随机推荐

  1. select组件

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. Netbeans7.0完美中文+Consolas字体显示配置(亲测可用)

    最近把开发环境从Eclipse迁移到了Netbeans上面.因为Netbeans已经相当优秀,速度快功能也不必Eclipse差,但是一只有 一个问题一直让我对eclipse非常纠结:如果把字体选择为C ...

  3. Java对象与Json之间的转换

    使用Jackson的ObjectMapper对象的readValue和writeValueAsString方法可以进行转换. 对于简单基本类型或String类型的对象,使用上述方法可以满足. 但是如果 ...

  4. Zepto源码解读

    /*******************************************************************************Zepto核心和dom操作******* ...

  5. 20151216JqueryUI---dialog代码备份

    $(function () { $('#search_button').button(); /*$('#reg').dialog({ focus:function(e,ui){ alert('注册') ...

  6. ajax跨域访问 java controller 和 cxf(webservice) 配置方式(CORS)

    1. controller跨域访问,配置方式 重点在这里: <mvc:cors> <mvc:mapping path="/*" allowed-origins=& ...

  7. 基于注解整合struts2与spring的时候如果不引入struts2-spring-plugin包自动装配无效

    基于注解整合struts2与spring的时候如果不引入struts2-spring-plugin包,自动装配将无效,需要spring注入的对象使用时将抛出空指针异常(NullPointerExcep ...

  8. struts2 I18n问题 国际化

    java国际化 1.了解缺省Locale是由操作系统决定的,Locale是由语言和国家代码组成 2.国际化资源文件是由baseName+locale组成,如:MessageBundle_en_US.p ...

  9. 解决读写properties属性文件

    package com.kzkj.wx.utils; import java.io.BufferedReader; import java.io.File; import java.io.FileIn ...

  10. EF 存储过程(上)

    目前,EF对存储过程的支持并不完善.存在以下问题:> EF不支持存储过程返回多表联合查询的结果集.> EF仅支持返回某个表的全部字段,以便转换成对应的实体.无法支持返回部分字段的情况.&g ...