[英]Custom animation in plottable.js line chart
我正在嘗試在數據更新時在plottable.js中使用自定義動畫。 下面是我的代碼:-
<script type="text/javascript">
var xScale = new Plottable.Scales.Category();
var yScale = new Plottable.Scales.Linear().domain([0,30]);
var xAxis = new Plottable.Axes.Category(xScale, "bottom");
var yAxis = new Plottable.Axes.Numeric(yScale, "left");
var dataset;
var data;
function createChart() {
data = [];
for(var i=0; i<10; i++) {
data.push({x:"Data" + (i + 1),y:Math.abs(Math.random() * 10)});
}
dataset = new Plottable.Dataset(data);
makeChart();
}
function updateChart() {
data = [];
for(var i=0; i<10; i++) {
data.push({x:"Data" + (i + 1),y:Math.abs(Math.random() * 10)});
}
dataset.data(data);
}
function makeChart() {
var linePlot = new Plottable.Plots.Line()
.addDataset(dataset)
.x(function(d) { return d.x; }, xScale)
.y(function(d) { return d.y; }, yScale)
.attr("stroke","#FA8116")
.animated(true)
.animator("test",new Plottable.Animators.Easing().easingMode("bounce"));
var label_y = new Plottable.Components.AxisLabel("Parameter 2", -90);
var label_x = new Plottable.Components.AxisLabel("Parameter 1", 0);
var chart = new Plottable.Components.Table([
[label_y, yAxis, linePlot],
[null, null, xAxis],
[null, null, label_x]
]);
chart.renderTo("svg#lineChart");
// Responsive Layout
window.addEventListener("resize", function() {
chart.redraw();
});
}
$(document).ready(function() {
createChart();
setInterval(function(d) {
updateChart();
},5000);
});
</script>
除了默認以外,我還想對線圖進行動畫處理,我做到了:-
var linePlot = new Plottable.Plots.Line()
.addDataset(dataset)
.x(function(d) { return d.x; }, xScale)
.y(function(d) { return d.y; }, yScale)
.attr("stroke","#FA8116")
.animated(true)
.animator("test",new Plottable.Animators.Easing().easingMode("bounce"));
我不明白我在哪里正確,並且由於我是plottable的新手,你們可以幫助我嗎,還有沒有辦法將基於d3的動畫與plottable一起使用? 如果可以,請提供一個代碼片段
提前感謝
Plot
通常有兩個Animator
: MAIN
和RESET
。 您需要指定要更改Plot
上的主要Animator
:
plot.animator(Plottable.Plots.Animator.MAIN,
new Plottable.Animators.Easing().easingMode("bounce"));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.