如何通过卸载和加载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

根据c3文档,这样做的方法是使用load函数的unload参数.

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

在尝试使用.unload()和.load()时,渲染和动画存在问题.

本说明包含在.unload()文档中:

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

注意:如果在卸载之后/之前很快调用[加载] API,则应使用卸载加载参数.否则,由于动画的[取消],图表将无法正确呈现.

完成将在加载数据后调用,但不是在渲染后调用.这是因为渲染将在一些过渡后完成,并且在加载和渲染之间存在一些时间延迟.

根据.load()的文档:

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

如果卸载,则在加载新数据之前将卸载数据.如果给定true,则将卸载所有数据.如果以String或Array形式给出目标ID,则将卸载指定的目标.

注意:如果需要同时卸载某些数据,则应使用卸载.如果在加载之后/之前很快调用unload API而不是unload param,则由于取消动画,图表将无法正确呈现.

格式将与以下代码段相符:

所有数据

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/

Answer 2

啊,似乎有chart.unload()一些异步工作,如果你chart.load()以同步方式立即调用,将会破坏图形.

我通过在传递给回调的函数中加载新数据来实现chart.unload这一点done.

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

工作小提琴:https://jsfiddle.net/1g5v1s24/1/