重绘图表，jpPlot

Question

我正在尝试制作一个生成随机线条并每 5 秒重绘一次的图形。它确实重绘但旧的比例重叠。有没有办法在重新绘制新图之前删除旧图？

HTML

<div id="pointg"></div>

JavaScript

var k=0;//if graph() is first time

function graph(){   
    var ga=[];
    for(var j=0;j<11;j++){
        ga[j] = Math.random() *20;
    }
        $(function () {
    $.jqplot('pointg', [[[0, ga[0]], [2, ga[1]], [4, ga[2]], [6, ga[3]], [8, ga[4]],[10, ga[5]],[12, ga[6]],[14, ga[7]],[16, ga[8]],[18, ga[9]],[20, ga[10]],[22, ga[11]] ]],{
        axes: {
            xaxis: {
                ticks: [ '0', '5', '10', '15', '20' ],
            },
            yaxis: {
                ticks: [ '0', '5', '10', '15', '20' ],
            }
        },
        animate: true,
        seriesDefaults: {
                color: '#ffffff',
                markerOptions: {
                    size: 6
                }

        },
        grid: {
            background: '#000000'
        },
    });
});
    if(k!=0){       
    //remove?   
    }
k++;
;}

graph();
setInterval('graph()',5000);

Answer 1

你的意思是轴刻度标签是这样画在彼此之上的吗？

您可以使用destroy()方法在绘制另一个之前破坏现有的情节。为此，您需要将 jqplot 分配给全局变量：

var plot;

function graph(){
    ...  
    plot = $.jqplot('pointg', [...],{
        axes: {
            ...
        },
        animate: true,
        seriesDefaults: {
            ...
        },
        grid: {
            ...
        },
    });

在调用 $.jqplot(...) 之前，确保检查并销毁现有图：

if (plot) {
    plot.destroy();
}

可以找到完整的示例 here。这将导致以下情况，其中轴刻度标签不会呈现在彼此之上：

重绘图表，jpPlot

Redrawing graph, jpPlot

javascript

jqplot