时间戳

首页 > 解决方案 > 如何将 Highchart 的折线图从简单的 html 转换为 Flask？

javascript - 如何将 Highchart 的折线图从简单的 html 转换为 Flask？

问题描述

我是 Flask 框架的新手。我想从 Highcharts 网站实现一个折线图。在 CDN 的帮助下，我设法用一些 JavaScript 代码在一个简单的 html 文件中实现了折线图，并且还设法对其进行了一些自定义。下面是来自 html 文件的代码以及输出。

<!DOCTYPE html>
<html>
<head>
    <title>hello</title>
    <!-- <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

    <!-- For line-chart -->
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/series-label.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <style type="text/css">
        #container {
        min-width: 310px;
        max-width: 800px;
        height: 400px;
        margin: 0 auto
}
    </style>
</head>
<body>

    <div id="container" class="container"></div>

<script type="text/javascript">

    Highcharts.chart('container', {

    title: {
        text: "My chart"
    },

    subtitle: {
        text: "Student data"
    },

    yAxis:{
        type:'linear',
        title:{
            text:'Y-Axis data'
        }
    },

    xAxis:{
        type:'linear',
        title:{
            text:'X-Axis data'
        }
    },

    legend:{
        enabled: true
    },

    series: [
    {
        name: 'line',
        data: [{x:2,y:7},{x:5,y:19},{x:7,y:10},{x:13,y:45},{x:17,y:6},{x:21,y:66},{x:28,y:28},{x:30,y:51},{x:39,y:44},{x:50,y:91}]
    }]
});
</script>
</body>
</html>

折线图输出

我一直在尝试在 Flask 中实现这个自定义图表，但我遇到了错误，或者有时只是一个空白屏幕。试图在网上看到一些例子，但只有条形图的例子。参考那些我试图实现我的折线图的人。下面是相同的代码。

/app.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
@app.route('/index')
def index(chartID = 'chart_ID', chart_type = 'line', chart_height = 350):
    chart={"renderTo":chartID,"type":chart_type,"height":chart_height}
    # series = [{"name": 'Label1', "data": [1,2,3]}, {"name": 'Label2', "data": [4, 5, 6]}]
    # title = {"text": 'My Title'}
    # xAxis = {"categories": ['xAxis Data1', 'xAxis Data2', 'xAxis Data3']}
    # yAxis = {"title": {"text": 'yAxis Label'}}
    series=[{"name":'line',"data":[{"x":2,"y":7},{"x":5,"y":19},{"x":7,"y":10},{"x":13,"y":45},{"x":17,"y":6},{"x":21,"y":66},{"x":28,"y":28},{"x":30,"y":51},{"x":39,"y":44},{"x":50,"y":91}]}]
    title={"text":'My chart'}
    xAxis={"type":'linear',"title":{"text":'X-Axis data'}}
    yAxis={"type":'linear',"title":{"text":'Y-Axis data'}}
    legend={"enabled":'true'}
    return render_template('index.html', chartID=chartID, chart=chart, series=series, title=title, xAxis=xAxis, yAxis=yAxis,legend=legend)

if __name__ == "__main__":
    app.run(debug = True, host='127.0.0.1', port=5000, passthrough_errors=True)

/static/js/main.js

$(document).ready(function() {
    $(chart_id).highcharts.chart({
        chart: chart,
        title: title,
        xAxis: xAxis,
        yAxis: yAxis,
        series: series,
        legend: legend 
    });
});

/静态/main.css

#container {
    min-width: 310px;
    max-width: 800px;
    height: 400px;
    margin: 0 auto
}

/templates/index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

        <!-- For line-chart -->
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/modules/series-label.js"></script>
        <script src="https://code.highcharts.com/modules/exporting.js"></script>
        <script src="https://code.highcharts.com/modules/export-data.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="author" content="">
        <meta charset="utf-8">

        {% block head %}
            <title>{% block title %} Title!{% endblock %}</title>
        {% endblock %}
    </head>

    <body>
        <div id={{chartID|safe}} class="chart" style="height: 500px; width: 1000px"></div>
        <script>
            var chart_id = {{ chartID|safe }}
            var series = {{ series|safe }}
            var title = {{ title|safe }}
            var xAxis = {{ xAxis|safe }}
            var yAxis = {{ yAxis|safe }}
            var chart = {{ chart|safe }}
            var legend = {{legend|safe}}
        </script>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
            <script src="http://code.highcharts.com/highcharts.js"></script>
            <script src="../static/js/main.js"></script>
    </body>
</html>

标签： javascripthighchartsdata-visualization

解决方案

这是我修改后的代码的作品示例：

HTML：

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <meta charset="utf-8">
    {% block head %}
        <title>{% block title %}Title!{% endblock %}</title>
    {% endblock %}
</head>

<body>
    <div id={{ chartID|safe }} class="chart" style="height: 500px; width: 1000px"></div>
    <script>
        var chart_id = {{ chartID|safe }}
        var series = {{ series|safe }}
        var title = {{ title|safe }}
        var xAxis = {{ xAxis|safe }}
        var yAxis = {{ yAxis|safe }}
        var chart = {{ chart|safe }}
        var legend = {{ legend|safe}}
    </script>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
  <script src="../static/js/graph.js"></script>
</body>

JavaScript：

 $(document).ready(function() {
  $(chart_id).highcharts({
     chart: chart,
     title: title,
     xAxis: xAxis,
     yAxis: yAxis,
     series: series,
     legend: legend
  });
 });

Python：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
@app.route('/index')
def index(chartID = 'chart_ID', chart_type = 'line', chart_height = 500):
  chart = {"renderTo": chartID, "type": chart_type, "height": chart_height,}
  series=[{"name":'line',"data":[{"x":2,"y":7},{"x":5,"y":19},{"x":7,"y":10},{"x":13,"y":45},{"x":17,"y":6},{"x":21,"y":66},{"x":28,"y":28},{"x":30,"y":51},{"x":39,"y":44},{"x":50,"y":91}]}]
  title={"text":'My chart'}
  xAxis={"type":'linear',"title":{"text":'X-Axis data'}}
  yAxis={"type":'linear',"title":{"text":'Y-Axis data'}}
  legend={"enabled": 'true'}

  return render_template('index.html', chartID=chartID, chart=chart, series=series, title=title, xAxis=xAxis, yAxis=yAxis, legend=legend)

if __name__ == "__main__":
 app.run(debug = True, host='127.0.0.1', port=5000, passthrough_errors=True)

当您尝试复制此 Python 代码时，请记住在变量前格式化等于空格（例如，每个变量前一个制表符 - [tab]chart = {...} [tab]series = {...} 等） - 这是一个Python 中所需的格式。

推荐阅读