单击添加 plotBand 时绘制错误的 xAxis 类别图表

Question

当尝试通过添加 plotBand 突出显示选定的列时（即使主图表容器的宽度没有改变），xAxis 类别会更新，因为它被放置在宽度较小的容器中。

我已经在几个不同宽度的浏览器上进行了测试。这是一个孤立的案例，看起来像是一个实际的错误。不知道是否有解决办法。


$(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}]});
    }    
});

http://jsfiddle.net/marinr/ny4q8rp0/2/

Step 1 -> 打开jsfiddle后，将图表区域放大至宽度约1100px，再次运行代码。您应该能够看到 52 周，从 'Week 38' 到 'Week 37'

第 2 步 -> 单击要突出显示的列

结果 -> 部分类别消失

如果所有类别都设法适合图表的第一次渲染，我希望即使在条形后面添加 plotBand 也能保持这些类别？

PS：如果有一种方法可以在不添加 plotBand 的情况下通过单击突出显示堆叠的列，欢迎所有建议，因为我已经尝试了所有方法。

Answer 1

您可以通过更改边框颜色来突出显示堆叠的列。有了这个解决方案，看起来更好，类别也一样。

代码：

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
    });
  });
}

演示：

http://jsfiddle.net/BlackLabel/r2fudh0t/

API参考：

https://api.highcharts.com/class-reference/Highcharts.SVGElement#css

编辑

另一个解决方案是使用十字准线的逻辑。

代码：

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);
        }
      }
    }
  }
}

演示：

http://jsfiddle.net/BlackLabel/5fze2wmh/

单击添加 plotBand 时绘制错误的 xAxis 类别图表

Chart wrong xAxis categories when adding a plotBand on click

highlight

categories

bar-chart

highcharts