使用flot将另一个系列添加到现有绘图中
我需要知道如何使用Flot轻松地将另一个系列添加到现有的绘图中。
以下是我目前如何绘制单个系列的方法：
function sendQuery() { var host_name = $('#hostNameInput').val(); var objectName = $('#objectNameSelect option:selected').text(); var instanceName = $('#instanceNameSelect option:selected').text(); var counterName = $('#counterNameSelect option:selected').text(); $.ajax({ beforeSend: function () { $('#loading').show(); }, type: "GET", url: "http://okcmondev102/cgi-bin/itor_PerfQuery.pl?machine=" + host_name + "&objectName=" + objectName + "&instanceName=" + instanceName + "&counterName=" + counterName, dataType: "XML", success: function (xml) { var results = new Array(); var counter = 0; var $xml = $.xmlDOM(xml); $xml.find('DATA').each(function () { results[counter] = new Array(2); results[counter][0] = $(this).find('TIMESTAMP').text(); results[counter][1] = $(this).find('VALUE').text(); counter++; }); plot = $.plot($("#resultsArea"), [{ data: results, label: host_name }], { series: { lines: { show: true } }, xaxis: { mode: "time", timeformat: "%m/%d/%y %h:%S%P" }, colors: ["#000099"], crosshair: { mode: "x" }, grid: { hoverable: true, clickable: true } }); 您只需添加其他结果集：
// build two data sets var dataset1 = new Array(); var dataset2 = new Array(); var $xml = $.xmlDOM(xml); $xml.find('DATA').each(function(){ // use the time stamp for the x axis of both data sets dataset1[counter][0] = $(this).find('TIMESTAMP').text(); dataset2[counter][0] = $(this).find('TIMESTAMP').text(); // use the different data values for the y axis dataset1[counter][1] = $(this).find('VALUE1').text(); dataset2[counter][2] = $(this).find('VALUE2').text(); counter++; }); // build the result array and push the two data sets in it var results = new Array(); results.push({label: "label1", data: dataset1}); results.push({label: "label2", data: dataset2}); // display the results as before plot = $.plot($("#resultsArea"), results, { // your display options });
在高级别，您需要扩展调用itor_PerfQuery.pl的结果以包含其他系列数据。 然后，您需要将“结果”变量设置为多维数组以支持其他数据，并且您需要更新当前的xml“find”循环，该循环会相应地填充结果。 代码的其余部分应该保持不变，因为flot应该能够绘制扩展数据集。 我认为对flot示例的评论会帮助你。 祝你好运。