cmg*_*ber 3 javascript dimple.js
当转换到凹坑条形图中具有较少或不同条形的新数据时,被移除的条形图被推到图表左侧的彼此顶部并保持整个过渡时间.
以下是重新创建效果的代码示例:
var svg = dimple.newSvg("#chartContainer", 590, 400);
var data = [
{ Animal: "Cats", Value: (Math.random() * 1000000) },
{ Animal: "Dogs", Value: (Math.random() * 1000000) },
{ Animal: "Mice", Value: (Math.random() * 1000000) },
{ Animal: "Rat", Value: (Math.random() * 1000000) },
{ Animal: "Cow", Value: (Math.random() * 1000000) }
];
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 510, 305)
var x = myChart.addCategoryAxis("x", "Animal");
x.addOrderRule(["Cats", "Dogs", "Mice"]);
myChart.addMeasureAxis("y", "Value");
myChart.addSeries(null, dimple.plot.bar);
myChart.draw();
d3.select("#btn").on("click", function() {
myChart.data = [
{ Animal: "Cats", Value: (Math.random() * 1000000) },
{ Animal: "Dogs", Value: (Math.random() * 1000000) },
{ Animal: "Mice", Value: (Math.random() * 1000000) }
];
myChart.draw(1000);
});
Run Code Online (Sandbox Code Playgroud)
如果单击示例中的按钮,您将看到效果.示例:http://jsfiddle.net/nf57j/25/
(左倾改编自John Kiernander的回答:选择新选项时更新dimple.js图表)
有没有办法让移除的栏杆不在转换中?
| 归档时间: |
|
| 查看次数: |
937 次 |
| 最近记录: |