C3 donut环形图使用JSON解析的columns数据无法正常渲染问题

• 你原始JSON字符串中theatres对应的值是被双引号包裹的字符串，不是原生数组结构，外层JSON.parse(txt)执行后，theatres变量拿到的是字符串，不是C3要求的二维数组类型，所以渲染失败。控制台打印时看起来像数组，只是字符串打印的视觉效果和数组类似，本质类型完全不同。

1. 先把theatres字符串里的单引号替换为双引号，符合JSON语法规范
2. 对处理后的字符串二次执行JSON.parse，转成真正的二维数组

• 可选优化：如果可以调整原始JSON的生成逻辑，直接把theatres字段设为数组类型，不用包裹为字符串，就不需要前端额外做二次解析处理。

const txt = '{"theatres":"[[\'AMER INT\',386],[\'AMER US\',464],[\'APAC\',914],[\'EMEA\',706],[\'JP\',81]]","title":"94 Countries"}';

const dataobj = JSON.parse(txt);

// 新增两行处理theatres字符串
var theatresStr = dataobj.theatres.replaceAll("'", '"');
var theatres = JSON.parse(theatresStr);
var title = dataobj.title;

var chart = c3.generate({
    bindto: '#chart',
    data: {
        type: 'donut',
        columns: theatres
    },
    size: {
        height: 800
    },
    donut: {
        title: title
    }
});

如果运行环境不支持replaceAll，可以替换为正则写法：var theatresStr = dataobj.theatres.replace(/'/g, '"');

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