问题

问题是当屏幕缩小时，图表下面的图标会被移除，但这并不是期望的行为。我还尝试了设置zoomEnabled: false，先前已经注册了zoomType: 'xy'，但没有帮助。我还尝试了更改labels: overflow: "allow", padding: 1，同样没有改变。只有减小图标的大小才有帮助，但为了防止它们消失，你需要将它们减小得很多。

如何确保图标在小屏幕上不会消失，或者至少只隐藏图表中缺少的那些（取消对X轴的适应）？

初始化示例代码（我已注释掉我的假设）：

chart1 = new Highcharts.Chart({
     chart: {
        type: 'column',
        //zoomType: 'xy',
     },
     title: {
        text: 'Title'
     },
     xAxis: {
           categories: $.map(months, function (item) {
               return item;
           }),
           labels: {
               useHTML: true,
               //overflow: "allow",
               //padding: 1,
               formatter: function() {
                 let icons = $.map(months, function (item) {
                     let icon = counter;
                     arrayIcon[item] = '<img src="icon_' + item + '.png" height="20">'
                 });

                 let objIcons = Object.assign({}, arrayIcon);
                 return objIcons[this.value];
                },
           },
           //zoomEnabled: false
       },
     yAxis: {
        title: {
           text: 'Sub-title'
        }
     },
     plotOptions: {
            column: {
              states: {
                inactive: {
                    enabled: false
                }
              }
            }
         },
     series: [{
        name: 'Dev #1',
        data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
     }, {
        name: 'Dev #2',
        data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
     }]
    });

在图像中，当屏幕缩小时会发生什么

chart1 = new Highcharts.Chart({
chart: {
type: 'column',
//zoomType: 'xy',
},
title: {
text: 'Title'
},
xAxis: {
categories: $.map(months, function (item) {
return item;
}),
labels: {
useHTML: true,
//overflow: "allow",
//padding: 1,
fotmatter: function() {
let icons = $.map(months, function (item) {
let icon = counter;
arrayIcon[item] = '<img src="icon_' + item + '.png" height="20">'
});
let objIcons = Object.assign({}, arrayIcon);
return objIcons[this.value];
},
},
//zoomEnabled: false
},
yAxis: {
title: {
text: 'Sub-title'
}
},
plotOptions: {
column: {
states: {
inactive: {
enabled: false
}
}
}
},
series: [{
name: 'Dev #1',
data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
}, {
name: 'Dev #2',
data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
}]
});

答案1

得分: 1

标签在调整图表大小时消失的原因是刻度的数量发生了变化。

始终保持固定刻度数量的解决方案是通过 xAxis.tickPositions 或设置 xAxis.tickInterval 来设置它们的位置。

还可以通过在 labels.formatter() 中使用自定义代码，在没有数据时移除标签。这可能与 responsive.rules 结合使用，可以根据屏幕大小设置图表选项的条件。

以下是示例配置：

Highcharts.chart('container', {
  xAxis: {
    tickInterval: 1,
    tickLength: 0,
    labels: {
      overflow: 'allow',
      autoRotation: false,
      useHTML: true,
      formatter: function() {
        return '<img src="' + img_path + '" style="width:20px; height:20px;" />';
      }
    }
  },
  series: [{
    type: 'column',
    data: [1, null, 3, 4]
  }],

  responsive: {
    rules: [{
      condition: {
        maxWidth: 200
      },
      chartOptions: {
        xAxis: {
          labels: {
            formatter: function() {
              let txt = '';
              this.chart.series.forEach(series => {
                series.points.forEach(point => {
                  if (point.y === 0 || point.y === null) {
                    if (point.x === this.pos) {
                      return
                    } else {
                      txt += '<img src="' + img_path + '" style="width:20px; height:20px;" />';
                    }
                  }
                })
              })
              return txt
            }
          }
        }
      }
    }]
  }
});

演示:
https://jsfiddle.net/BlackLabel/ctuL67an/

API 参考:
https://api.highcharts.com/highcharts/xAxis.tickInterval
https://api.highcharts.com/highcharts/xAxis.labels.formatter
https://api.highcharts.com/highcharts/responsive.rules

Highcharts.chart('container', {
xAxis: {
tickInterval: 1,
tickLength: 0,
labels: {
overflow: 'allow',
autoRotation: false,
useHTML: true,
formatter: function() {
return '<img src="' + img_path + '" style=" width:20px; height:20px;" />';
}
}
},
series: [{
type: 'column',
data: [1, null, 3, 4]
}],
responsive: {
rules: [{
condition: {
maxWidth: 200
},
chartOptions: {
xAxis: {
labels: {
formatter: function() {
let txt = '';
this.chart.series.forEach(series => {
series.points.forEach(point => {
if (point.y === 0 || point.y === null) {
if (point.x === this.pos) {
return
} else {
txt += '<img src="' + img_path + '" style=" width:20px; height:20px;" />';
}
}
})
})
return txt
}
}
}
}
}]
}
});