重绘图形,jpPlot

时间:2015-11-27 16:33:25

标签: javascript jqplot

我正在尝试制作一个生成随机线条的图形,并且每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);

1 个答案:

答案 0 :(得分:0)

你的意思是轴刻度标签是这样画在彼此之上的吗? enter image description here

您可以使用destroy()方法在绘制另一个绘图之前销毁现有的绘图。为此,您需要将jqplot分配给全局变量:

var plot;

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

在你调用$ .jqplot(...)之前,请确保检查并销毁现有的情节:

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

可以找到完整的示例here。它将导致以下情况:轴刻度标签不会彼此重叠:

enter image description here