highcharts dataLabel溢出：证明问题答案

【问题标题】：highcharts dataLabel overflow: justify issuehighcharts dataLabel溢出：证明问题
【发布时间】：2017-07-07 14:36:07
【问题描述】：

我已经从 highcharts 3.0.5 升级到了 3.0.7，随之而来的是 dataLabels overflow:justify 属性，该属性设置为证明 dataLabels 的合理性（例如，请参阅 this fiddle）。这只会将图表之外的标签滑入条形图，但颜色不会改变，并且似乎没有更改颜色的选项。是否有 A) 有什么方法可以强制标签出现在条形旁边并重新调整条形的大小，或者 B) 有什么方法可以在 overflow: justify 开始播放时更改颜色？

立即想到的唯一“修复”是提供一些 maxPadding，但这感觉有点 hacky。

【问题讨论】：

标签： highcharts

【解决方案1】：

您可以使用该属性

overflow: 'none',
crop: false

这里是 API reference

希望对你有帮助

【讨论】：

对，当你这样做时，标签可以扩展到表格的边界之外。我目前的解决方案是让图表证明合理，然后为标签提供背景颜色。我可能会在背景上加一个边框以使其更显眼，但我没有这样做。
最好最简单的答案，但是属性颠倒了。他们应该是overflow: 'none', crop: false。

【解决方案2】：

我遇到了同样的事情，并想出了一个似乎适用于我的场景的解决方案。

渲染图表后，我会查看已右对齐的数据标签系列，然后使用 jQuery 将它们更改为白色。

// snipped: rendering the chart


var chart = $('#chartContainer').highcharts(),   
    labels = $('#chartContainer').find(".highcharts-data-labels tspan"),
    indexesNeedingWhite = [];

$.each(chart.series[0].data, function (index, data) {
    if (data.dataLabel.alignOptions.align === "right") {
        indexesNeedingWhite.push(index);
    }
});

// find the exact text label within this container
// and change the fill to white
$.each(indexesNeedingWhite, function (i, index) {
    $(labels[index]).css('fill', 'white');
});

【讨论】：