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

Question

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

示例：

现在，文本长度因图表而异。文本框的位置不能设置为常量，需要动态生成。这就是我被困的地方。左边的文本框没有问题，它的起始y坐标可以设置为一个常量，而它的x坐标可以通过图表高度来计算。

另一方面，右边的文本框有问题。它的起始 y 坐标可以像其他文本框一样设置。但它的起始 x 坐标需要计算，具体取决于文本的长度，理想情况下，文本末尾与 chart/rectangle 右边框之间的间隙始终相同。

有一个 JSFiddle here（它只是 Highcharts 演示之一的最小扩展 fiddle（感谢 Torstein Hø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.chartWidth-250, this.chartHeight-7)
            .css({
                color: 'red',
            fontSize: '8pt',
            font: 'Arial, sans-serif'
        })
        .attr({
                zIndex: 3
        })
        .add();
});

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

Answer 1

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

为了获得更好的结果，请在 x 上使用相同的值 10，如下所示

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.', 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.chartWidth - 10, this.chartHeight - 7)
    .css({
      color: 'red',
      fontSize: '8pt',
      font: 'Arial, 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>

Answer 2

您还可以在 (0, this.chartHeight - 7) 位置呈现此文本，稍后，在呈现文本并且已知文本宽度后，您可以使用 translate 图表宽度和文本宽度之间差异的函数。

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

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

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

How can a text box be bound dynamically to the right border of a chart created with Highcharts?

javascript

renderer

highcharts