如何在C3.js中向steps序列追加MQTT传入的数据？

你碰到的这个问题其实很典型——C3.js并不推荐直接修改它的内部数据属性（比如你尝试的chart.data.columns['step']这类方式），而是提供了专门的API来安全、可靠地更新图表数据。下面就给你具体的解决方案：

核心方案：用chart.load()方法追加数据 #

C3的load()方法是官方设计用来动态添加或更新数据系列的接口，它会自动处理数据同步和图表重绘。针对你的场景，只需要修改/epoch/update消息的处理分支即可：

if (topic == "/epoch/update") {
    var j = JSON.parse(new TextDecoder("utf-8").decode(payload));
    var msg = "<br> Epoch: " + j.id + " steps: " + j.steps + " winner: " + j.winner;
    document.getElementById('epoch-report').innerHTML += msg;

    // 关键：通过load方法向steps序列追加新数据
    chart.load({
        columns: [
            ['steps', j.steps] // 每次传入一个新的steps数值
        ],
        unload: false // 保留现有数据（默认就是false，可省略，写出来更清晰）
    });

    // 可选：如果需要动态调整y轴范围适配新数据
    // 方式1：让C3自动缩放（需要初始化时开启axis.y.autoscale: true）
    // 方式2：手动更新y轴最大值
    // chart.axis.max({ y: Math.max(chart.axis.max().y, j.steps) });
}

为什么不能直接操作内部属性？ #

C3.js的内部数据结构是封装起来的，直接修改chart.data这类属性，不仅可能导致图表不自动刷新，还会因为库版本更新带来兼容性问题。官方提供的load()、unload()等API会帮你处理所有数据同步和视图更新的细节，是更稳妥的选择。

额外优化建议 #

1. 开启轴自动缩放：如果你的steps数值会超过初始化时设置的y.max: 0.1，建议在图表初始化时开启y轴自动缩放：

var chart = c3.generate({
    bindto: '#epoch-report',
    data: {
        columns: [ ['steps',] ]
    },
    axis:{
        x: {
            label: { text: "Epoch" }
            // 可以去掉固定max，让x轴自动适配数据量
            // max: .1,
        },
        y: {
            autoscale: true, // 开启自动缩放
            label: { text: "Step" }
            // max: .1, // 不需要固定最大值可移除
        }
    }
});

2. 批量追加数据：如果某次消息包含多个steps数值，直接传入数组即可一次性追加：

chart.load({
    columns: [
        ['steps', 15, 22, 30] // 一次性追加多个数据点
    ]
});

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