jqPlot动画数据更改，无需重新加载图形 [英] jqPlot animate data change without reloading graph

问题描述

我想要一个用户可以按下的按钮，以便图表上的数据在动画中发生变化，而不会再从图表底部开始。以下是我希望自己的jqPlot行为的示例： http：// www。 w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate 。如果还有另一个插件可以让我这样做，我还没有结婚使用jqPlot。

我的当前代码如下：

  function myReplot （）{
 var newdata = [[1,3]，[2,6]，[3,8]，[4,11]]; 
 plot1.series [0] .data = newdata; 
 plot1.replot（）; 
 
 
 $（document）.ready（function（）{
 $ .jqplot.config.enablePlugins = true; 
 var data = [[2,6 ，7,10]]; 
 var ticks = ['a'，'b'，'c'，'d']; 
 
 plot1 = $ .jqplot（'chart1'， data，{
 //只有在不使用excanvas时才有动画（不在IE 7或IE 8中）.. 
 animate：！$。jqplot.use_excanvas，
 animateReplot：！$ .jqplot.use_excanvas，
 seriesDefaults：{
 renderer：$。jqplot.BarRenderer，
 pointLabels：{show：true} 
}，
 axes：{
 xaxis：{
渲染器：$ .jqplot.CategoryAxisRenderer，
 ticks：ticks 
} 
}，
 highlighter：{show：false} 
 }）; 
 
}）; 
  

解决方案

您可能想删除条形标签并只保留最终值。
JsFiddle链接

  function myReplot（）{
 var newdata = [[1,3]，[2,6]，[3,8]，[4,11]]; 
 plot1.series [1] .data = newdata; 
 plot1.replot（false）; 
 
 $ b $（文档）.ready（函数（）{
 $ .jqplot.config.enablePlugins = true; 
 $（＃button1）。 on（click，function（）{
 myReplot（）; 
}）; 
 var data = [[2,6,7,10]，[0,0,0， 0]]; 
 var ticks = ['a'，'b'，'c'，'d']; 
 
 plot1 = $ .jqplot（'chart1'，data，{ 
 //如果我们不使用excanvas（不在IE 7或IE 8中），只有动画。
 stackSeries：true，
 animate：！$。jqplot.use_excanvas，
 // animateReplot：！$。jqplot.use_excanvas，
 seriesDefaults：{
 renderer：$。jqplot.BarRenderer，
 pointLabels：{show：true，
 stackedValue：true} ，
 color：orange
}，
 axes：{
 xaxis：{
渲染器：$ .jqplot.CategoryAxisRenderer，
 ticks：ticks 
}，
 yaxis：{
 min：0，
 max：50 
} 
}，
 highlighter：{show：false} 
}）; 
 
}）; 
  

I want to have a button that users can press so that the data on the graph changes in an animation without the bars starting from the bottom of the graph again. Here's an example of how I would like my jqPlot to behave: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate. I'm not married to using jqPlot if there's another plugin that will let me do this. Thanks!

My current code is as follows:

function myReplot() {
    var newdata = [[1,3],[2,6],[3,8],[4,11]];
    plot1.series[0].data = newdata;
    plot1.replot();
}

$(document).ready(function(){
    $.jqplot.config.enablePlugins = true;
    var data = [[2, 6, 7, 10]];
    var ticks = ['a', 'b', 'c', 'd'];

    plot1 = $.jqplot('chart1', data, {
        // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
        animate: !$.jqplot.use_excanvas,
        animateReplot: !$.jqplot.use_excanvas,
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            pointLabels: { show: true }
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks
            }
        },
        highlighter: { show: false }
    });

});

解决方案

This is how close i could get. You might want to remove the bar labels and keep only final values. JsFiddle link

function myReplot() {
    var newdata = [[1,3],[2,6],[3,8],[4,11]];
    plot1.series[1].data = newdata;
    plot1.replot(false);
}

$(document).ready(function(){
    $.jqplot.config.enablePlugins = true;
    $("#button1").on("click",function(){
    myReplot();
    });
    var data = [[2, 6, 7, 10],[0,0,0,0]];
    var ticks = ['a', 'b', 'c', 'd'];

    plot1 = $.jqplot('chart1', data, {
        // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
        stackSeries : true,
        animate: !$.jqplot.use_excanvas,
        //animateReplot: !$.jqplot.use_excanvas,
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            pointLabels: { show: true,
                          stackedValue: true},
            color: "orange"
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks
            },
            yaxis:{
                min:0,
                max:50
            }
        },
        highlighter: { show: false }
    });

});

这篇关于jqPlot动画数据更改，无需重新加载图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！