flask+ highcharts实现报表转换成趋势图(1)

1.先看实现效果

制作最后效果

步骤

1.说路径结构

2.html的写法

模板highcharts_line_labels.html

加载参数

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;
charset=utf-8"/>

<title>性能趋势图</title>

<scriptsrc="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<scriptsrc="http://code.highcharts.com/highcharts.js"></script>

</head>

<body>

<divstyle="width:100%;text-align:center;margin:0px
auto">

   <h3style="color:#FF6633">xxxx</h3>

<formmethod="POST"action="{{
url_for('index') }}">

   <p>开始时间&nbsp<inputtype="text"name="start_time"class="time-input"placeholder="example:
2017-9-1"value={{start_time}}>

    结束时间&nbsp<inputtype="text"name="end_time"class="time-input"placeholder="example:
2017-9-7"value={{end_time}}>

    &nbsp<selectname="col_name">

           <optionvalue="toatal_cost">请选择查看项</option>

     <optionvalue="cpu_idl">CPU
idl</option>

    <optionvalue="memary_used">内存使用</option>

   </select>

    &nbsp<inputtype="submit"class="startButton"value="查看">

</form>

</div>

<divid="container"style="width:1000px;height:450px;margin:0
auto"></div>

<scriptlanguage="JavaScript">

   var
titl={{tit|safe}}

   var
xaxi={{xax|safe}}

   var
yaxi={{yax|safe}}

   var
serie={{seri|safe}}

$(document).ready(function()
{

  var
title 
= titl;

  var
xAxis 
= xaxi;

  var
yAxis 
= yaxi;

  var
series=
serie;

   var
subtitle 
= {text:'--此为当前查看项 ~lxx'};

  var
plotOptions 
= {

     line: {

        dataLabels: {

           enabled:false

},

        enableMouseTracking:true

}

};

  var
credits={

      enable:false

};

   var
legend 
= {

     layout:'vertical',

     align:'right',

     verticalAlign:'middle',

     borderWidth:0

};

  var
json 
= {};

   json.credits=credits;

   json.legend=legend;

  json.title=
title;

  json.subtitle=
subtitle;

  json.xAxis=
xAxis;

  json.yAxis=
yAxis; 

  json.series=
series;

  json.plotOptions=
plotOptions;

  $('#container').highcharts(json);

});

</script>

</body>

</html>

此处有两个要点，一个是参数传递

flask的参数传递在我的另一文章里有，可参考

http://blog.****.net/xx123er/article/details/77945283

另一个就是highcharts了

该网站是highcharts中文api，各参数说明

后面文章再分别介绍各模块