Javascript 在highcharts中重用相同的图表对象以最小化编码

我正在创建一个仪表板，页面上显示至少10个饼图。每个饼图只有某些值不同，其余所有值都相同

我使用的角度7+高图表。下面是代码。如果我尝试在HTML中使用

chart2

2次，它只出现一次。如果我对粘贴的同一代码副本使用不同的变量，效果会很好

如何通过传递不同的值来最小化代码或重用相同的

图表

对象

在构造函数

中，let

关键字是必需的，而在构造函数外部，它不使用关键字即可工作

对于10个不同的饼图，所有饼图的区别仅在于图表对象中的系列。如何将一个对象用于所有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%']
            }
        },
    });

快速解决方法将是

实际上，您可以将配置保存在默认配置变量中，如下所示

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

chart您应该重复使用配置并更改数据，如下所示

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

（i=0；i<10；i++）的

{
const chart=新图表（this.defaultChartConfig）；
chart.series.data=___///任何数据
this.charts.push（图表）
}

在显示图表的UI中使用

ngFor

更好的方法是使用highcharts创建一个带有选择器的通用

饼图组件
应用程序饼图
，并从父组件接受序列对象作为
输入（）
使用此新图表及其选择器将提供快速修复

实际上，您可以将配置保存在默认配置变量中，如下所示

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
chart您应该重复使用配置并更改数据，如下所示

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

（i=0；i<10；i++）的
{
const chart=新图表（this.defaultChartConfig）；
chart.series.data=___///任何数据
this.charts.push（图表）
}

在显示图表的UI中使用
ngFor

更好的方法是使用highcharts创建一个带有选择器的通用
饼图组件
应用程序饼图
，并从父组件接受序列对象作为
输入（）
使用此新图表及其选择器