Asp.net 标签显示为字符串数组，而不是单个的

我尝试用Asp.Net和Angular创建highcharts仪表板，但当我尝试使包含Asp.Net标签中的数据的图表在图表的每个部分中显示为字符串数组，图例名称显示为“slice”，我不知道为什么。我注意到，只有在这里使用“name”时，它们才会显示为这样：“name:allData.map（x=>x['name']）”

从'@angular/core'导入{Component，OnInit，Input}；
从“Highcharts”导入*作为Highcharts；
从'src/app/shared/Order'导入{Order}；
从'src/app/shared/Customer'导入{Customer}；
从“../../services/sales data.service”导入{SalesDataService}；
从“时刻”导入*作为时刻；
@组成部分({
选择器：“应用程序饼图”，
templateUrl:'./pie chart.component.html'，
样式URL:['./饼图.component.css']
})
导出类PieChartComponent实现OnInit{
构造函数（私有的_salesDataService:salesDataService）{}
@Input（）inputData：任意；
@输入（）限制：数字；
orderModel:Order[]；
客户名称：任何；
海图=海图；
公共选项：任意={
图表：{
renderTo:'容器'，
键入：“馅饼”
},
标题：{
文本：“”
},
打印选项：{
馅饼：{
内部尺寸：'50%'，
数据标签：{
启用：对，
},
showInLegend：对
},
工具提示：{
pointFormat:“{name}:{point.percentage:.1f}%”
},
},
系列：[{
名称：“”，
数据：[]，
}],
}
恩戈尼尼特（）{
this.parseChartData（this.inputData，this.limit）；
}
parseChartData（res:any，limit？：number）{
log（'response:'，res）；
const allData=res.slice（0，极限）；
log（'allData（slice）：'，allData）；
this.options.series=[{data:allData.map（x=>x['total']），
名称：allData.map（x=>x['name']）
}]
Highcharts.chart（'container2'，this.options）；
}
}

---

现场演示：

之所以发生这种情况，是因为饼图系列与其他系列略有不同（例如第行）。图例是从其点（切片）创建的，而不是像往常一样的序列。因此，为了设置每个切片的名称，需要为每个点指定一个名称

系列：[{
键入“pie”，
showInLegend：是的，
数据：[{
名称：'Name1'，
y:12
},
{
名称：'Name2'，
y:12
},
{
名称：'Name3'，
y:12
}, {
名称：'Name4'，
y:12
}
]
}]

现场演示：

---

如果我从Asp.Net获取数据，如何为每个点指定名称？然后，在将数据放入图表之前，您需要解析从Asp.Net获取的数据。您还可以在图表的一个事件中解析它们，例如在chart.load上。Live demo:API references:，我使用了图表事件，现在我有了标签名称和图例，但它们看起来仍然是连接的。例如：“ReadyCleaner，ReadyBakery”。你的意思是，你把它们作为一个字符串？如果是这样的话，你可以把那根绳子分开。在JavaScript中，您可以通过

String.split（'，'）

实现这一点。我的图表如下所示：我尝试使用string.split，但没有成功。

import { Component, OnInit, Input } from '@angular/core';
import * as Highcharts from 'highcharts';
import { Order } from 'src/app/shared/order';
import {Customer} from 'src/app/shared/customer';
import {SalesDataService} from '../../services/sales-data.service';
import * as moment from 'moment';


@Component({
  selector: 'app-pie-chart',
  templateUrl: './pie-chart.component.html',
  styleUrls: ['./pie-chart.component.css']
})
export class PieChartComponent implements OnInit {

  constructor(private  _salesDataService:SalesDataService) { }
 



  @Input() inputData:any;
  @Input()  limit:number;
  orderModel:Order[];
customerName:any;
  highcharts=Highcharts;
  
  public  options: any = {
    chart: {
      renderTo: 'container',
    type: 'pie'
     },
    title: {
    text: ''
     },
     plotOptions: {
       pie: {
       innerSize:'50%',
       dataLabels: {
      enabled:true,
      
      
      },
      showInLegend: true
       },
    
    
    tooltip:{
      pointFormat: '{name}: <b>{point.percentage:.1f}%</b>'
    },
       
       },
      
    
      series: [{
       name:'',
        data:[ ],
      }],
    }


  
  
  ngOnInit() {
    

    this.parseChartData(this.inputData,this.limit);
   
    
  }


 parseChartData(res:any,limit? :number){
   console.log('response:',res);
   const allData=res.slice(0,limit);
   console.log('allData(slice):', allData);




 this.options.series=[{data:allData.map(x=>x['total']),
  name:allData.map(x=>x['name'])
}]



 Highcharts.chart('container2',this.options);
}
}