在ng2图表中自定义图例形状

时间:2019-05-08 09:41:27

标签: angular charts ng2-charts

我正在Pie Chart中研究ng2-charts。我正在尝试自定义图例的默认形状。我可以更改图例的位置,但是可以更改形状吗?它具有任何内置属性还是我们必须自定义?

HTML

<div class="chart">
      <canvas baseChart
        [data]="pieChartData"
        [labels]="pieChartLabels"
        [chartType]="pieChartType"
        [options]="pieChartOptions"
        [plugins]="pieChartPlugins"
        [colors]="pieChartColors"
        [legend]="pieChartLegend">
      </canvas>
    </div>

TS

 public pieChartLabels: Label[] = [['Download', 'Sales'], ['In', 'Store', 'Sales'], 'Mail Sales'];
  public pieChartData: number[] = [300, 500, 100];
  public pieChartType: ChartType = 'pie';
      public pieChartOption: any = {
        legend: {
          position: 'right',
          labels: {
            fontSize: 10
          }
        }
      }

我想要的
 Expected o/p

我得到的东西

o/p

1 个答案:

答案 0 :(得分:0)

ng2-charts使用chartjs,并且在chartjs中,有 legend.labels.usePointStyle ,您必须使其正确。

{{1}}