Question

ngx-chart中的饼图仅将数据记录的名称显示为标签，但我也想在标签中显示其值。我看到应该可以使用1 accessor) at Microsoft.EntityFrameworkCore.Design.Internal.DbContextOperations.CreateContext(Func更改标签格式，但是文档中没有提供示例。

Answer 1

是一个有关如何为饼图实现[labelFormatting] =“ .....”功能的示例。我尝试在饼图上实现（如下）：

   <ngx-charts-pie-chart
        [results]="chartData"
        [view]="view"
        [labelFormatting]="setLabelFormatting"   
      ></ngx-charts-pie-chart>

其中：

  setLabelFormatting(c): string {
    return `${c.label}<br/><span class="custom-label-text">${c.value}</span>`;
  }

和：

.custom-label-text {
  background-color: #00b400;
  color: #fff;
}

Answer 2

您可以从系列属性的 labelFormatting 方法中访问您的图表数据。您可以使用以下代码实现它：

  // your chartData maybe like this
  chartData = [
    { name: "Prod 1", value: 22 },
    { name: "Prod 2", value: 11 },
    { name: "Prod 3", value: 33 }
  ];
  

  labelFormatting(name) { // this name will contain the name you defined in chartData[]
    let self: any = this; // this "this" will refer to the chart component (pun intented :))

    let data = self.series.filter(x => x.name == name); // chartData will be present in
                                                        // series along with the label

    if(data.length > 0) {
      return `${data[0].name}: ${data[0].value}`;
    } else {
      return name;
    }
  }

注意：我使用的是 ngx-charts 版本 16.0.0

在ngx图表饼图中使用labelFormatting

2 个答案: