如何动态配置FusionCharts来渲染链接的图表,而不使用eval

How to dynamically configure FusionCharts to render linked charts without using eval

本文关键字:eval 链接 动态 何动态 配置 FusionCharts      更新时间:2023-09-26

是否有一种方法可以动态配置FusionCharts来渲染链接图表而不使用eval?我今天早上从FusionCharts support那里得到了这个jsFiddle,他们向我展示了如何使用configureLink方法(在jsFiddle的底部):

chart1.configureLink({
    id:'chart1',
    type: 'column3d'
});

注意chart1的引用和它作为id的使用-这些本质上都是硬编码在jsFiddle的顶部:var chart1 = new FusionCharts({...

我们是动态生成图表的,但是我们不知道给定页面上有多少图表,所以我们在循环中这样做:

FusionCharts.ready(function() {
    var fusionChartsCfg = JSON.parse(chartJson); //chartJson defined above
    for (var i=0, n=fusionChartsCfg.length; i<n; i++) {
        var chartConfig = fusionChartsCfg[i];
        new FusionCharts(chartConfig).render();
        /*
        eval('var fChart = chart' + i + '=new FusionCharts(chartConfig)');
        fChart.render();
        if (chartConfig.linkedChartType) {
            fChart.configureLink({
                id:'chart' + i,
                type: chartConfig.linkedChartType
            });
        }
        */          
    }
});

实际上,我已经得到了注释内的代码工作(而不是行new FusionCharts(chartConfig).render();),但注意它对eval()的依赖。有办法避免这种情况吗?这是我唯一能想到的事情,因为需要通过引用/变量名称引用FusionChart实例,并且需要在发送给configureLink

的配置中额外使用它作为id属性。

我不认为configureLink方法中的id属性是那么重要。请参考这份文件。

这样代码应该可以正常工作

FusionCharts.ready(function() {
    var fusionChartsCfg = JSON.parse(chartJson); //chartJson defined above
    for (var i=0, n=fusionChartsCfg.length; i<n; i++) {
        var chartConfig = fusionChartsCfg[i];
        new FusionCharts(chartConfig).render().configureLink({
                type: chartConfig.linkedChartType
            });         
    }
});