Highcharts动态突出显示一列

Posted 2021-04-27

我有一张国家图表。我不知道我的目标国家/地区在图表中的位置-这取决于数据。如何动态突出显示它，例如更改列颜色和名称颜色？例如，如果我的目标国家是葡萄牙，则如何以其他颜色显示该颜色。

https://jsfiddle.net/2vsd7knr/1/

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Monthly Average Rainfall'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: [
            'Sweden',
            'South_Korea',
            'Israel',
            'Russia',
            'Canada',
            'Portugal',
            'Turkey',
            'Iran',
            'France',
            'China',
            'Belgium',
            'Brazil'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Rainfall (mm)'
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        usehtml: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Tokyo',
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

    }]
});

答案

下面是如何找到当前点并更改其颜色的准则。

演示：https://jsfiddle.net/BlackLabel/bd8xL6m2/

  chart: {
    type: 'column',
    events: {
      render() {
        let chart = this,
          x;

        chart.series[0].points.forEach(p => {
          if (p.category === targetCountry) {
            x = p.x;
            p.graphic.element.style.fill = 'red'
          }
        })

        chart.xAxis[0].ticks[x].label.element.style.fill = 'red'
      }
    }
  },

API：https://api.highcharts.com/highcharts/chart.events.render