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:{ / ...
随机推荐
- 第一节 Hibernate 基本配置
1 新建maven工程 1)打开eclipse,依次点击File---->New---->Maven Project. 2)选择org.apache.maven.archetypes ma ...
- C++ typedef用法小结
一.typedef的四个用法 用法一: 为复杂的声明定义一个新的简单的别名.方法是:在原来的声明里逐步用别名替换一部分复杂声明,如此循环,把带变量名的部分留到最后替换,得到的就是原声明的最简化版.举例 ...
- CAF（C++ actor framework）使用随笔（同步发送 异步与同步等待）（三）
c). 同步发送, 等待响应, 超时后收到1个系统消息. 贴上代码 #include <iostream> #include "caf/all.hpp" #includ ...
- 你可以用OpenCV来干什么
本文翻译自开源图书“OpenCV by Example”中第1章中的“What can you do with OpenCV?”小节. 使用OpenCV,你几乎可以做任何你能够想到的计算机视觉任务.现 ...
- IE9中jquery发生Object未定义原因及解决办法
http://netwjx.github.io/blog/2012/04/15/object-undefined-in-jquery/ 最简单的使用IE9的兼容模式即可.
- php curl基本操作
如何使用cURL的基本方法?首先,修改php.ini文件的设置,找到php_curl.dll,取消下在的注释extension=php_curl.dll,因为php默认是不开启cURL的. cURL是 ...
- YII千万级PV架构经验分享--俯瞰篇--性能介绍
一张图,啥也不说了.直接上图,大图真难画. 呃,非得写满二百个字,其实本来想画均衡负债,一些服务器假设列子的,突然发现,没有业务要求,画不出来.写了这么久了,天天熬夜,得休息几天再继续.其实还有非常重 ...
- Django设置
运行 django-admin.py startproject [project-name] 命令会生成一系列文件,在Django 1.6版本以后的 settings.py 文件中有以下语句: # B ...
- Servlet一次乱码排查后的总结(转)
原文地址:http://my.oschina.net/looly/blog/287255 由来 在写一个小小的表单提交功能的时候,出现了乱码,很奇怪request上来的参数全部是乱码,而从数据库查询出 ...
- liunx命令之whereis、which、find的区别和联系
liunx命令之whereis.which.find的区别和联系