用于大值的Highcharts粘性标签超出了图表范围

Question

我有两个问题要求帮助，

1. 对于高级图表存在问题，看起来需要对图表进行一些计算，但无法确定实际情况。

请查看此Fiddle，此处右侧的标签$500位于正确的位置即可，但是当值大/大时，请说{{1然后是 图表标签超出图表。现在看看这个小提琴

Fiddle having Issue

错误：



应该发生的是$555555555555应该只在图表中，与第一个小提琴中的位置相同。

我尝试了什么。

使用+ 30

添加/减去字符串的长度（$555555555555）

point.y

但是当{0}再次从var chart = new Highcharts.Chart({ ... .... /*********RIGHT SIDE CPM*******************/ var point = chart.series[0].data[7]; var text = chart.renderer.text( '$'+point.y, point.plotX + chart.plotLeft - 30, // point.plotX + chart.plotLeft - ( ((point.y).toString().length) + 30 ), //My change ... }); 更改为point.plotX + chart.plotLeft - ( ((point.y).toString().length) + 30 ),时，此$555555555555不支持

所以基本上，当标签的长度很大/很小时，位置不应该变化。

我的下一个问题，该图表从两侧的小位移开始。 看看下面的图片



正如你可以看到两条红线之间的差距，在图像的两个角落，我需要删除它，这可能是一个填充问题，但我无法弄明白。

请帮助我解决这两个问题。

感谢您提前帮助。

Answer 1

问题：对齐渲染文字

因此，通过阅读您的代码，我认为您正在尝试根据内容的长度调整文本和框的位置。这里的问题是你有一个具有可变宽度字符的字体，同时减去每个字符的常量值。此外，renderer.text方法始终位于左下角，这对您不利。

我在这里要做的是利用text.getBBox知道文本Element的确切边界框。你或许可以让它看起来更好一点，但这是一个粗略的例子：

/*********RIGHT SIDE CPM*******************/

var point = chart.series[0].data[7];
// Draw dummy text, just to get bounding box
var text = chart.renderer.text('$'+point.y, 0, 0)
    .attr({
        zIndex: 5
    }).add();
// Get bounding box
var box = text.getBBox();
// Destroy dummy text
text.destroy();

// Draw actual text based on bounding box
text = chart.renderer.text(
        '$'+point.y, 
        point.plotX + chart.plotLeft - box.width + 2 ,
        point.plotY + chart.plotTop - 10
    ).attr({
        zIndex: 5
    }).add();

// Get actual box
box = text.getBBox();
// Draw actual box
chart.renderer.rect(box.x - 5, box.y - 5, box.width + 10, box.height + 10, 5)
    .attr({
        fill: '#FFFFEF',
        stroke: 'gray',
        'stroke-width': 1,
        zIndex: 4
    })
    .add();

并且a JFiddle example（我只是为了修复你的右侧CPM而烦恼，但你明白了。）

问题：图表侧面的间距

将x轴的min和max设置为特定值，如the JFiddle example所示，代码为：

xAxis: {
    ...,
    min: 1,
    max: 8
}