javascript - 只有在适合框的情况下才能显示 highcharts xrange 标签?
问题描述
我想创建一个 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/
推荐阅读
- java - 使用 JSON 文件的用户登录
- javascript - Chart.js 和 JSON 数据没有图表显示
- python - 将 .txt 文件附加到数据框会在从循环读取的第一列后填充 NaN
- excel - Excel从具有偏移量的列中提取值
- r - 沿路线从 A 到 B 再到 B 到 A 的车辆动画(在 B 处有一些等待时间)
- c++ - C ++中的条件变量问题
- javascript - 此 Rock–Paper–Scissors 游戏中的事件侦听器无法选择正确的数组值
- java - 在 Android Studio 中找不到选择 Embedded JDK 选项
- machine-learning - StandardScaler , OneHotEncoder 在以不同顺序使用时显示不同的分数
- epub - 带有 kable_styling 的 epub 格式失败