如何在c3js动态图表

时间:2016-05-16 13:53:50

标签: javascript html d3.js graph c3.js

我开始玩c3js希望得到一张好看的动态图表。在测试它时,我注意到每个load函数之间的转换似乎没有任何转换。我也尝试使用flow函数,但得到了相同的结果。我只能在这个主题上找不到任何内容,但基本上有一种方法可以改变这种行为并在新数据点进入时平稳过渡?

你可以在这里看到我的例子:

        transition: {
            duration: 0
        },

https://jsfiddle.net/g4cq6pg0/1/

当我实际启用转换时,它运行良好(水平),直到我开始删除一些数据以添加新指标,然后事情向南。而不是仅仅横向过渡它也垂直过渡,这使得很难看到(350是默认值):

        transition: {
            duration: 350
        },

https://jsfiddle.net/g4cq6pg0/2/

如何强制平滑的水平过渡?这是我的意思的例子(仅使用D3):

http://bl.ocks.org/simenbrekken/6634070

2 个答案:

答案 0 :(得分:0)

是的,线路正在移动,但是这些点只是垂直上下摆动以适应当前值,而不是随着线移动......

在这里查看问题 - > Dynamic timeseries C3js chart

流程api可以让你做你想要的但有一个重大错误(请参阅我的回答),所以调整提问者自己的答案可能是平滑水平过渡的最佳选择

PS。如果您还想停止y轴自动调整大小,您需要在图表声明中使用它:

axis: {
        y: {
            max: 1 // translates to 100% on the y axis
        }
    }

答案 1 :(得分:0)

c3js专门为此设置了一个.flow方法:http://c3js.org/samples/api_flow.html

请注意,如果切换到其他标签并在一段时间后返回,它会开始冻结。