Javascript: Flotr2 Examples : data visualization with javascript

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Flotr2 Examples : data visualization with javascript</title>
	<meta name="Description" content="geovindu"/>
<meta name="Keywords" content="geovindu"/>
<meta name="author" content="geovindu"/>
	 
  <script src="../ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
	
  <link rel='stylesheet' href='../bootstrap/4.6.2/css/bootstrap.min.css'>
  <link rel="stylesheet" href="../css/main.css">
	<style type="text/css">
      body {
        margin: 0px;
        padding: 0px;
      }
      #container {
        width : 600px;
        height: 384px;
        margin: 8px auto;
      }
    </style>

</head>

<body>
	 <script  src="../js/jquery-3.6.0.js"></script>
	<div id="container"></div>
    <!--[if IE]>
    <script type="text/javascript" src="flotr2.ie.min.js"></script>
    <![endif]-->   
    <script type="text/javascript" src="flotr2.min.js"></script>
	<script type="text/javascript">
		//https://github.com/HumbleSoftware/Flotr2  geovindu edit
		//https://humblesoftware.com/flotr2#!basic
		//https://www.flotcharts.org/flot/examples/
(function() {

  var d1 = [
	  [
		  [0,1085],
		  [1,5195],
		  [2,17751],
		  [3,72080],
		  [4,24974],
		  [5,23903],
		  [6,17903],
		  [7,11236],
		  [8,29],
		  [9,20]
	  ]];                                 // First data series
   var d2 = [
	   [0,"2013"],
	   [1,"2014"],
	   [2,"2015"],
	   [3,"2016"],
	   [4,"2017"],
	   [5,"2018"],
	   [6,"2019"],
	   [7,"2020"],
	   [8,"2021"],
	   [9,"2022"]]; 
   console.log(d1);
   console.log(d2);
  // Draw the graph
  Flotr.draw(document.getElementById("container"),d1,{
	  title:"geovindu,涂聚文",
	  coloer:["#89AFD2"],
      bars : {
        show : true,  
        barWidth : 0.5
      },
      mouse : {
        track : true,
        relative : true
      },
      yaxis : {
        min : 0,       
		tickDecimals:0
      },
	  xaxis:
		{
			ticks:d2
		}
    });
})();
</script>
</body>
</html>

　　

 

 

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Flotr2 Examples : data visualization with javascript</title>
	<meta name="Description" content="geovindu"/>
<meta name="Keywords" content="geovindu"/>
<meta name="author" content="geovindu"/>
	 
  <script src="ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
	
  <link rel='stylesheet' href='bootstrap/4.6.2/css/bootstrap.min.css'>
  <link rel="stylesheet" href="css/main.css">
	<style type="text/css">
      body {
        margin: 0px;
        padding: 0px;
      }
      #container {
        width : 600px;
        height: 384px;
        margin: 8px auto;
      }
    </style>

</head>

<body>
	 <script  src="js/jquery-3.6.0.js"></script>
	<div id="container"></div>
    <!--[if IE]>
    <script type="text/javascript" src="ajax/libs/Flotr2/flotr2.ie.min.js"></script>
    <![endif]-->   
    <script type="text/javascript" src="ajax/libs/Flotr2/flotr2.min.js"></script>
	<script type="text/javascript">
		//https://github.com/HumbleSoftware/Flotr2  geovindu edit
		//https://humblesoftware.com/flotr2#!basic
		//https://www.flotcharts.org/flot/examples/
(function() {

  var d1 = [
	  [
		  [0,1085],
		  [1,5195],
		  [2,17751],
		  [3,72080],
		  [4,24974],
		  [5,23903],
		  [6,17903],
		  [7,11236],
		  [8,29],
		  [9,20]
	  ]];                                 // First data series
   var d2 = [
	   [0,"2013"],
	   [1,"2014"],
	   [2,"2015"],
	   [3,"2016"],
	   [4,"2017"],
	   [5,"2018"],
	   [6,"2019"],
	   [7,"2020"],
	   [8,"2021"],
	   [9,"2022"]]; 
   console.log(d1);
   console.log(d2);
  // Draw the graph
  Flotr.draw(document.getElementById("container"),d1,{
	  title:"2013年--2020年生日数据 geovindu,涂聚文",
	  colors:["#DF021D"],
      bars : {
        show : true,  
        barWidth : 0.5
      },
      mouse : {
        track : true,
        relative : true
      },
      yaxis : {
        min : 0,       
		tickDecimals:0
      },
	  xaxis:
		{
			ticks:d2
		},
	  grid:{
		  horizontalLines:true,
		  verticalLines:true
	  }
    });
})();
</script>
</body>
</html>

　　

posted @ 2022-12-12 12:03  ®Geovin Du Dream Park™  阅读(48)  评论(0)    收藏  举报