highcharts - 如何在highchart中创建垂直合并堆叠条
问题描述
如何在 highchart 中创建垂直合并堆叠条。
组填充和点填充在 Highchart 中不起作用。
预期的:
实际的:
https://jsfiddle.net/sathishkumar_v/3woxcskg/
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: null
},
exporting:{
enabled: false
},
legend: {
align: 'right',
},
xAxis: {
categories: [
'6:00AM',
'7:00AM',
'8:00AM',
'9:00AM',
'10:00AM',
'11:00AM',
'12:00AM',
'1:00PM',
'2:00PM',
'3:00PM',
'4:00PM',
'5:00PM',
'6:00PM',
'7:00PM',
'8:00PM',
'9:00PM',
'10:00PM'
],
plotBands: [
{
from: 0,
to: 2,
color: '#D4E2F2'
},
{
from: 2,
to: 5,
color: '#EFC5CA'
},
{
from: 14,
to: 16,
color: '#D4E2F2'
},
{
from: 11,
to: 14,
color: '#EFC5CA'
},
]
},
yAxis: [
{
gridLineDashStyle: 'longdash',
// tickPositions: [0, 100, 200, 300, 400, 500, 600, 700, 800],
title: {
text: 'TRIPS'
}
},
{
gridLineDashStyle: 'longdash',
// tickPositions: [0, 100, 200, 300, 400, 500, 600, 700, 800],
title: {
text: 'DEMAND(PAX)'
},
opposite: true
}
],
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'Planned Trips',
yAxis: 1,
data: [0, 35, 80, 120, 230, 210, 175, 155, 130, 120, 150, 100, 175, 160, 175, 140, 180],
color: '#304894',
},
{
name: 'Actual Trips',
///yAxis: 2,
data: [0, 145, 165, 180, 190, 225, 195, 175, 150, 190, 200, 230, 175, 90, 115, 140, 120],
color: '#6FD1F6',
},
{
name: 'Actual Demand',
type: 'column',
stacking: 'normal',
data: [0, 25, 35, 80, 130, 150, 115, 100, 80, 70, 30, 80, 100, 75, 60, 75, 40],
color: '#6FD1F6',
pointWidth: 10
}, {
type: 'column',
name: 'Planned Demand',
stacking: 'normal',
data: [3, 35, 11, 11, 12, 14, 15, 21, 25, 25, 23, 21, 15, 13, 12, 5, 5],
color: '#304894',
pointWidth: 10
}]
});
我正在使用https://github.com/bellstrand/highcharts-border-radius作为边界半径顶部 - 左右
解决方案
您可以使用包装函数来执行此操作,如下所示:
(function (H) {
H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function (proceed) {
console.log(this)
let borderRadius = this.points[0].pointWidth / 2;
this.options.borderRadius = borderRadius;
$.each(this.points, function (i,point) {
point.shapeArgs.y -= borderRadius; //move the point down by borderRadius pixels
point.shapeArgs.height += borderRadius * 2; //add borderRadius pixels to the total height of a point (to cover the gap)
});
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
}(Highcharts));
它将条的初始宽度的一半作为边界半径并覆盖它们将留下的间隙。
(function (H) {
H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function (proceed) {
let borderRadius = this.points[0].pointWidth / 2;
this.options.borderRadius = borderRadius;
$.each(this.points, function (i,point) {
point.shapeArgs.y -= borderRadius; //move the point down by borderRadius pixels
point.shapeArgs.height += borderRadius * 2; //add borderRadius pixels to the total height of a point (to cover the gap)
});
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
}(Highcharts));
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: null
},
exporting:{
enabled: false
},
legend: {
align: 'right',
},
xAxis: {
categories: [
'6:00AM',
'7:00AM',
'8:00AM',
'9:00AM',
'10:00AM',
'11:00AM',
'12:00AM',
'1:00PM',
'2:00PM',
'3:00PM',
'4:00PM',
'5:00PM',
'6:00PM',
'7:00PM',
'8:00PM',
'9:00PM',
'10:00PM'
],
plotBands: [
{
from: 0,
to: 2,
color: '#D4E2F2'
},
{
from: 2,
to: 5,
color: '#EFC5CA'
},
{
from: 14,
to: 16,
color: '#D4E2F2'
},
{
from: 11,
to: 14,
color: '#EFC5CA'
},
]
},
yAxis: [
{
gridLineDashStyle: 'longdash',
// tickPositions: [0, 100, 200, 300, 400, 500, 600, 700, 800],
title: {
text: 'TRIPS'
}
},
{
gridLineDashStyle: 'longdash',
// tickPositions: [0, 100, 200, 300, 400, 500, 600, 700, 800],
title: {
text: 'DEMAND(PAX)'
},
opposite: true
}
],
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'Planned Trips',
yAxis: 1,
data: [0, 35, 80, 120, 230, 210, 175, 155, 130, 120, 150, 100, 175, 160, 175, 140, 180],
color: '#304894',
},
{
name: 'Actual Trips',
///yAxis: 2,
data: [0, 145, 165, 180, 190, 225, 195, 175, 150, 190, 200, 230, 175, 90, 115, 140, 120],
color: '#6FD1F6',
},
{
name: 'Actual Demand',
type: 'column',
stacking: 'normal',
data: [0, 25, 35, 80, 130, 150, 115, 100, 80, 70, 30, 80, 100, 75, 60, 75, 40],
color: '#6FD1F6',
pointWidth: 10
}, {
type: 'column',
name: 'Planned Demand',
stacking: 'normal',
data: [3, 35, 11, 11, 12, 14, 15, 21, 25, 25, 23, 21, 15, 13, 12, 5, 5],
color: '#304894',
pointWidth: 10
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
工作示例: https ://jsfiddle.net/ewolden/3woxcskg/19/
如果您的页面中有多个图表,但只想影响一个图表,您可以为此设置自定义标志。然后,您需要:
在图表配置中:
chart: {
customFlag: 'wrap',
...
},
在包装器中:
(function (H) {
H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function (proceed) {
console.log(this)
if(this.chart.options.chart.customFlag == 'wrap') {
let borderRadius = this.points[0].pointWidth / 2;
this.options.borderRadius = borderRadius;
$.each(this.points, function (i,point) {
point.shapeArgs.y -= borderRadius; //move the point down by borderRadius pixels
point.shapeArgs.height += borderRadius * 2; //add borderRadius pixels to the total height of a point (to cover the gap)
});
}
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
}(Highcharts));
(function (H) {
H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function (proceed) {
console.log(this)
if(this.chart.options.chart.customFlag == 'wrap') {
let borderRadius = this.points[0].pointWidth / 2;
this.options.borderRadius = borderRadius;
$.each(this.points, function (i,point) {
point.shapeArgs.y -= borderRadius; //move the point down by borderRadius pixels
point.shapeArgs.height += borderRadius * 2; //add borderRadius pixels to the total height of a point (to cover the gap)
});
}
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
}(Highcharts));
Highcharts.chart('container', {
chart: {
type: 'spline',
customFlag: 'wrap'
},
title: {
text: null
},
exporting:{
enabled: false
},
legend: {
align: 'right',
},
xAxis: {
categories: [
'6:00AM',
'7:00AM',
'8:00AM',
'9:00AM',
'10:00AM',
'11:00AM',
'12:00AM',
'1:00PM',
'2:00PM',
'3:00PM',
'4:00PM',
'5:00PM',
'6:00PM',
'7:00PM',
'8:00PM',
'9:00PM',
'10:00PM'
],
plotBands: [
{
from: 0,
to: 2,
color: '#D4E2F2'
},
{
from: 2,
to: 5,
color: '#EFC5CA'
},
{
from: 14,
to: 16,
color: '#D4E2F2'
},
{
from: 11,
to: 14,
color: '#EFC5CA'
},
]
},
yAxis: [
{
gridLineDashStyle: 'longdash',
// tickPositions: [0, 100, 200, 300, 400, 500, 600, 700, 800],
title: {
text: 'TRIPS'
}
},
{
gridLineDashStyle: 'longdash',
// tickPositions: [0, 100, 200, 300, 400, 500, 600, 700, 800],
title: {
text: 'DEMAND(PAX)'
},
opposite: true
}
],
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'Planned Trips',
yAxis: 1,
data: [0, 35, 80, 120, 230, 210, 175, 155, 130, 120, 150, 100, 175, 160, 175, 140, 180],
color: '#304894',
},
{
name: 'Actual Trips',
///yAxis: 2,
data: [0, 145, 165, 180, 190, 225, 195, 175, 150, 190, 200, 230, 175, 90, 115, 140, 120],
color: '#6FD1F6',
},
{
name: 'Actual Demand',
type: 'column',
stacking: 'normal',
data: [0, 25, 35, 80, 130, 150, 115, 100, 80, 70, 30, 80, 100, 75, 60, 75, 40],
color: '#6FD1F6',
pointWidth: 10
}, {
type: 'column',
name: 'Planned Demand',
stacking: 'normal',
data: [3, 35, 11, 11, 12, 14, 15, 21, 25, 25, 23, 21, 15, 13, 12, 5, 5],
color: '#304894',
pointWidth: 10
}]
});
Highcharts.chart('container2', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div id="container2" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
推荐阅读
- node.js - 测试通过,但显示两条错误消息“错误:连接 ECONNREFUSED 127.0.0.1:80”和“在 Socket 实例上发出 'error' 事件”
- c++ - 在 C++/CLI 中结合泛型和模板
- python - FastAPI:dependency_overrides 不会覆盖 @app.on_event 中的依赖项
- swift - 如何修复 Xcode 中的 Target_Watch_OS 错误?
- apache-flink - Apache Flink - 检查点数据大小随着时间的推移而增加
- python - 如何使用python从服务器上的不同位置导入文件?
- visual-studio-code - 如何在 vscode 中安装 Pylance 和 Python,而不让它改变基本的鼠标点击动作
- json - 使用 Azure 数据工厂从列中解析 JSON 字符串
- php - date() php 显示错误的日期
- javascript - 如何使用块缓冲制作简单的下载器客户端