高图：有关单击的图例项的信息传递给控制器​​

Question

我有使用此选项的highcharts角度服务：我想知道是否可以通过某种方式将有关单击项可见性的信息传递给我的控制器。因此，我可以例如将其存储在$scope变量中。例如，在我的控制器中（该服务称为“服务”），我有变量$scope.legendItemVisibility = null;，我想存储图例中的true或false值。

plotOptions: {
    series: {
        marker: {
            enabled: false,
            symbol: 'circle',
            radius: 2
        },
        events: {
            legendItemClick: function() {

            }
        }
    }
}

Answer 1

最快的解决方案是直接在Chart对象中添加对特定组件的引用。我是通过这种方式做到的：

app.component.html

<highcharts-chart 
  [Highcharts]="Highcharts"

  [constructorType]="chartConstructor"
  [options]="chartOptions"

  (chartInstance)="addComponentRef($event)"

  style="width: 100%; height: 400px; display: block;"
></highcharts-chart>

app.component.ts

export class AppComponent {

  Highcharts = Highcharts;
  chart: any
  legendItemVisibility: boolean = true

  addComponentRef(chart: any) {
    chart.parentComponent = this
  }

  chartOptions = {
    series: [{
      data: [1,2,3],
      events: {
        legendItemClick() {
          let component = this.chart.parentComponent
          component.legendItemVisibility = !component.legendItemVisibility
        }
      }
    }]
  };
}

实时示例：