IE11下C3JS动态配置颜色报Expected identifier错误求助

这个问题我太熟了！IE11对ES6特性的支持实在拉胯，你遇到的报错就是因为它不认识计算属性名这个ES6语法——就是你在colors对象里写[c1L]: c1C这种动态键名的方式，这种写法在现代浏览器里没问题，但IE11完全不兼容。

解决思路 #

我们需要把ES6的计算属性名写法换成IE11支持的ES5语法：先创建一个空的colors对象，再通过方括号语法逐个添加动态属性。

修改后的完整代码 #

var c1L = "Company 1"; 
var c2L = "Company 2"; 
var c3L = "Company 3"; 
var c1F = 1100; 
var c2F = 550; 
var c3F = 300; 
var c1C = "#001122"; 
var c2C = "#001133"; 
var c3C = "#001144"; 

// 先创建空对象，用ES5兼容的方式添加动态属性
var chartColors = {};
chartColors[c1L] = c1C;
chartColors[c2L] = c2C;
chartColors[c3L] = c3C;

var chartPortafolio01 = c3.generate({ 
    bindto: d3.select('#chart-portafolio-01'), 
    data: { 
        columns: [ 
            [c1L, c1F], 
            [c2L, c2F], 
            [c3L, c3F] 
        ], 
        type : 'donut', 
        colors: chartColors // 直接引用我们提前构建好的对象
    }, 
    donut: { 
        title: "€ " + formattaNumHtml(clientiTotale) 
    }, 
    legend: { 
        show: false 
    } 
}); 

额外提示 #

如果你的代码里还用到了其他ES6特性（比如箭头函数、let/const、模板字符串等），也要记得换成ES5兼容的写法，IE11才不会挑刺哦。

内容的提问来源于stack exchange，提问作者al404IT