我想创建一个 Highcharts xrange 图表,其中仅显示适合框/范围的数据标签。这可能吗?
目前,标签不会重叠,但在不适合时会显示在框外。
我尝试使用 xrange.dataLabels 选项,例如“allowOverlap”、“clip”、“inside”或“padding”,但它们似乎不是为了执行此操作而创建的。
示例如下所示:http://jsfiddle.net/mdomnita/dfLw7j1c/1/
Highcharts.chart('container', {
chart: {
type: 'xrange'
},
title: {
text: 'Highcharts X-range'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
categories: ['Idea','Prototyping'],
reversed: true
},
series: [{
name: 'Project 1',
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0
}, {
x: Date.UTC(2014, 11, 10),
x2: Date.UTC(2014, 11, 11),
y: 1
}, {
x: Date.UTC(2014, 11, 11),
x2: Date.UTC(2014, 11, 12),
y: 1
}],
dataLabels: {
enabled: true,
formatter: function () {
return 'This is a label that should only be shown if it fits the box'
},
}
}]
});
谢谢
最佳答案
您可以轻松实现所需的行为,例如在 render
事件中,通过以下方式:
events: {
render: function() {
var points = this.series[0].points;
Highcharts.each(points, function(point) {
var label = point.dataLabel;
if (point.shapeArgs.width < label.width) {
if (label.visibility !== 'hidden') {
label.hide();
}
} else {
if (label.visibility === 'hidden') {
label.show();
}
}
});
}
}
关于javascript - highcharts xrange 标签是否只能在适合框时才显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52518553/