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:{ / ...
随机推荐
- Json文件/网址解析
// // main.m // OC8-Json文件解析 // // Created by qianfeng on 15/6/23. // Copyright (c) 2015年 qianfeng. ...
- wampserver安装后 mysql 所有数据库丢失的解决方案
事情起源: 晚上十点客户紧急来电,说是网站全部瘫痪.同事登陆数据库一看,Mysql Workbench Database下一片空白.当时我们都傻了. 发现原因: 服务器环境是windows serve ...
- Oracle + Entity Framework 更新没有设置主键的表
最近用Entity Framework 开发的时候,发现一个问题,在默认情况下,EF不能对一个没有主键的表进行更新.插入和删除的动作. 那么,应该怎么处理没有主键的表呢? 我们打开这个表的edmx文件 ...
- less使用001
官网: http://lesscss.org/ . 中文文档直接百度搜索less,能找到N多网站提供的支持. less-gui,使用国产的koala, 其中文帮助文档地址. 拖拽一个目录到考拉就新建了 ...
- EL表达式获取Map和List中的值
EL表达式获取Map和List中的值 EL表达式取Map中的值: 当Map中是String,String时 后台servlet中: Map<String, String> map1 = ...
- .Net Core 项目中的包引用探索（使用VSCode）
本文组织有点乱,先说结论吧: 1 在 project.json 文件中声明包引用. 而不是像以前那样可以直接引用 dll. 2 使用 dotnet restore 命令后,nuget 会把声明的依赖项 ...
- C++与Lua交互（五）
引言 要将C++中的对象类型映射到Lua中,就不得不要先了解Lua面向对象的机制.在这里,我们先看一下Lua面向对象的实现基础--metatable,再以此实现C++对象到Lua的映射. Lua面向对 ...
- Poj 1328 / OpenJudge 1328 Radar Installation
1.Link: http://poj.org/problem?id=1328 http://bailian.openjudge.cn/practice/1328/ 2.Content: Radar I ...
- Java数字格式化输出时前面补0
Java数字格式化输出时前面补0 星期日 2014年11月30日| 分类: Java /** * 里数字转字符串前面自动补0的实现. * */ public class TestString ...
- iterm2 配色修改
打开终端 输入 cd ~ vim .bash_profile 插入 export CLICOLOR= export LSCOLORS=gxfxcxdxbxegedabagacad export PS1 ...