重绘Highcharts后更改SVG

我试图专门针对第一个和最后一个x轴标签，它们是文本元素，并改变它们的属性

在本期的前言中，我试图将第一个和最后一个x轴标签保持在Highcharts容器的范围内。不幸的是，它们在UI中被切断了

这是我的配置：

        xAxis: [{
            type: 'datetime',
            showFirstLabel: true, 
            showLastLabel: true, 
            labels: { 
                step: 3,
            formatter: function(){
                return options.labels[this.value];
            },
                style: {
                    fontSize: '10px',
                    color: '#9c9c9c'
                },
                // x: 5,
                y: 10
            },
            startOnTick: true,
            // lineColor: 'transparent',
            tickLength: 0,
            minPadding: 0,
            maxPadding: 0
        }],

我意识到是

步骤

键导致了这种情况。否则，我将能够使用

溢出：justify

，但我需要这个步骤。因此，我决定改变SVG可能是一个好的解决方案。它在第一次加载图表时起作用，但在重新绘制时不起作用

这是我的“加载”解决方案，我想在“重画”上复制它：

Highcharts.Chart.prototype.callbacks.push(function(chart){
    $('.highcharts-axis-labels.highcharts-xaxis-labels text').first().attr('x', 25);
    $('.highcharts-axis-labels.highcharts-xaxis-labels text').last().attr('x', 813);
});

您应该在图表的选项中进行配置。这样更干净：

function moveLabels(){
    $('.highcharts-axis-labels.highcharts-xaxis-labels text').first().attr('x', 25);
    $('.highcharts-axis-labels.highcharts-xaxis-labels text').last().attr('x', 813);
}

$('#container').highcharts({
    chart: {
        events: {
            load: moveLabels
            redraw: moveLabels
           }
        }
    },
    ...

---

当图表对象完成加载和呈现时，将执行回调函数。在图表重画时不需要它。参考这个：很好的建议。不幸的是，它似乎仍然不起作用。当我在moveLabels函数中记录“x”属性时，它肯定已经改变了。但是，同时，我可以清楚地看到y轴标签（第一个和最后一个）橡胶带，就好像我“重画”时，第一个标签的“x”属性恢复为“10”，最后一个标签的“765.0769230769231”。在实现此更改后重申，“加载”工作正常。@ConAntonakos，您能编写一个示例JSFIDLE或Plnkr吗？