如何使用highcharts在X轴上添加条形图onclick事件的图标/svg/图像? [英] How to add icon/svg/image on X-axis for bar graph onclick event using highcharts?

问题描述

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

I need to show selected bar x-axis label color as different to other bar as well as add icon to that user can easily identifies that selected bar in graph.

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

I achieve to change a label color of x-axis on click x-axis but 1.how to add icon/image to the selected bar 2.onclick bar plotoption also I need to change color and image on xxis

有人可以帮我吗

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

Please find attached link for reference https://stackblitz.com/edit/highcharts-angular-demo-6zczh1

预先感谢

推荐答案

如果选择的列相同，则可以启用标签的 useHTML 属性，并返回 img 元素索引，例如:

You can enable the useHTML propety for labels and return img element in case of the same selected column index, for example:

    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

这篇关于如何使用highcharts在X轴上添加条形图onclick事件的图标/svg/图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！