避免在 a 中的每个列系列上显示重复的堆栈标签。排行榜
Avoid showing duplicate stack labels on the every column series in a. highcharts
我正在使用高图来呈现堆叠的分组高图,如下所示。
https://jsfiddle.net/4tojbfsq/1/
我能够获得顶部所有数据标签的总数,我还想在 x 轴上呈现一个堆栈标签,如上图所示的双 x 轴 fiddle
但是我的问题是我能够在 x 轴上显示堆栈标签,但是我也看到每个堆栈系列都重复了相同的堆栈标签。
有什么办法可以只在所有系列的底部显示堆栈标签,而不是在堆叠系列内的任何地方重复。
代码:
yAxis: {
allowDecimals: false,
//offset:10,
title: {
text: 'Number of fruits'
},
stackLabels: {
enabled: true,
verticalAlign: 'top',
formatter: function() {
return this.total;
},
}
},
plotOptions: {
column: {
stacking: 'normal'
},
series: {
dataLabels: {
enabled: true,
verticalAlign: 'bottom',
overflow: 'none',
crop: false,
y: 20,
formatter() {
return this.series.userOptions.stack;
}
}
}
},
series: [{
name: 'John',
data: [53, 33, 43,63,7,83],
stack: 'malssses'
}, {
name: 'Joe',
data: [33, 43,43,63,73,8],
stack: 'female'
}, {
name: 'Jane',
data: [42, 54,43,62,74,84],
stack: 'malssses',
}, {
name: 'Janet',
data: [34, 40, 42,36,74,83],
stack: 'female',
}]
重复的标签不是 stacklabels
,而是 dataLabels
。您可以仅为特定系列显示数据标签:
{
name: 'Jane',
data: [42, 54, 43, 62, 74, 84],
stack: 'malssses',
dataLabels: {
enabled: true,
verticalAlign: 'bottom',
overflow: 'none',
crop: false,
y: 20,
formatter() {
return this.series.userOptions.stack;
}
}
}, {
name: 'Janet',
data: [34, 40, 42, 36, 74, 83],
stack: 'female',
dataLabels: {
enabled: true,
verticalAlign: 'bottom',
overflow: 'none',
crop: false,
y: 20,
formatter() {
return this.series.userOptions.stack;
}
}
}
演示:https://jsfiddle.net/BlackLabel/t3sheqbu/
API: https://api.highcharts.com/highcharts/series.line.dataLabels
我正在使用高图来呈现堆叠的分组高图,如下所示。 https://jsfiddle.net/4tojbfsq/1/
我能够获得顶部所有数据标签的总数,我还想在 x 轴上呈现一个堆栈标签,如上图所示的双 x 轴 fiddle 但是我的问题是我能够在 x 轴上显示堆栈标签,但是我也看到每个堆栈系列都重复了相同的堆栈标签。
有什么办法可以只在所有系列的底部显示堆栈标签,而不是在堆叠系列内的任何地方重复。
代码:
yAxis: {
allowDecimals: false,
//offset:10,
title: {
text: 'Number of fruits'
},
stackLabels: {
enabled: true,
verticalAlign: 'top',
formatter: function() {
return this.total;
},
}
},
plotOptions: {
column: {
stacking: 'normal'
},
series: {
dataLabels: {
enabled: true,
verticalAlign: 'bottom',
overflow: 'none',
crop: false,
y: 20,
formatter() {
return this.series.userOptions.stack;
}
}
}
},
series: [{
name: 'John',
data: [53, 33, 43,63,7,83],
stack: 'malssses'
}, {
name: 'Joe',
data: [33, 43,43,63,73,8],
stack: 'female'
}, {
name: 'Jane',
data: [42, 54,43,62,74,84],
stack: 'malssses',
}, {
name: 'Janet',
data: [34, 40, 42,36,74,83],
stack: 'female',
}]
重复的标签不是 stacklabels
,而是 dataLabels
。您可以仅为特定系列显示数据标签:
{
name: 'Jane',
data: [42, 54, 43, 62, 74, 84],
stack: 'malssses',
dataLabels: {
enabled: true,
verticalAlign: 'bottom',
overflow: 'none',
crop: false,
y: 20,
formatter() {
return this.series.userOptions.stack;
}
}
}, {
name: 'Janet',
data: [34, 40, 42, 36, 74, 83],
stack: 'female',
dataLabels: {
enabled: true,
verticalAlign: 'bottom',
overflow: 'none',
crop: false,
y: 20,
formatter() {
return this.series.userOptions.stack;
}
}
}
演示:https://jsfiddle.net/BlackLabel/t3sheqbu/
API: https://api.highcharts.com/highcharts/series.line.dataLabels