Morris图表附加了ajax的新数据

Question

我一直致力于一个项目，我必须在莫里斯图表中显示一些订单细节。图表的数据采用JSON格式，并作为servlet的响应。

有一个应用按钮和来自datepicker的to，当我按下apply按钮时，JavaScript函数解析来自servlet的数据。它工作正常。我已将图表div放在我的网页中，我只在其中加载我的JSON数据。

当我第一次按申请时，数据被加载并使用morris提供的 setData（）功能显示在图表中。如下：

但是当我第二次按下“应用”按钮时，它会将数据附加到当前图表，如下所示：

使这成为可能的javascript函数如下：

function parselineData(method,url,id,no,keyx,keyy)
{   var datefrom=document.getElementById("from"+no).value;
    var dateto=document.getElementById("to"+no).value;
    if(datefrom=="")
    {   document.getElementById("lfrom"+no).style.color="red";
        document.getElementById("lfrom"+no).innerHTML="*From:";
    }
    else
    {   document.getElementById("lfrom"+no).style.color="black";
        document.getElementById("lfrom"+no).innerHTML="From:";
    }
    if(dateto=="")
    {   document.getElementById("lto"+no).style.color="red";
        document.getElementById("lto"+no).innerHTML="*To:";
    }
    else
    {   document.getElementById("lto"+no).style.color="black";
        document.getElementById("lto"+no).innerHTML="To:";
    }
    if(datefrom==""||dateto=="")
    {
    }
    else
    {   var xmlhttp=new XMLHttpRequest();
        var chart=Morris.Line
        ({  element: id,
            data:[{date:"0",orders:"0"}],
            xkey: keyx,
            ykeys: [keyy],
            labels: [keyy],
            smooth: true,
            resize: false
        });
        var data;
        xmlhttp.onreadystatechange=function()
        {   if (xmlhttp.readyState==4&&xmlhttp.status==200)
            {   data=JSON.parse(xmlhttp.responseText);
                //alert("My Data is" + data.toSource());
                chart.setData(data);
            }
        }
        xmlhttp.open(method,url+"?from"+no+"="+datefrom+"&to"+no+"="+dateto, true);
        xmlhttp.send();
    }
}

请提供帮助，以便我可以在不附加数据的情况下显示数据。

Answer 1

当图表的容器已包含图表并且您调用setData并在第一个图表的旁边插入另一个新图表时，会发生这种情况。

在调用setData之前，您应该清空容器。类似的东西：

document.getElementById(id).innerHTML = "";
chart.setData(data);