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. Java基础知识强化之IO流笔记57:数据输入输出流(操作基本数据类型)

    1. 数据输入输出流(操作基本数据类型) (1)数据输入流:DataInputStream DataInputStream(InputStream in) (2)数据输出流:DataOutputStr ...

  2. 一个现代化的JSON库Moshi针对Android和Java

    Moshi 是一个现代化的JSON库针对Android和Java.它可以很容易地解析JSON成Java对象: String json = ...; Moshi moshi = new Moshi.Bu ...

  3. YII中文件上传

    文件上传 1.视图文件代码 <?php $form = $this->beginWidget("CActiveForm",array( "action&quo ...

  4. mysql中 的 ENGINE = innodb; 是什么意思?

    存储引擎是innodb.nnoDB 是 MySQL 上第一个提供外键约束的数据存储引擎,除了提供事务处理外,InnoDB 还支持行锁,提供和 Oracle 一样的一致性的不加锁读取,能增加并发读的用户 ...

  5. json 转对象

    架包: import com.alibaba.fastjson.JSON; String arryStr="[{\"Name\": \"A\", \& ...

  6. Solr使用初探——Solr的安装环境与配置

    Solr是一个apache名下很好用的开源索引.搜索工具,网上的资料虽多但很杂,笔者花了一天的时间对Solr进行了较为初步的研究,对Solr的基础应用做了一定的总结.文中涉及到的配置方法并不唯一,AP ...

  7. jeesite 经常出现java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderL解决思路

    本来jeesite是用的maven,但是我开发的项目用这个框架没用maven, 经常报这个错,我能用的办法就是将springmvc—web.jar包删掉,然后重新添加

  8. java之泛型潜在错误

    如果使用带泛型声明的类时,没有传入类型参数,那么这个类型参数默认是声明该参数时指定的第一个上限类型,这个类型参数被称为raw type(原始类型 ). eg:     public class Lis ...

  9. Git for Windows

    本篇文章由:http://www.sollyu.com/git-for-windows/ 说明 Git是用于Linux内核开发的版本控制工具.与CVS.Subversion一类的集中式版本控制工具不同 ...

  10. Java面向对象程序设计--与C++对比说明:系列3(Java 继承机制)

    继承(inheritance)背后的核心思想是:       bonus = b;    }      } Java没有像C++那样提供多继承机制,但提供了接口机制,在后面我们将详细探究接口机制的实现 ...