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

问题描述

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

我实现了在点击x轴上更改x轴的标签颜色，但是 1.如何将图标/图像添加到所选栏 2.onclick条形图选项我也需要在xxis上更改颜色和图像

有人可以帮我吗

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

预先感谢

解决方法

如果选择的列索引相同，则可以启用标签的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