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

Question

我正在创建一个仪表板，页面上显示了 10 个 PIE 图表。每个 PIE 图表仅在某些值上有所不同，其余所有内容均相同。

Angular 7 + 我正在使用的 HighCharts。下面是代码。如果我尝试在 HTML 中使用 chart2 2 次，它只出现一次。如果我对粘贴的相同代码副本使用不同的变量，效果很好。

如何通过传递不同的值来最小化代码或重用相同的 chart 对象？
在构造函数中需要 let 关键字，在构造函数外部它可以不使用它

对于 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)
}

在 UI 中使用 ngFor 来显示图表

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

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

reuse of same object of chart in highcharts to minimize coding

javascript

highcharts

angular

angular7