JS繪圖Flot如何實現可選顯示曲線圖功能

阿新 • • 發佈：2020-10-18

剛剛做了可以動態去重新整理的曲線圖，下面再來實現一個可以選擇顯示那個顯示值的曲線圖。

首先看一下效果：

下面的多選框，選擇以後會觸發一個事件，等同與重新繪製了曲線圖。

重點是需要的資料的格式，我們來看一下程式碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flot可選繪圖測試</title>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript">
$(function () {
	// 顯示的資料，注意物件格式
  var datasets = {
    "usa": {
      label: "USA",data: [[1988,483994],[1989,479060],[1990,457648],[1991,401949],[1992,424705],[1993,402375],[1994,377867],[1995,357382],[1996,337946],[1997,336185],[1998,328611],[1999,329421],[2000,342172],[2001,344932],[2002,387303],[2003,440813],[2004,480451],[2005,504638],[2006,528692]]
    },"russia": {
      label: "Russia",218000],203000],171000],42500],37600],36600],21700],19200],21300],13600],14000],19100],23600],25100],26100],31100],34700]]
    },"uk": {
      label: "UK",62982],62027],60696],62348],58560],56393],54579],50818],50554],48276],47691],47529],47778],48760],50949],57452],60234],60076],59213]]
    },"germany": {
      label: "Germany",55627],55475],58464],55134],52436],47139],43962],43238],42395],40854],40993],41822],41147],40474],40604],40044],38816],38060],36984]]
    },"denmark": {
      label: "Denmark",3813],3719],3722],3789],3720],3730],3636],3598],3610],3655],3695],3673],3553],3774],3728],3618],3638],3467],3770]]
    },"sweden": {
      label: "Sweden",6402],6474],6605],6209],6035],6020],6000],6018],3958],5780],5954],6178],6411],5993],5833],5791],5450],5521],5271]]
    },"norway": {
      label: "Norway",4382],4498],4535],4398],4766],4441],4670],4217],4275],4203],4482],4506],4358],4385],5269],5066],5194],4887],4891]]
    }
  };
	// 物件要顯示的顏色，使用JQuery迴圈，然後為物件增加一個 color 屬性
  var i = 0;
  $.each(datasets,function(key,val) {
    val.color = i;
    ++i;
  });  
  // 增加選擇可顯示國家的多選框
  var choiceContainer = $("#choices");
  $.each(datasets,val) {
    choiceContainer.append('<br/><input type="checkbox" name="' + key +
                '" checked="checked" id="id' + key + '">' +
                '<label for="id' + key + '">'
                + val.label + '</label>');
  });
	// 為可選框增加點選事件
  choiceContainer.find("input").click(plotAccordingToChoices); 
	// 多選框點選事件，用於移除或增加某個國家的顯示
  function plotAccordingToChoices() {
    var data = [];
    choiceContainer.find("input:checked").each(function () {
			// 多選框的名字
      var key = $(this).attr("name");
			// 有該屬性，並且有該屬性為Key的資料，則增加到顯示區
      if (key && datasets[key])
        data.push(datasets[key]);
    });
		// 如果有資料則設定資料。等同與把圖形重繪了，所以移除某個國家時可以不再顯示
    if (data.length > 0)
      $.plot($("#placeholder"),data,{
        yaxis: { min: 0 },xaxis: { tickDecimals: 0 }
      });
  }
	// 呼叫一次以顯示某寫國家的值
  plotAccordingToChoices();
});
</script>
</head>
<body>
<div id="placeholder" style="width:600px;height:300px;"></div>
<p id="choices">Show:</p>
</body>
</html>

選擇某個多選框的話會顯示其曲線。

以上示例來自官方並簡單修改和增加了註釋，希望對一些人有所幫助。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。