Javascript Highcharts缩放后是否有方法调整绘图栏的大小？

当图表呈现时，我正在执行类似的操作来调整plotband的大小：

  var _Chart = new Highcharts.Chart( options, function ( chart ) {
     for ( var i = 0; i < chart.xAxis[0].plotLinesAndBands.length; i++ ) {
         var band = chart.xAxis[0].plotLinesAndBands[i].svgElem, path = band.d.split(' ');

         var bottomString = chart.xAxis[0].plotLinesAndBands[i].options.iMBottom + '';
         var topString = chart.xAxis[0].plotLinesAndBands[i].options.iMTop + '';

         path[2] = bottomString;
         path[path.length - 1] = bottomString;

         path[5] = topString;
         path[7] = topString;

         band.attr('d', path);
      }
  });

var\u Chart=newhighcharts.Chart（选项，函数，图表）{
对于（var i=0；i

这允许我设置图表Y轴的顶部和底部。我们在同一图表中显示多个Y轴，它们之间有一些填充，每个轴可能有自己的绘图带。我不想让它们溢出到另一个轴上，因为它们看起来像更小的单个图表。我还将更改悬停格式设置器，以便在标注栏中的某个点悬停在其上方时显示这些标注栏的工具提示

我遇到的问题是，如果单击、拖动以缩放PlotBand，它们将恢复到它们在整个图表中所处的状态。我编写了一些代码来删除它们并将它们添加回，但在实际添加和呈现SVG数组之前，似乎需要对addPlotBand函数进行回调以更改SVG数组。我尝试重新添加它，然后尝试重新绘制它，但没有成功

在添加新的plotband时，是否有办法调整SVG元素，以便修改SVG元素

编辑：

这里有更多的信息。我尝试使用selection事件删除所有波段，然后调用redraw，这将调用一个自定义redraw事件来恢复SVG值。下面是它的外观（select事件首先有点粗糙，但它可以工作）：

选择图表：功能（图表）{
var plotBandData=新数组（）；
对于（var i=0；i

然后，我的重画事件如下所示：

    RedrawChart: function (chart){
    //SVG Code:
    for (var i = 0; i < chart.xAxis[0].plotLinesAndBands.length; i++) {
        var band = chart.xAxis[0].plotLinesAndBands[i].svgElem, path = band.d.split(' ');
        var bottomString = chart.xAxis[0].plotLinesAndBands[i].options.iMBottom + '';
        var topString = chart.xAxis[0].plotLinesAndBands[i].options.iMTop + '';

        path[2] = bottomString;
        path[path.length - 1] = bottomString;

        /*JH: this is interesting, the second value for top is typically in the 8th spot in the array
            However, before it's rendered the two right most "L"s are removed shifting everything to the left.
            an example would be:

            After render:
            M 525 100 L 525 100 L 525 50 L 707 50 L 707 100

            Before render (which is the state it's in here):
            M 525 100 L 525 100 L 525 50 707 50 707 100

            So you can see that the 8th value after render which is second top is shifted over one space.
            The last value which is the second bottom is shifted over 2 spaces.
        */
        path[5] = topString;
        path[7] = topString;

        band.attr('d', path);
    }
},

function() {return PureSense.Clifford.IM.Charting.AfterChartSetExteremes(this);}

重画图表：函数（图表）{
//SVG代码：
对于（var i=0；i

在重画结束时，我的SVG值是正确的，但是，高度仍然渲染到图表的完整高度

编辑：

现在，如果仅将“缩放”拉伸中可见的绘图条带放大到图表的全高。重置缩放后，所有其他打印标注栏的大小都正确。然后，如果我选择了一个没有带区的图表区域，然后单击“缩小”，则所有图表带区都是正确的。似乎只与select上可见的PlotBand有关。

以下是有效的方法：

我创建了一个新方法，该方法在X轴afterSetExtremes（）方法上启动（我想如果您在y轴上执行此操作，您会在那里启动它）。我基本上只是从上述两种方法中提取代码，并将其全部插入其中。下面是从xAxis.afterSetExtremes（）事件触发的代码：

这很有效。放大或重置缩放后，所有打印标注栏都会调整大小。实际上，我在我的第一篇文章中使用了这些方法，一路浏览了highcharts代码。我看到SVG值设置正确，并一直保持不变。但在重画之外发生了一些事情，我没能抓住

但我知道会发生这种情况，因为如果您查看我的注释，“d”数组比页面上的SVG元素少了两项（如果您使用F12开发工具查看它）。afterSetExtreme事件在重画和缩放发生后激发。我认为在重画期间写入这些值会导致在缩放结束时覆盖这些值

希望这对其他人有帮助。

没有

    AfterChartSetExteremes: function (xAxis) {

    var plotBandData = new Array();

    for (var i = 0; i < xAxis.plotLinesAndBands.length; i++) {

        //get all the plot band info so we can recreate them after resize
        var plotBand = xAxis.plotLinesAndBands[i];

        var pbd = {
            from: plotBand.options.from,
            to: plotBand.options.to,
            id: plotBand.options.id,
            bottom: plotBand.options.iMBottom,
            top: plotBand.options.iMTop,
            color: plotBand.options.color
        };

        plotBandData.push(pbd);

    }

    //delete all existing plot bands:
    for (var x = 0; x < plotBandData.length; x++) {
        xAxis.removePlotBand(plotBandData[x].id);
    }

    for (var y = 0; y < plotBandData.length; y++) {
        //Add plotband back in
        xAxis.addPlotBand({
            from: plotBandData[y].from,
            to: plotBandData[y].to,
            color: plotBandData[y].color,
            id: plotBandData[y].id,
            iMBottom: plotBandData[y].bottom,
            iMTop: plotBandData[y].top
        });

    }

    $.each(xAxis.plotLinesAndBands, function (i, pband) {
        if (this.svgElem !== undefined) {
            var band = this.svgElem;
            path = band.d.split(' ');
            var bottomString = this.options.iMBottom + '';
            var topString = this.options.iMTop + '';

            path[2] = bottomString;
            path[path.length - 1] = bottomString;

            /*JH: this is interesting, the second value for top is typically in the 8th spot in the array
                However, before it's rendered the two right most "L"s are removed shifting everything to the left.
                an example would be:

                After render:
                M 525 100 L 525 100 L 525 50 L 707 50 L 707 100

                Before render (which is the state it's in here):
                M 525 100 L 525 100 L 525 50 707 50 707 100

                So you can see that the 8th value after render which is second top is shifted over one space.
                The last value which is the second bottom is shifted over 2 spaces.
            */
            path[5] = topString;
            path[7] = topString;

            this.svgElem.attr('d', path);
        }
    });

    //Need to reset formatter here?
}

function() {return PureSense.Clifford.IM.Charting.AfterChartSetExteremes(this);}