C3.js嵌套JSON对象访问与加载：新增嵌套数据折线

没问题，我来帮你搞定这个需求！要在现有柱状图基础上新增一条来自嵌套对象的折线，只需要对C3的配置做两处关键修改，具体步骤如下：

1. 先确认你的JSON数据结构 #

先假设你的JSON数据大概是这样的（嵌套对象以OrdemServico为例，你可以根据实际字段名调整）：

[
  {"DataEmiss": "01/01/2024", "TotalOs": 5, "OrdemServico": {"ActiveOs": 3}},
  {"DataEmiss": "02/01/2024", "TotalOs": 7, "OrdemServico": {"ActiveOs": 4}},
  {"DataEmiss": "03/01/2024", "TotalOs": 9, "OrdemServico": {"ActiveOs": 6}}
]

2. 修改C3图表配置 #

核心修改点： #

• 在data.keys.value数组中，添加嵌套对象的字段路径（用**点号.**连接层级）
• 通过data.types配置，为新增的系列指定折线类型（覆盖默认的柱状图类型）

修改后的完整代码如下：

var chart = c3.generate({
    bindto: "#graficoProjeto",
    x: 'x',
    data: {
        url: '/AdminOrdemServico/OrdemServProjetos',
        mimeType: 'json',
        xFormat: '%d/%m/%Y',
        keys: {
            x: 'DataEmiss',
            // 新增嵌套字段的路径，替换成你实际的字段名
            value: ['TotalOs', 'OrdemServico.ActiveOs']
        },
        type: 'bar', // 默认系列类型为柱状图
        // 为指定系列设置折线类型
        types: {
            'OrdemServico.ActiveOs': 'line'
        },
        // 可选：为折线系列自定义颜色
        colors: {
            'OrdemServico.ActiveOs': '#ff7f0e'
        }
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%d/%m/%Y'
            }
        }
    }
});

3. 注意事项 #

• 请确保嵌套字段的路径完全匹配你的JSON结构，比如如果嵌套对象是OrdemSer而不是OrdemServico，就改成OrdemSer.你的字段名
• 如果需要调整折线的样式（比如线宽、点大小），可以额外添加data.axes或grid等配置进一步自定义

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