在highcharts中重用相同的图表对象，以减少编码。

Question

我正在创建一个仪表盘，页面上显示了10个PIE图表。每个PIE图表只有一些数值不同，其余的都是一样的。

我使用的是Angular 7 + HighCharts。下面是代码。如果我尝试使用 chart2 在HTML中出现2次，只出现一次。如果我用不同的变量来复制粘贴相同的代码，就能正常工作。

1. 如何减少代码或重复使用相同的代码？chart 通过传递不同的值？
2. 在构造函数 let 需要使用关键字，在构造函数之外，不使用关键字也可以工作。

3. 对于10个不同的PIE图，所有的相差仅为 series 的图表对象中。如何将一个对象用于所有10个图表？

   @ Component({
    selector: 'app-chart',
    templateUrl: './chart.Component.html',
    styleUrls: ['./chart.Component.css'],
    providers: [LotoService],
   })
   
   export class ChartComponent implements OnInit {
   
   constructor(private http: HttpClient) {
   
       let chart8: any;
       let chart2: any;
   
   }
   
   CP_A2A = 10;
   CP_A2CA = 10;
   
   ngOnInit() {}
   
   chart2 = new Chart({
           chart: {
               plotBackgroundColor: null,
               plotBorderWidth: null,
               plotShadow: false,
               type: 'pie',
               backgroundColor: '#fff',
               marginTop: 20,
               height: 300
           },
           credits: {
               enabled: false
           },
           title: {
               text: null,
               style: {
                   color: '#858585',
                   fontSize: '14px'
               }
           },
           tooltip: {
               pointFormat: '{point.y}'
           },
           series: [{
                   type: 'pie',
                   name: 'Share',
                   data: [{
                           name: 'Approved',
                           y: 500
                       }, {
                           name: 'Conditionally Approved',
                           y: 300
                       }, {
                           name: 'Not Approved',
                           y: 200
                       }
                   ]
               }
           ],
           plotOptions: {
               pie: {
                   allowPointSelect: true,
                   cursor: 'pointer',
                   dataLabels: {
                       enabled: false
                   },
                   showInLegend: false,
                   colors: ['#00366E', '#3693F8', '#C8E7FB'],
                   center: ['50%', '37%']
               }
           },
       });
   

Answer 1

快速修复将

其实你可以将配置保留在一个默认的配置变量中，如下图所示

defaultChartConfig = {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie',
            backgroundColor: '#fff',
            marginTop: 20,
            height: 300
        },
        credits: {
            enabled: false
        },
        title: {
            text: null,
            style: {
                color: '#858585',
                fontSize: '14px'
            }
        },
        tooltip: {
            pointFormat: '{point.y}'
        },
        series: [{
                type: 'pie',
                name: 'Share',
                data: [ ]
            }
        ],
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: false,
                colors: ['#00366E', '#3693F8', '#C8E7FB'],
                center: ['50%', '37%']
            }
        },
    }

然后 forEach 你应该重新使用图表配置，并改变数据，如下所示

for (i = 0; i < 10; i++) {
     const chart = new Chart(this. defaultChartConfig);
     chart.series.data = ____/// whatever data
     this.charts.push(chart)
}

使用 ngFor 在用户界面中显示图表

更好的方法 将创建一个通用的 pie-chart 带选择器的组件 app-pie-chart 使用 highcharts 并接受系列对象作为 Input() 在父组件中使用这个新的图表和它的选择器。