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. ...
随机推荐
- SQLite的简单应用
安装部署 1)进入 SQL 下载页面:http://www.sqlite.org/download.html 2)下载预编译二进制文件包. Windows 环境的如下: 下载完之后,就算部署完成.(P ...
- UVALive 3645 Objective: Berlin(最大流 ：时序模型)
题意:已知n(n <= 150)个城市和m(m <= 5000)个航班,每个航班有出发地.到达地.乘坐人数.起飞时间和降落时间(时间用时和分表示),求从一个指定城市出发,去往另一个指定城市 ...
- CAF（C++ actor framework）使用随笔（使用类去构建actor和使用的一些思路）
Class-based actorsA class-based actor is a subtype of event_based_actor and must implement the pure ...
- CSDN 自动评论
转载说明 本篇文章可能已经更新,最新文章请转:http://www.sollyu.com/csdn-auto-reviews/ 说明 当打开http://download.csdn.net/my/do ...
- C++编译期判断是否能够转型
#include <iostream> #include <vector> using namespace std; template<class T,class U&g ...
- 分类算法之贝叶斯(Bayes)分类器
摘要:旁听了清华大学王建勇老师的 数据挖掘:理论与算法 的课,讲的还是挺细的,好记性不如烂笔头,在此记录自己的学习内容,方便以后复习. 一:贝叶斯分类器简介 1)贝叶斯分类器是一种基于统计的分类器 ...
- JS如何获取iframe内html的body值
default页面: <html> <head> <script type="text/javascript"> window.onload=f ...
- ASP.net中导出Excel的简单方法介绍
下面介绍一种ASP.net中导出Excel的简单方法 先上代码:前台代码如下(这是自己项目里面写的一点代码先贴出来吧) <div id="export" runat=&quo ...
- GDI+ 绘图闪烁解决方法
闲着没事,准备做一个类似于TeeChart的自定义控件,结果第一步的绘图就把我给难倒了,虽然早就知道GDI绘图的闪烁问题很坑,但是却没有想到如此之坑,折腾了两天,才找到解决方法. 首先在窗体加载的时候 ...
- 利用nginx做负载均衡
round-robin:轮询.以轮询方式将请求分配到不同服务器上,默认 least-connected:最少连接数.将下一个请求分配到连接数最少的那台服务器上 ip-hash :基于客户端的IP地址. ...