highcharts 柱状图
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/exporting.js"></script>
<script>
$(function () {
$('#container').highcharts({
chart:{
type:'column'
}, xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter:function(){
return '<b>'+this.x + '</b><br/>' + this.series.name + ':' + this.y + '<br/>' + 'Total:' + this.point.stackTotal;
},
valueSuffix: '°C'
},
plotOptions: {
column: { pointPadding: 0.2, borderWidth: 0 }
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0]
}]
});
}); </script>
</head>
<body>
<div id="container" style="min-width:700px;height:400px"></div>
</body>
</html>
highcharts 柱状图的更多相关文章
- highcharts 柱状图 动态加载
highcharts柱状图动态加载 (1):导入样式 <script type="text/javascript" src="<%=request.getCo ...
- highcharts 柱状图动态设置数据应用实例
<div id="container" style="min-width:700px;height:400px"></div> #jav ...
- highcharts柱状图、饼状图
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- highcharts 柱状图 折线图 混合 双纵轴显示
$(function () { $('#container').highcharts({ chart: { zoomType: 'xy' }, title: { text: '' }, colors: ...
- Asp.net mvc4 + HighCharts + 柱状图
前端代码: @{ Layout = null;} <!DOCTYPE html> <html><head> <meta name="viewport ...
- highcharts柱状图和饼图的数据填充
1.其实数据填充很简单,它们就是json的格式,然后后台按照这种格式去套数据发给前端:前端再做一下连接处理等就行了. $('#program_statistics_bar').highcharts({ ...
- android highcharts 柱状图例子
android提供achartengine api 只能做简单的,如果是复杂的图表,个人的想法结合highcharts来完成:减小工作量,官方提供的例子也非常丰富. 通过android webview ...
- highcharts柱状图实现legend和数据列一一对应效果
var cate = ['Green', 'Pink']; Highcharts.chart('container', { chart: { type: 'column' }, legend: { e ...
- highcharts 柱状图在柱子顶部显示y轴数据
var plotOptions={ column:{ //borderColor: "#CCCC66",//边框 shadow: true, //阴影 dataLabels:{ / ...
随机推荐
- Swift标识符和关键字
任何一种计算机语言都离不开标识符和关键字,下面我们将详细介绍Swift标识符和关键字. 标示符 标识符就是给变量.常量.方法.函数.枚举.结构体.类.协议等指定的名字.构成标识符的字母均有一定的规范, ...
- Entity Framework 之三层架构
今天,我们谈一下如何用Entity Framework构建一个三层架构.即包括DAL层,BLL层和MODEL层.我们先看一下目录结构,如下图: 目录中,我们有Web层,AVON.DMS.Model是实 ...
- 【转载】干货再次来袭！Linux小白最佳实践：《超容易的Linux系统管理入门书》（连载八）用命令实现批量添加用户
Windows添加用户需要至少5个界面,而Linux一条命令就搞定了,这是不是高效人士办公第一法则呢.本文不给你一堆参数和选项,不让你见识教条主义,只给你最实用的代码. 想每天能听到小妞的语音播报,想 ...
- jvmstat监控jvm内存
1.下载jvmstat-3_0.zip: 2.配置环境变量JVMSTAT_JAVA_HOME为jdk目录E:\Program Files\Java\jdk1.5.0_12 3.监控本机: jps查看 ...
- 【原】Oracle拼接字段
select FLIGHT_DATE, replace(wm_concat(FLIGHT_NO), ',', '*') FLIGHT_NO from T2001 group by FLIGHT_DAT ...
- CCNP第二天 帧中继综合实验
实验题如图所示: 要求全网可达 R5为帧中继交换机 R6 和 R1之间为快速以太网接口 所使用的拓扑为CCNA标准版拓扑图,如下所示: -------------------------------- ...
- 【转】perl中尖括号运算符(＜＞)使用说明
perl中尖括号运算符的用途分享,这里简单介绍下,方便需要的朋友 perl中<>运算符可以有如下的用途: 1)如果尖括号中间是文件句柄,尖括号运算符允许你读取文件句柄,比如<STDI ...
- Win7 64bit 成功安装ArcView3.X
本人参考 链接 已在Win7 64Bit 笔记本上成功安装ArcView3.3，于是记录以下心得。 Win7 64Bit安装不了ArcView3.X的原因在于： 1，ArcView3.X属于16Bit ...
- Kinetic使用注意点--circle
new Circle(config) 参数: config:包含所有配置项的对象. { radius: "半径", fill: "填充色", fillRGB: ...
- 一步步学习ASP.NET MVC3 章节总结
请注明转载地址:http://www.cnblogs.com/arhat 对于<一步步学习ASP.NET MVC3>系列工15章,那么为了方便大家能够快速的预览,老魏在这里为这个系列提供一 ...