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: {
stacking: 'normal',
dataLabels: { enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' }
}
},
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.js和highcharts-more.js文件 引入文件文件源码:下载https://img.hcharts ...
- highchart柱状堆叠图动态数据请求
$(function () { var options = { chart: { renderTo: 'indoor', type: 'column', }, title: { text: '室内问题 ...
- java项目使用Echarts 做柱状堆叠图，包含点击事件
基础知识请自行百度查看,以下直接贴出实现代码: <%@ page pageEncoding="UTF-8"%><!DOCTYPE html><html ...
- 可视化操作，实现横向柱形echart图 无边框
图片的实现: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
- Highcharts 柱图 每个柱子外围的白色边框
Highcharts 柱图中每条柱外会有默认白色的边框, 去边框代码如下: plotOptions: { bar: { borderColor: "",//去边框 } }
- Highcharts 基本区域图；Highcharts 使用负数区域图；Highcharts 堆叠区域图；Highcharts 百分比堆叠区域图
Highcharts 基本区域图 配置 chart chart.type 配置项用于设定图表类型,默认为 "line",本章节我们使用 'area'. var chart = { ...
- 06. Matplotlib 2 |折线图| 柱状图| 堆叠图| 面积图| 填图| 饼图| 直方图| 散点图| 极坐标| 图箱型图
1.基本图表绘制 plt.plot() 图表类别:线形图.柱状图.密度图,以横纵坐标两个维度为主同时可延展出多种其他图表样式 plt.plot(kind='line', ax=None, figsiz ...
- echarts堆叠图添加总量
echarts在使用中往往会遇到需要展示总量信息的情况,比较典型的就是3维统计的堆叠柱状图 堆叠是在柱状图的基础上,给几项设置同一stack来实现的.不考虑在tips中实现总和,有两种方式可以实现总和 ...
- [Swift通天遁地]三、手势与图表-(12)创建复合图表：包含线性图表和柱形图表
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
随机推荐
- Js 中的this
关于this This代表"当前"对象 谁调用就代表谁 行内绑定 不带参数 行内绑定 带参数 this 当前对象 Object HTMLInputElement 动态绑定 要获取自 ...
- ArcSDE for oracle10g安装后post的时候出现错误
The Post Installation Setup can not locate required Oracle files in your path.Check your Oracle inst ...
- a2x
#include <typeinfo> template <typename T> bool a2x( T& _f , char* p) { if( !p ) retu ...
- must implement the inherited abstract method DialogInterface.OnClickListener.onClick(DialogInterface, int)问题
依照视屏编写代码如下 class MyButtonListener implements OnClickListener{ @Override public void onClick(View v){ ...
- ajax 内部值 外部调用不了原因
var id=‘123’; $.ajax({ url:’http://www.xxx.com/ajax', type:'post', dataType: "json", data: ...
- Mac OS 踩坑指南
前言 其实mac os本身还是很不错的,软硬结合使得其性能.效率.续航得到了很好的优化. 但是毕竟是一个"小众"操作系统,很多在Win上已经用习惯的东西在这里都没有,或者完全不一样 ...
- Jquery 禁用 a 标签 onclick 事件30秒后可用
<a href="javascript:;" id="sendToTel" >发送短信</a> <script type=&quo ...
- 转载：邮箱正则表达式Comparing E-mail Address Validating Regular Expressions
Comparing E-mail Address Validating Regular Expressions Updated: 2/3/2012 Summary This page compares ...
- CentOS 6,7最小化安装后再安装图形界面
CentOS 6.2最小化安装后再安装图形界面 在安装CentOS 6.2时发现它没有提示我要怎么安装,而是“自作主张”地给我选择了最小化安装,结果装完之后只有终端界面,因为有时候不得不用图形界面,所 ...
- Android 控件收集
SwipeMenuExpandableListView https://github.com/tycallen/SwipeMenu-Expandable-ListView