html jQuery的实现折线图

Posted 2021-05-10

    <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 + '&nbsp;&nbsp;';
				},
				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>