Morris 图表附加了来自 ajax 的新数据

Question

我一直在做一个项目，我必须在莫里斯图表中显示一些订单详细信息。 chart 的数据是 JSON 格式，作为 servlet 的响应。

有一个应用按钮和一个日期选择器，当我按下应用按钮时，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);

Morris 图表附加了来自 ajax 的新数据

Morris chart appends new data from ajax

javascript

ajax

json

morris.js