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

来源：互联网发布：淘宝包邮在哪里设置编辑：程序博客网时间：2024/06/06 14:12

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:0auto"></div>

<scriptlanguage="JavaScript">

   vartitl={{tit|safe}}

   varxaxi={{xax|safe}}

   varyaxi={{yax|safe}}

   varserie={{seri|safe}}

$(document).ready(function() {

  vartitle = titl;

  varxAxis = xaxi;

  varyAxis = yaxi;

  varseries=serie;

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

  varplotOptions = {

     line: {

        dataLabels: {

           enabled:false

},

        enableMouseTracking:true

}

};

  varcredits={

      enable:false

};

   varlegend = {

     layout:'vertical',

     align:'right',

     verticalAlign:'middle',

     borderWidth:0

};

  varjson = {};

   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，各参数说明

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

阅读全文

0 0