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:{ / ...
随机推荐
- SQL通过日期计算年龄
首先建立一个表如下: ======================= BirthDay datetime not null Age 通过公式计算得出 ======================= 以 ...
- 将一个应用程序添加做成windows服务
需求来源: 在服务器端运行的一个应用程序,为完成客户端路径分析等功能: 此应用程序只需要运行着就可以,没有界面等要求: 因此,考虑把此应用程序添加到服务器端电脑管理的服务中,可以启动和停止. 这里添加 ...
- Kernel Panic常见原因以及解决方法
Technorati 标签: Kernel Panic 出现原因 1. Linux在中断处理程序中,它不处于任何一个进程上下文,如果使用可能睡眠的函数,则系统调度会被破坏,导致kernel panic ...
- Poj 2996 Help Me with the Game
1.Link: http://poj.org/problem?id=2996 2.Content: Help Me with the Game Time Limit: 1000MS Memory ...
- [DevExpress]设置RepositoryItemComboBox只可下拉选择不可编辑
将TextEditStyle属性设置如下即可: 希望有所帮助!
- √GMAP.NET 地图
深入理解最强桌面地图控件GMAP.NET ---[更新]百度地图 enjoyeclipse 2013-11-18 22:23 阅读:3897 评论:20 深入理解最强桌面地图控件GMAP.NE ...
- 认识HTML5
引言,认识两个标准制定的组织 在讲什么是Html5之前得先了解两个组织:WHATWG :网页超文本技术工作小组(英语:Web Hypertext Application Technology Work ...
- Jquery ajax basic
$.ajax({ url: "test.aspx?action=testaction", contentType: "application/json; charset= ...
- Shell根据年月日创建文件夹
#!/bin/sh dir_path="/vol/project/log/test/" ..} do #echo "$year" cd $dir_path mk ...
- 51nod1212无向图最小生成树
1212 无向图最小生成树 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 N个点M条边的无向连通图,每条边有一个权值,求该图的最小生成树. Inpu ...