<!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>
标签：visualization,javascript,data,Javascript,Flotr2,d2,true,d1 From： https://www.cnblogs.com/geovindu/p/16975704.html