html jQuery的实现折线图
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html jQuery的实现折线图相关的知识,希望对你有一定的参考价值。
<style>
.demo-placeholder {
height: 280px
}
</style>
<!--折线图会出现到这里-->
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="demo-container">
<div id="chart_plot" class="demo-placeholder"></div>
</div>
</div>
<!-- Flot 图标插件,用于画图,美观过Echat-->
<script src="static/js/jquery.flot.js"></script>
<script src="static/js/jquery.flot.pie.js"></script>
<script src="static/js/jquery.flot.time.js"></script>
<script src="static/js/jquery.flot.stack.js"></script>
<script src="static/js/jquery.flot.resize.js"></script>
<!-- Flot plugins -->
<script src="static/js/jquery.flot.orderBars.js"></script>
<script src="static/js/jquery.flot.spline.min.js"></script>
<script>
var chart_data = {% raw info['reg_datas'] %}
var chart_data2 = {% raw info['take_datas'] %}
var chart_data3 = {% raw info['login_datas'] %}
var chart_data_settings = {
grid: {
show: true,
aboveData: true,
color: "#3f3f3f",
labelMargin: 10,
axisMargin: 0,
borderWidth: 0,
borderColor: null,
minBorderMargin: 5,
clickable: true,
hoverable: true,
autoHighlight: true,
mouseActiveRadius: 100
},
series: {
lines: {
show: true,
fill: true,
lineWidth: 2,
steps: false
},
points: {
show: true,
radius: 4.5,
symbol: "circle",
lineWidth: 3.0
}
},
legend: {
position: "ne",
margin: [0, -25],
noColumns: 0,
labelBoxBorderColor: null,
labelFormatter: function(label, series) {
return label + ' ';
},
width: 40,
height: 1
},
colors: ['#96CA59', '#3F97EB', '#72c380', '#6f7a8a', '#f7cb38', '#5a8022', '#2c7282'],
shadowSize: 0,
tooltip: true,
tooltipOpts: {
content: "%s: %y.0",
xDateFormat: "%d/%m",
shifts: {
x: -30,
y: -50
},
defaultTheme: false
},
yaxis: {
min: 0
},xaxis: {
mode: "time",
minTickSize: [1, "day"],
timeformat: "%y-%m-%d",
}
};
if ($("#chart_plot").length){
$.plot( $("#chart_plot"),
[{
label: "{{info['reg_datas_name']}}",
data: chart_data,
lines: {
// fillColor: "rgba(150, 202, 89, 0.12)"
fillColor:"#fff"
},
points: {
fillColor: "#fff" }
},{
label: "{{info['take_datas_name']}}",
data: chart_data2,
lines: {
fillColor: "#fff"
},
points: {
fillColor: "#fff" }
},{
label: "{{info['login_datas_name']}}",
data: chart_data3,
lines: {
fillColor: "#fff"
},
points: {
fillColor: "#fff" }
}], chart_data_settings);
}
// 鼠标放在chart显示相应的数据
$("<div id='tooltip'></div>").css({
position: "absolute",
display: "none",
border: "1px solid #fdd",
padding: "2px",
"background-color": "#fee",
opacity: 0.80
}).appendTo("body");
$("#chart_plot").bind("plothover", function (event, pos, item) {
if (item) {
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
// x是string,转int,再转日期
var time = new Date(parseInt(x));
var ymdhis = "";
ymdhis += time.getUTCFullYear() + "-";
ymdhis += (time.getUTCMonth()+1) + "-";
ymdhis += time.getUTCDate();
$("#tooltip").html(item.series.label + ": 日期=" + ymdhis + " 数量= " + parseInt(y))
.css({top: item.pageY+5, left: item.pageX+5})
.fadeIn(200);
} else {
$("#tooltip").hide();
}
});
</script>
以上是关于html jQuery的实现折线图的主要内容,如果未能解决你的问题,请参考以下文章
python plb 教程 实现折线图 (令含有 题目,标识,颜色,中文乱码解决)源码