调整大小时，xaxis 上的最后一个标签消失

Question

我试图强制 highcharts 在启用“step”时在 x 轴上显示最后一个标签。下面的代码有效，但是当我更改设备宽度时它隐藏了最后一个标签（假设打开 chrome 控制台）。当我在图表后向下滚动时，移动设备出现问题，最后一个标签消失了。

   chart:
   {
        renderTo: "container",
        type: "line",
        events:{
             load:function(){
                 var ticks = $.map(this.axes[0].ticks, function(t){return t;});
                   ticks[ticks.length-2].render(0);
            }
         }
    }

Answer 1

首先，由于您在 load 事件中的逻辑，最后一个标签 2020 出现了。理想情况下，该标签不应出现，因为您的步长值为 3。无论如何，您需要在 redraw 事件中添加与 load 相同的逻辑，以获取调整大小的最后一个标签。

const df = [
  { Period: 2009, value: 1056043 },
  { Period: 2010, value: 1278495 },
  { Period: 2011, value: 1482508 },
  { Period: 2012, value: 1545703 },
  { Period: 2013, value: 1579593 },
  { Period: 2014, value: 1620531.9 },
  { Period: 2015, value: 1502572.2 },
  { Period: 2016, value: 1451010.7 },
  { Period: 2017, value: 1546273 },
  { Period: 2018, value: 1663982.3 },
  { Period: 2019, value: 1643160.9 },
  { Period: 2020, value: 1431638.4 }
];

var chart = new Highcharts.Chart({
  chart: {
    renderTo: "container",
    height: 300,
    type: "areaspline",
    events: {
      load: function () {
        var ticks = $.map(this.axes[0].ticks, function (t) {
          return t;
        });
        ticks[ticks.length - 2].render(0);
      },
      redraw: function () {
        var ticks = $.map(this.axes[0].ticks, function (t) {
          return t;
        });
        ticks[ticks.length - 2].render(0);
      }
    }
  },
  title: {
    text: "Emissions of CO2 - from Fossil Fuels - Total (CDIAC)"
  },
  xAxis: {
    categories: df.map((o) => o.Period),
    labels: {
      step: 3,
      style: {
        fontFamily: "Arial, Helvetica, sans-serif;",
        fontSize: "0.8rem",
        fontWeight: "600",
        background: "#000000",
        whiteSpace: "nowrap",
        textOverflow: "none"
      }
    },
    showLastLabel: true,
    endOnTick: true,
    overflow: "allow"
  },
  yAxis: {
    min: 0
  },
  series: [
    {
      data: df.map((o) => o.value),
      name: "Germany"
    }
  ]
});

调整大小时，xaxis 上的最后一个标签消失

Last label on xaxis disappears when resize

javascript

highcharts