使用 c3.js 将数据添加到图表答案

【问题标题】：add data to chart using c3.js使用 c3.js 将数据添加到图表
【发布时间】：2018-03-02 06:11:32
【问题描述】：

我有一个图表，我想在其中添加更多数据而不替换我拥有的数据，可以使用 .push 或添加一组数据而不会丢失我以前拥有的数据。

我该怎么做？

columns: [
      ['data1', -4,3,4,7,8,9,8,7,3],
      ['data1_x', -5,2,3,4,5,4,3,2,1],

。 . .

//I need add the new data withouth remove the previous data

chart.load({
    xs: {
        data1: 'data1_x'
    },
    columns: [
        ["data1_x", 3,6],
        ["data1", 5,8]
    ]
});

https://jsfiddle.net/aL8xhgpn/

【问题讨论】：

标签： javascript d3.js c3.js

【解决方案1】：

您可以将数据移动到数组中

var data1 = ['data1',-4,3,4,7,8,9,8,7,3];
var data1_x = ['data1_x', -5,2,3,4,5,4,3,2,1];

并将数据推入其中。

下面的工作示例。

var data1 = ['data1', -4, 3, 4, 7, 8, 9, 8, 7, 3];
var data1_x = ['data1_x', -5, 2, 3, 4, 5, 4, 3, 2, 1];
var chart = c3.generate({
  data: {
    xs: {
      data1: "data1_x",
      data2: "data2_x"
    },
    xSort: false,
    columns: [
      data1,
      data1_x, ['data2', Math.random() * 10, Math.random() * 10, Math.random() * 10, Math.random() * 10, Math.random() * 10, Math.random() * 10],
      ['data2_x', Math.random() * 10, Math.random() * 10, Math.random() * 10, Math.random() * 10, Math.random() * 10, Math.random() * 10]
    ]

  },
  axis: {
    x: {
      tick: {
        values: d3.range(-5, 10)
      }
    }
  }
});

chart.internal.xAxis.g.attr('transform', "translate(0," + chart.internal.y(0) + ")");
chart.internal.yAxis.g.attr('transform', "translate(" + chart.internal.x(0) + ", 0)");
data1.push(5)
data1.push(8)
data1_x.push(3)
data1_x.push(6)


setTimeout(load, 5000);

function load() {
  chart.load({
    xs: {
      data1: 'data1_x'
    },
    columns: [
      data1_x,
      data1
    ]
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.js"></script>
<div id="chart"></div>

【讨论】：

哇！你的聪明让我吃惊。只是一个细节，我希望你能帮助我。添加新点时如何生成动画（无需重新启动图表中的所有点）。这种变化看起来很突然。
更新了我的答案中的代码使用超时它将在 5 秒后更新，并带有动画
非常感谢你的朋友！它表明你知道很多。我已经完成了 settimeout，但我的意思是当你添加一个点时正确地没有动画。我希望看到使用添加的点生成的动画，点对点。像这样：jsfiddle.net/ej0wLtv6
我认为最好再问一个关于 SO 的问题。如果您觉得我已经回答了您最初的问题，请将其标记为已回答。
谢谢，我忘了。我希望你能帮助我解决另一个问题。