Angular highcharts 在条形图中显示选定的条形

Question

我正在使用 highcharts 和 angular。

我包含的包裹

"highcharts": "^8.0.4",
"highcharts-angular": "^2.4.0"

ts 中的导入

import * as Highcharts from "highcharts";

HTML 上的标记

<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions">
</highcharts-chart>

这就是我设置 chartOptions 的方式

private _setChartData(): void {
    let _seriesData: Highcharts.PointOptionsObject[];
    let _categories: any[];
    _seriesData = this._getSeriesData();
    _categories = _seriesData.map((_series) => _series.name);


    this.chartOptions = {
        chart: {
            type: "column"
        },
        title: {
            style: { display: "none" }
        },
        credits: {
            enabled: false
        },
        xAxis: {
            crosshair: true,
            categories: _categories
        },
        yAxis: {
            min: 0,
            title: {
                text: "Production Count"
            }
        },
        tooltip: {
            headerFormat: `<span style="font-size:10px">{point.key}</span><table>`,
            pointFormat: `<tr>
                            <td style="padding:0"><b>{point.y}</b></td>
                          </tr>`,
            footerFormat: "</table>",
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            showInLegend: false, data: _seriesData, type: "column",
            events: { click: (data: any) => this._chartEventHandler(data.point.options) }
        }]
    };
}

这是_getSeriesData数据

private _getSeriesData(): Highcharts.PointOptionsObject[] {
    const data = getData();
    const _seriesData: Highcharts.PointOptionsObject[] = [];
    data.forEach((_group, index: number) => {
        _seriesData.push({
            name: _group.name || "Unknown",
            y: _group.count,
            // selected : index === 1 ? true : false
        });
    });
    return _seriesData;
}

这工作正常。

我想突出显示从hover开始的选择栏。

有办法将栏标记为选中，但它只是将栏颜色更改为灰色，我想要突出显示效果。

有没有办法做到这一点？

Answer 1

启用allowPointSelect选项并在states.select中使用brightness属性：

  plotOptions: {
    column: {
      ...,
      allowPointSelect: true,
      states: {
        select: {
          color: '',
          brightness: 0.1
        }
      }
    }
  }

---

现场演示： http://jsfiddle.net/BlackLabel/6m4e8x0y/5008/

API 参考资料：

https://api.highcharts.com/highcharts/series.column.states.select

https://api.highcharts.com/highcharts/series.column.allowPointSelect