gpt4 book ai didi

javascript - highcharts xrange 标签是否只能在适合框时才显示?

转载 作者:行者123 更新时间:2023-12-03 01:03:21 25 4
gpt4 key购买 nike

我想创建一个 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();
}
}
});
}
}

现场演示:http://jsfiddle.net/BlackLabel/k4swecd6/

关于javascript - highcharts xrange 标签是否只能在适合框时才显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52518553/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com