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

1.先看实现效果

制作最后效果

步骤

1.说路径结构

2.html的写法

模板 highcharts_line_labels.html

加载参数

< html >

< head >

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

< title > 性能趋势图 title >

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

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

head >

< body >

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

    < h3 style= " color : #FF6633 " > xxxx h3 >

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

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

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

      < select name= "col_name" >

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

      < option value= "cpu_idl" > CPU idl option >

     < option value= "memary_used" > 内存使用 option >

     

    select >

      < input type= "submit" class= "startButton" value= "查看" >

form >

div >

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

< script language= "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.csdn.net/xx123er/article/details/77945283

另一个就是highcharts了

https://api.hcharts.cn/highcharts#title

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

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