javascript - 减少 Highcharts 中堆叠条之间的空间
问题描述
我在 Highchart 中创建了堆积柱。
我曾经pointWidth: 50
减少柱栏宽度,但堆叠栏之间的空间太大。
如何减少堆叠条之间的空间?
[更新问题]
我还想在图例中显示堆栈名称,用户可以单击堆栈名称以隐藏图表中的堆栈。有可能吗?
这是我的源代码:
JSfiddle 链接https://jsfiddle.net/viethien/ak2h1sfq/4/
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: ( // theme
Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color
) || 'gray'
}
}
},
legend: {
align: 'center',
x: 0,
verticalAlign: 'bottom',
y: 5,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || 'white',
borderColor: '#CCC',
borderWidth: 0,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true
}
},
series: {
//stacking: 'normal',
dataLabels: {
formatter: function() {
console.log(this);
return this.series.name;
},
enabled: true,
//allowOverlap: true,
//align: 'right',
color: '#fff',
shadow: false,
//x:-50,
style: {
fontSize: "8px",
textShadow: "0px"
}
},
//pointPadding: 0.1,
pointWidth: 50,
groupPadding: 0,
stacking: 'normal',
//colorByPoint: true,
//showInLegend: false
}
},
series: [{
name: 'Component',
data: [[0,5], [1,3], [2,4], [3,7], [4,3]],
stack: 'Forecast'
}, {
name: 'Module',
data: [[0,2], [1,2], [2,3], [3,2], [4,2]],
stack: 'Forecast'
},
{
name: 'Board',
data: [3, 5, 5, 3, 2],
stack: 'Forecast'
},
{
name: 'Component',
data: [6, 4, 5, 8, 4],
stack: 'Real'
}, {
name: 'Module',
data: [3, 3, 4, 3, 3],
stack: 'Real'
},
{
name: 'Board',
data: [4, 6, 6, 4, 3],
stack: 'Real'
}
]
});
<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>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
解决方案
您可以将 设置groupPadding
为更高的值,这会将组的列一起移动。请注意,使用 pointWidth 的固定值会干扰图表响应性,但您可以使用响应规则为特定图表宽度自定义这些值:https ://api.highcharts.com/highcharts/responsive
演示:https ://jsfiddle.net/BlackLabel/we1rc5vg/
plotOptions: {
column: {
stacking: 'normal',
},
series: {
//stacking: 'normal',
dataLabels: {
formatter: function() {
console.log(this);
return this.series.name;
},
enabled: true,
//allowOverlap: true,
//align: 'right',
color: '#fff',
shadow: false,
//x:-50,
style: {
fontSize: "8px",
textShadow: "0px"
}
},
//pointPadding: 0,
pointWidth: 50,
groupPadding: 0.2,
stacking: 'normal',
//colorByPoint: true,
//showInLegend: false
}
},
API:https ://api.highcharts.com/highcharts/series.column.groupPadding
编辑:
要创建堆栈图例项,您需要添加一个没有数据的系列(创建图例按钮)并使用legendItemClick回调自定义按钮功能。
演示:https ://jsfiddle.net/BlackLabel/qLs219u4/
请注意,当堆栈将被隐藏并且用户将单击隐藏堆栈中的特定系列图例项时,此解决方案可能无法完美运行。
一旦我研究了一个非常复杂的例子。如果你想知道你可以在这里探索这个话题:https ://www.highcharts.com/forum/viewtopic.php?t=42157
推荐阅读
- xml - 错误:'不支持的 XSL 元素'http://www.w3.org/1999/XSL/Transform:for-each-group''
- jquery - 在 jVectorMap 中设置标记图像的宽度/高度
- scala - Spark中的rdd.map函数可以在特定条件下没有返回吗?
- php - 自定义 404 显示 php 文件的“找不到文件”而不是重定向
- linear-programming - Gurobi ILP:添加新约束后的解决方案起点
- macros - AHK 模拟按住键同时物理按住键
- javascript - 关于 Javascript 函数调用
- java - java.io.FileNotFoundException json 文件找不到
- r - 混淆矩阵显示额外的 0
- python - 多进程迭代器不起作用