图表插件——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插件的使用(一柱状图)的更多相关文章
- 图表插件Highcharts的动态化赋值,实现图表数据的动态化设置显示
在很早之前就介绍过图表插件Highcharts的使用了,在2014年的随笔<基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts>,这里基本上都介绍 ...
- jQuery插件Highcharts
Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用. ...
- 数据统计表插件,highcharts插件的简单应用
highcharts插件的简单应用,非常全能好用的一个数据统计表插件. $(function () { $('#container').highcharts({ chart:{ type:" ...
- JS图表组件 highcharts 简单的介绍
把highcharts拿来做个简单的介绍,希望更多的朋友可以用到这个用来做图表的js插件. preparation Highcharts Highcharts是一个制作图表的纯Javascript类库 ...
- 数据的图表统计highcharts
数据统计常用的图表一般是饼状图.柱状图.线状图,HighCharts可以很好的实现. HighCharts highcharts是基于jquery的一个功能强大的插件,使用时先导入jquery.js ...
- Qt中如何 编写插件 加载插件 卸载插件
Qt中如何 编写插件 加载插件 卸载插件是本文要介绍的内容.Qt提供了一个类QPluginLoader来加载静态库和动态库,在Qt中,Qt把动态库和静态库都看成是一个插件,使用QPluginLoade ...
- 转 jquery插件--241个jquery插件—jquery插件大全
241个jquery插件—jquery插件大全 jquery插件jqueryautocompleteajaxjavascriptcoldfusion jQuery由美国人John Resig创建,至今 ...
- Vim插件之插件管理器Vundle
Vim插件之插件管理器Vundle 1.介绍下载 相比Sublime.Text2等现代编辑器,Vim缺乏默认的插件管理器,所有插件的文件都散布在~/.vim下的几个文件夹中,配置Vim的过程, 就是在 ...
- Android图表库MPAndroidChart(十三)——简约的底部柱状图
Android图表库MPAndroidChart(十三)--简约的底部柱状图 我们继续上一讲,今天还是说下柱状图,这个图的话应该是用的比较多的,所有拿出来溜溜,先看下效果 我们还是来看下基本实现 一. ...
随机推荐
- .Net设计模式_建造者模式
引言: 建造者的特点是过程,需要建造对象的过程是一样的,如:软件项目,过程都是,POC.投标.立项.软件过程.收款,那么标准的软件项目都是这个过程,只是不同的项目在做这个过程的内容不一样.所以需要有一 ...
- javascript源码阅读推荐
作者:马 岩(Furzoom) (http://www.cnblogs.com/furzoom/)版权声明:本文的版权归作者与博客园共同所有.转载时请在明显地方注明本文的详细链接,未经作者同意请不要删 ...
- 运用json-lib生成特定json
在实现接口过程中,一般协议都是定义数据格式为json.我们有时候需要把bean转换为JSON输出给接口调用者,但是可能存在bean中的字段有些不是接口定义所需要的.这个时候需要我们对JSON转换是需要 ...
- linux下svn服务搭建
安装svn需要依赖apr和apr-util这两个软件,所以先安装这两个软件 下载安装APR wget http://apache.fayea.com//apr/apr-1.5.2.tar.gz .ta ...
- 在某些情况下明明添加了引用,为何VS还报错"XXX"不存在类型或命名空间(是否缺少程序集引用)
程序主结构:两个程序集DLL,一个OpticalAlarm(主程序),一个OpticalAlarm.Common 问题描述:搭建程序框架时,使用了log4net进行日志处理,在OpticalAlarm ...
- Webstorm 不识别es6 import React from ‘react’——webstorm不支持jsx语法怎么办
2016-10-31更新 webstorm不支持es6语法怎么办? webstorm不支持jsx语法怎么办? 参考:webstorm不支持jsx语法怎么办 I spent ages trying to ...
- js中对象的创建
json方式,构造函数方式,Object方式,属性的删除和对象的销毁 <html> <head> <title>js中的对象的创建</title> &l ...
- PHPSession-完全PHP5之session篇
http://blog.csdn.net/masterft/article/details/1640122 1.什么是session? Session的中文译名叫做“会话”,其本来的含义是 ...
- Java_LIST使用方法和四种遍历arrayList方法
1.List接口提供的适合于自身的常用方法均与索引有关,这是因为List集合为列表类型,以线性方式存储对象,可以通过对象的索引操作对象. List接口的常用实现类有ArrayList和Linked ...
- MyBatis3.1 学习教程
昨天中午,突然有想要学习 MyBatis 的冲动,经过 1.5 天的研究和学习,再加上以前学过 I batis 的经验,很快就了解了这门技术. 写这篇教程,是想告诉那些想学却又怕学习不好的同学们, 其 ...