highcharts - Highcharts JS v3.0.10 的 allowOverlap 属性
问题描述
在我的项目中,我们使用的是 highchart 版本:Highcharts JS v3.0.10。
allowOverlap = false
根据较新版本,什么应该是适合的等效代码或属性?
如何alloOverlap= false
在旧版本中实现?
链接:https ://api.highcharts.com/highcharts/series.timeline.dataLabels.allowOverlap
解决方案
负责隐藏重叠数据标签的代码当前位于 Highcharts 核心:https ://code.highcharts.com/highcharts.src.js ,但之前它是一个单独的模块:https ://code.highcharts.com /5/modules/overlapping-datalabels.src.js
但是,要使其正常工作,您必须对代码进行许多更改。我认为使用下面的插件将是您的最佳解决方案:
(function(H) {
var each = H.each,
extend = H.extend;
/**
* Hide overlapping labels. Labels are moved and faded in and out on zoom to provide a smooth
* visual imression.
*/
H.Series.prototype.hideOverlappingDataLabels = function() {
var points = this.points,
len = points.length,
i,
j,
label1,
label2,
intersectRect = function(pos1, pos2, size1, size2) {
return !(
pos2.x > pos1.x + size1.width ||
pos2.x + size2.width < pos1.x ||
pos2.y > pos1.y + size1.height ||
pos2.y + size2.height < pos1.y
);
};
// Mark with initial opacity
each(points, function(point, label) {
label = point.dataLabel;
if (label) {
label.oldOpacity = label.opacity;
label.newOpacity = 1;
}
});
// Detect overlapping labels
for (i = 0; i < len - 1; ++i) {
label1 = points[i].dataLabel;
for (j = i + 1; j < len; ++j) {
label2 = points[j].dataLabel;
if (label1 && label2 && label1.newOpacity !== 0 && label2.newOpacity !== 0 &&
intersectRect(label1.alignAttr, label2.alignAttr, label1, label2)) {
(points[i].labelrank < points[j].labelrank ? label1 : label2).newOpacity = 0;
}
}
}
// Hide or show
each(points, function(point, label) {
label = point.dataLabel;
if (label) {
if (label.oldOpacity !== label.newOpacity) {
label[label.isOld ? 'animate' : 'attr'](extend({
opacity: label.newOpacity
}, label.alignAttr));
}
label.isOld = true;
}
});
};
H.wrap(H.Series.prototype, 'drawDataLabels', function(proceed) {
proceed.call(this);
this.hideOverlappingDataLabels();
});
}(Highcharts));
现场演示:http: //jsfiddle.net/BlackLabel/6s5ycrwa/
推荐阅读
- sql - sql teradata 过滤日期 - 数据库版本 Teradata 15.10.06.02 和提供程序版本 Teradata.Net 15.11.0.0
- angular - 延迟加载模块中的命名插座(角度 6.0.5)
- r - 如何使用ggplot制作虚线和图例
- python - Python:使用 OpenCV 进行字母修复以进行文本识别
- amazon-web-services - 从 Hyperledger 模板创建 CloudFormation 堆栈时 CREATE_FAILED
- php - MySQL 错误 mysqli::__construct(): (HY000/2002): Connection denied
- excel - 如何从另一张纸上的数据透视表中 COUNTIF "=#N/A"?
- javascript - Appium 如何检查 iOS 应用的 UI 以显示视图层次结构?
- jquery - 选择离被点击元素最近的类
- vba - Ms-Access to Excel Late Binging VBA