您的位置：首页 > 编程语言 > Python开发

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

2017-09-12 15:29 411 查看

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>开始时间 <inputtype="text"name="start_time"class="time-input"placeholder="example:
2017-9-1"value={{start_time}}>
    结束时间 <inputtype="text"name="end_time"class="time-input"placeholder="example:
2017-9-7"value={{end_time}}>
    <selectname="col_name">
           <optionvalue="toatal_cost">请选择查看项</option>
<optionvalue="cpu_idl">CPU
idl</option>
    <optionvalue="memary_used">内存使用</option>

   </select>
    <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.csdn.net/xx123er/article/details/77945283
另一个就是highcharts了

https://api.hcharts.cn/highcharts#title
该网站是highcharts中文api，各参数说明

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： python flask highcharts 趋势图报表

相关文章推荐

新的分享

章节导航