如何使用 highcharts 在 X 轴上为条形图 onclick 事件添加图标/svg/图像？

【问题标题】：How to add icon/svg/image on X-axis for bar graph onclick event using highcharts?如何使用 highcharts 在 X 轴上为条形图 onclick 事件添加图标/svg/图像？
【发布时间】：2020-11-09 20:36:22
【问题描述】：

我需要将选定的条形 x 轴标签颜色显示为与其他条形不同，并向该用户添加图标可以轻松识别图表中的选定条形。

我实现在单击 x 轴时更改 x 轴的标签颜色，但是 1.如何将图标/图像添加到所选栏 2.onclick bar plotoption 我还需要在 xxis 上更改颜色和图像

谁能帮我解决这个问题

请找到附加链接以供参考 https://stackblitz.com/edit/highcharts-angular-demo-6zczh1

提前致谢

【问题讨论】：

标签： angular highcharts angular2-highcharts

【解决方案1】：

您可以为标签启用useHTML 属性并在相同的选定列索引的情况下返回img 元素，例如：

    series: [{
        ...,
        point: {
            events: {
                click: function() {
                    var chart = this.series.chart;
                    chart.selectedIndex = this.x;
                    chart.redraw(false);
                }
            }
        }
    }],
    xAxis: {
        type: 'category',
        labels: {
            useHTML: true,
            formatter: function() {
                if (this.chart.selectedIndex === this.pos) {
                    return '<img src="https://www.highcharts.com/samples/graphics/sun.png" height="40" width="40">';
                }
                return this.value;
            }
        }
    }

现场演示： http://jsfiddle.net/BlackLabel/smkcd39v/

API 参考： https://api.highcharts.com/highcharts/xAxis.labels.formatter

【讨论】：

谢谢，但我想在标签下方显示图标，上面的示例替换标签
嗨@Soumya Gangamwar，好的 - 请检查这个例子：jsfiddle.net/BlackLabel/ugpceqLw