Angular highcharts在柱状图中显示选定的柱状图。

Question

我使用的是highcharts与angular。

我所包含的包

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

津巴布韦的进口

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;
}

这很好用。

我想... 重点 栏，因为它显示的是在日 悬停.

有一种方法可以将栏杆标记为 选定 但它只是将条形图的颜色改为灰色，我想要高光效果。

有什么办法可以做到这一点吗？

Answer 1

启用 allowPointSelect 选项并使用 brightness 财产 states.select:

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

---

现场演示。 http：/jsfiddle.netBlackLabel6m4e8x0y5008

API参考。

https:/api.Highcharts.comhighchartsseries.column.states.select

https:/api.highcharts.comhighchartsseries.column.allowPointSelect。