如何将文本框动态绑定到使用Highcharts创建的图表的右边界？

如何解决如何将文本框动态绑定到使用Highcharts创建的图表的右边界？

当前，我正在使用Highcharts动态创建图表。我的目标是在图表底部添加自定义页脚。当前，这是通过使用chart.renderer首先绘制一个矩形来实现的。其次，渲染器在矩形上方绘制两个文本框，该矩形在矩形内应分别向左和向右对齐。

示例：

现在，图表之间的文本长度有所不同。文本框的位置不能设置为常量，需要动态生成。这就是我被困住的地方。左边的文本框不是问题，可以将其起始y坐标设置为常数，而其x坐标可以通过图表高度来计算。

另一方面，右侧的文本框是一个问题。可以将其起始y坐标设置为类似于其他文本框。但是，根据文本的长度，需要计算其开始的x坐标，在理想情况下，文本的结尾与图表/矩形的右边界之间的间隙始终是相同的。

有一个JSFiddle here（这只是Highcharts演示之一的最简单的提琴（感谢TorsteinHønsi）。

这行代码是我需要正确计算的x坐标的地方（替换为“ this.chartWidth-250”）：

chart.renderer.text('This is some other text which varies in length.',this.chartWidth-250,this.chartHeight-7)

Highcharts.chart('container',{
        chart: {
            borderWidth: 0.75,borderColor: '#B3B3B3'
    },credits: {
                enabled: false
        },xAxis: {
        categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
    },series: [{
        data: [29.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5,216.4,194.1,95.6,54.4]
    }]

},function (chart) { // on complete

    chart.renderer.rect(0,this.chartHeight-20,this.chartWidth-1,20,1)
            .attr({
                fill: '#B3B3B3',zIndex: 2
        })
        .add();

    chart.renderer.text('This is some text.',10,this.chartHeight-7)
            .css({
                color: 'green',fontSize: '8pt',font: 'Arial,sans-serif'
        })
        .attr({
                zIndex: 3
        })
        .add();
     
    chart.renderer.text('This is some other text which varies in length.',this.chartHeight-7)
            .css({
                color: 'red',sans-serif'
        })
        .attr({
                zIndex: 3
        })
        .add();
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px;width: 400px"></div>

解决方法

尝试使用text-anchor: end属性。

为获得更好的结果，请像下面一样在10上使用相同的值x

chart.renderer.text('left',10,this.chartHeight - 7)
chart.renderer.text('right',this.chartWidth - 10,this.chartHeight - 7)

Highcharts.chart('container',{
  chart: {
    borderWidth: 0.75,borderColor: '#B3B3B3'
  },credits: {
    enabled: false
  },xAxis: {
    categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
  },series: [{
    data: [29.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5,216.4,194.1,95.6,54.4]
  }]

},function(chart) { // on complete

  chart.renderer.rect(0,this.chartHeight - 20,this.chartWidth - 1,20,1)
    .attr({
      fill: '#B3B3B3',zIndex: 2
    })
    .add();

  chart.renderer.text('This is some text.',this.chartHeight - 7)
    .css({
      color: 'green',fontSize: '8pt',font: 'Arial,sans-serif'
    })
    .attr({
      zIndex: 3
    })
    .add();

  chart.renderer.text('This is some other text which varies in length.',this.chartHeight - 7)
    .css({
      color: 'red',sans-serif'
    })
    .attr({
      'text-anchor': 'end',zIndex: 3
    })
    .add();
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px;width: 400px"></div>

,

您还可以在（0，this.chartHeight-7）位置渲染此文本，然后在渲染文本并知道文本宽度之后，可以使用translate来更改位置发挥图表宽度和文本宽度之间的差异的作用。

演示：https://jsfiddle.net/BlackLabel/4p0dL38h/

chart.bottomText = chart.renderer.text('This is some other text which varies in length.',this.chartHeight-7)
        .css({
            color: 'red',sans-serif'
    })
    .attr({
            zIndex: 3
    })
    .add();
            
chart.bottomText.translate(chart.chartWidth - chart.bottomText.getBBox().width,0)