jqplot動畫餅圖和甜甜圈圖

任何人都可以告訴我，如果jqplot中的動畫和動畫重新生成選項與餅圖和甜甜圈渲染器一起工作嗎？看起來不像這個呈現的兼容選項，但找不到任何特定的文檔。jqplot動畫餅圖和甜甜圈圖

理想情況下，我需要的是餅圖通過新數據在replot上進行動畫製作。如果動畫選項不工作，也可能是通過裝載在新的數據依次完成，而不是一次全部，以類似的方式此主題：

JQPlot auto refresh chart with dynamic ajax data

問題我已經是這個例子增加了現有的數據，而不是取而代之，我無法使其工作。

這是我到使用例如：

var storedData = [3, 7]; 

var plot1; 
renderGraph(); 

$('.change1').click(function(){ 
doUpdate(); 
}); 
$('.change2').click(function(){ 
doUpdate2(); 
}); 

function renderGraph() { 
if (plot1) { 
    plot1.destroy(); 
} 

var plot1 = $.jqplot('chart1', [storedData], {seriesDefaults: { 
    renderer:$.jqplot.DonutRenderer, 
    rendererOptions:{ 
    sliceMargin: 3, 
    startAngle: -90, 
    showDataLabels: true, 
    dataLabels: 'value' 
    } 
} 
}); 
} 

var newData = [9, 1, 4, 6, 8, 2, 5]; 
function doUpdate() { 
if (newData.length) { 
    var val = newData.shift(); 

     var newVal = new Number(val); /* update storedData array*/ 
     storedData.push(newVal); 
     renderGraph(); 

     setTimeout(doUpdate, 1) 

} else { 
    log("All Done") 
} 
} 
function log(msg) { 
$('body').append('<div>'+msg+'</div>') 
}

http://jsfiddle.net/p9SbP/106/

我現在有這個加載新的數據並更換舊的數據。正如你所看到的，說的動畫選項不影響重製：

var storedData = [3, 7]; 
var newData = [9, 1, 4, 6, 8, 2, 5]; 

$('.change1').click(function(){ 
plot1.replot({data: [newData], resetAxes: true,}); 
}); 

var plot1 = $.jqplot('chart1', [storedData], {animate: true, animateReplot: true, seriesDefaults: { 

    renderer:$.jqplot.DonutRenderer, 

    rendererOptions:{ 
    animation: { 
       show: true 
      }, 

    sliceMargin: 3, 
    startAngle: -90, 
    showDataLabels: true, 
    dataLabels: 'value' 
    } 
} 
});

http://jsfiddle.net/p9SbP/107/

我想一定有把二者結合起來的方式，這樣在動畫替換數據加載/延遲的方式，並能夠控制時間。

任何幫助，非常感謝。

非常感謝

理查德

來源

2015-04-25 Richard Harris

添加新數據之前就清空你的原始數據。例如像這樣：

var wasCleared = false; 
function doUpdate() { 
    // Empty existing data 
    if (!wasCleared) { 
     storedData.length = 0; 
     wasCleared = true; 
    } 
...

這裏的更新您的第一小提琴：http://jsfiddle.net/dekkard/6x82om3x/

來源

2015-04-25 17:19:20 dekkard

您好，感謝您的回覆，似乎什麼，我找我現在嘗試一下。我應該提到，我需要修改一些默認選項以及新的數據，這很容易處理.jqreplot，但不知道這個例子可以輸入到哪裏。有任何想法嗎？ –

你的''''doUpdate（）'''正在調用'''renderGraph（）'''。只需創建一個新的選項對象（例如''{animate：true，animateReplot：true}''），並將其傳遞給'''renderGraph（）''''''''''''$ .jqplot （）'''（你必須合併或替換它的原始選項）。 – dekkard

jqplot動畫餅圖和甜甜圈圖

回答

相關問題