如何通过 C3.js 中的卸载和加载换出数据

Question

我正在尝试换出 C3.js 图表中的数据集。

我认为基于 C3 文档的代码如下所示：

chart.unload();
chart.load({ 
  columns: [
    ['data3', 100, 90, 80, 70, 60, 50]
  ] 
});

但这行不通。您会注意到在以下 Plunkr 上呈现的图形呈现不正确，所以我显然做错了什么：https://jsfiddle.net/7rfm9om9/

替换 C3 图表中数据的惯用方法是什么？

Answer 1

啊，看来 chart.unload() 做了一些异步工作，如果您在之后立即以同步方式调用 chart.load()，将会破坏图表。

我通过在传递给 chart.unload 的 done 回调的函数中加载新数据来实现此功能。

chart.unload({
    done: function() {
      chart.load({ 
        columns: [
          ['data3', 100, 90, 80, 70, 60, 50]
        ] 
      });  
    }
  });

工作fiddle：https://jsfiddle.net/1g5v1s24/1/

Answer 2

根据 c3 文档，执行此操作的方法是使用加载函数的卸载参数。

chart.load({
  unload: true,
  columns: ['data1', 100]
});

渲染和动画存在问题，否则在尝试使用 .unload() 和 .load() 时会出现问题。

此说明包含在 .unload() 文档中：

http://c3js.org/reference.html#api-unload

Note: If you call [the] load API soon after/before unload, unload param of load should be used. Otherwise chart will not be rendered properly because of [cancelation] of animation.

done will be called after data loaded, but it's not after rendering. It's because rendering will finish after some transition and there is some time lag between loading and rendering.

根据 .load() 的文档：

http://c3js.org/reference.html#api-load

If unload given, data will be unloaded before loading new data. If true given, all of data will be unloaded. If target ids given as String or Array, specified targets will be unloaded.

Note: unload should be used if some data needs to be unloaded simultaneously. If you call unload API soon after/before load instead of unload param, chart will not be rendered properly because of cancel of animation.

格式将遵循以下片段：

所有数据

chart.load({
  unload: true,
  columns: [
    ['data3', 100, 90, 80, 70, 60, 50]
  ] 
});

指定目标

chart.load({
  unload: ['data1', 'data2'],
  columns: [
    ['data3', 100, 90, 80, 70, 60, 50]
  ] 
});

JSFiddle:

https://jsfiddle.net/d8g015n2/

如何通过 C3.js 中的卸载和加载换出数据

How to swap out data via unload and load in C3.js

c3.js