我想将图例选项与复选框绑定（显示或不显示图例）

Question

我希望图例位于图表下方（位置：左下角），我想将图例选项与复选框绑定（显示或不显示图例）。我怎么能这样做？

打字稿：

import { Component } from '@angular/core';

@Component({
  selector: 'chart',
  templateUrl: './chart.component.html'
})

export class chartComponent {
  public chartOptions:any = {
    legend: { position: 'bottom' },
    scaleShowVerticalLines: false,
    scaleOverride: true,
    scales: {
        yAxes: [
            {
               ...............

            }
        ]
    },
    responsive: true
  };
  public chartLabels:string[] = ['a','b','c','d','e'];
  public chartType:string = 'bar';
  public chartColors:any[] = [
    {
      // 
    }
  ];
  public chartData:any[] = [
     ............
  ];

HTML：

    <div style="width:41%; height:41%">
      <div>
        <canvas baseChart
        [datasets]="chartData"
        [labels]="chartLabels"
        [options]="chartOptions"
          [legend]="chartLegend"
        [chartType]="chartType"
        [colors] =  chartColors"

        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)">
        </canvas>
      </div>
    </div>

我想在上面的代码

的图表下为复选框绑定图例

Answer 1

<div>
        <canvas baseChart
        [datasets]="chartData"
        [labels]="chartLabels"
        [options]="chartOptions"
          [legend]="checkboxChecked"
        [chartType]="chartType"
        [colors] =  chartColors"

        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)">
        </canvas>
      </div>

您将有一个复选框

<input   type="checkbox" [(ngModel)]="checkboxChecked" /><br>

说明：

初始化checkboxChecked：boolean = false;在您的组件类中。

如果点击该复选框，checkboxChecked将变为true，您的图例就会显示。

[图例] ng2-charts的属性是一个布尔变量，根据文档如下所示，

<强> Source