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. ...
随机推荐
- 【转】C#绝对新手之C#中的多线程小结
大概有4种方法: Dispatcher.异步委托.手动多线程.BackgroundWorker,另外还有一个DispatcherTimer,是定时器. 其中Dispatcher与DispatcherT ...
- VirtualDesktop与Desktops多窗口程序的对比
在Linux系统下,有着原生的虚拟桌面程序,windows下面则没有提供. windows相对linux好的就是其良好的生态圈. Virtual Desktop类似linux的虚拟桌面程序,可以支持多 ...
- 类的构造器[constructor]_C#
类的构造器(constructor): 1. 先看两个类定义: class A{ } 相当于: class A: object { Public A ( ) : base( ) { } ...
- 《java编程思想》--多线程基础--Runnable
一.简单说下Runnable是什么 1.它是一个接口 2.只提供了run方法 3.这个接口提供了一个协议:实现这个接口的类是active的(不必成为Thread的子类) 4.run方法没有返回值 /* ...
- Java多线程(一) 多线程的基本使用
在总结JDBC数据库连接池的时候,发现Java多线程这块掌握得不是很好,因此回头看了下多线程的内容.做一下多线程模块的学习和总结,稳固一下多线程这块的基础.关于多线程的一些理论知识,这里不想啰嗦太多, ...
- centos7搭建NIS与NFS综合应用
实验环境: centos7(服务端) redhat enterprise linux 7.2(客户端) 实验目的:用centos7的账号,能在redhat enterprise linu ...
- linux 安装mysql 5.7.16
http://blog.csdn.net/huangliang0703/article/details/49935775
- linux与windows共享剪贴板(clipboard)
linux与windows共享剪贴板(clipboard)的方法 先说两句废话,其实linux和windows之间不需要共享剪贴板,直接在putty中,按住SHIFT+鼠标选择就可以了. 但是作为一种 ...
- ArcGIS Server10.1授权文件
3dengine,101,ecp.arcgis.server,01-jan-2020,UTE784S3EY83ZJKN0085 3dserver,101,ecp.arcgis.server,01-ja ...
- input onfocus onblur
<input type="text" style="color:#999" value="账户" onfocus='if(this.v ...