Highcharts 单击添加plotBand时图表显示错误的X轴类别

即使主图表容器的宽度没有改变，尝试通过添加绘图带来高亮显示选定列时，xAxis类别也会更新，因为它被放置在宽度较小的容器中

我已经在一些浏览器上进行了测试，使用了不同的宽度。这是一个相当孤立的案例，看起来像是一个真正的bug。不知道是否有一个工作围绕它

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
        type: 'category',
        categories: ["Week 38", "Week 39", "Week 40", "Week 41", "Week 42", "Week 43", "Week 44", "Week 45", "Week 46", "Week 47", "Week 48", "Week 49", "Week 50", "Week 51", "Week 52", "Week 1", "Week 2", "Week 3", "Week 4", "Week 5", "Week 6", "Week 7", "Week 8", "Week 9", "Week 10", "Week 11", "Week 12", "Week 13", "Week 14", "Week 15", "Week 16", "Week 17", "Week 18", "Week 19", "Week 20", "Week 21", "Week 22", "Week 23", "Week 24", "Week 25", "Week 26", "Week 27", "Week 28", "Week 29", "Week 30", "Week 31", "Week 32", "Week 33", "Week 34", "Week 35", "Week 36", "Week 37"] 
        },
        legend: {enabled:false},
        plotOptions:{
        column: {
          stacking: 'normal', 
        },
        series: {
            point: {
            events: {
                click: function () {
                                moveBand(this.index);
                                  }
            }
          }
        }
        },  
        tooltip: {

            color: '#ffffff',
            backgroundColor: '#ffffff',
            borderColor: '#ffffff', 
            borderRadius:0,
            shadow:false,
            borderWidth:0,
            style: {
                padding: 12,
                fontSize: '16px', 
            }, 
            shape:'square', 
            shared: true 
        }, 
        series:  [{
            "data": dataMore,
            "name": "Data for more"
        }, {
            "data": dataLow,
            "name": "Data for low"
        }, {
            "data": dataNone,
            "name": "Data for none"
        }]
    });

    function moveBand(a) {
        var chart = $('#container').highcharts();
        chart.xAxis[0].update({plotBands:[{color: 'red',from:a- 0.5,to:a+0.5}]});
    }    
});

第1步->打开JSFIDLE后，放大图表区域，使其宽度约为1100px，然后再次运行代码。你应该能够看到52周，从“第38周”到“第37周”

第2步->单击要高亮显示的列

结果->某些类别消失

如果所有类别都能在图表的第一次渲染中匹配，我希望即使在栏后添加了plotBand，它也能保持这些类别

---

PS：如果有一种方法可以在单击时高亮显示叠层柱，而不添加绘图带，则欢迎所有建议，因为我已经尝试了所有方法。

您可以通过更改边框颜色来高亮显示叠层柱。使用此解决方案，它看起来更好，类别也相同

代码：

演示：

API参考：

编辑

另一个解决方案是使用交叉线的逻辑

代码：

演示：

---

谢谢你，我已经试过了，但是对于我现在的布局来说，这不是一个好的选择，因为它不够明显，以至于某个列被选中了。如果我们能利用十字线让它在点击时可见那就太好了。你说十字线在点击时可见是什么意思？如果可以的话，你是如何看待它的？也许更改所选列的颜色比更改其边框更好？谢谢您的建议，但希望更改所选列的背景。例如：单击而不是悬停。有没有办法为其禁用悬停事件并绑定单击事件？

series: {
  point: {
    events: {
      click: function() {
        var point = this,
          chart = point.series.chart;

        if (chart.highlightedPointIndex) {
          changeBorderColor(
            chart.highlightedPointIndex, chart, '#fff');
        }

        changeBorderColor(point.index, chart, 'red');
        chart.highlightedPointIndex = point.index;
      }
    }
  }
}
...

function changeBorderColor(index, chart, color) {
  chart.series.forEach(function(series) {
    series.points[index].graphic.css({
      stroke: color
    });
  });
}

plotOptions: {
  column: {
    point: {
      events: {
        click: function(e) {
          var point = this,
            chart = point.series.chart,
            xAxis = point.series.xAxis,
            color = 'pink',
            path,
            cross;

          if (!chart.customCrosshair) {
            chart.customCrosshair = [];
          } else {
            chart.customCrosshair[0].destroy();
            chart.customCrosshair.length = 0;
          }

          path = xAxis.getPlotLinePath({
            translatedValue: point.plotX
          }) || null;

          cross = chart.renderer
            .path()
            .attr({
              zIndex: 2
            })
            .add();

          cross.attr({
            stroke: color,
            'stroke-width': xAxis.transA
          }).css({
            'pointer-events': 'none'
          });

          cross.show().attr({
            d: path
          });

          chart.customCrosshair.push(cross);
        }
      }
    }
  }
}