Как перевести линейный график Highchart с простого HTML на Flask? - PullRequest
Новая
       12

Как перевести линейный график Highchart с простого HTML на Flask?

0 голосов
/ 21 декабря 2018

Я новичок в фреймворке Flask.Я хочу реализовать график с веб-сайта Highcharts.Мне удалось реализовать линейный график в простом html-файле с некоторым кодом JavaScript с помощью CDN, а также немного его настроить.Ниже приведен код из 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>

вывод линейной диаграммы

Я долго пытался реализовать эту настраиваемую диаграмму вКолба, но я получаю ошибки или иногда просто пустой экран.Пытался увидеть некоторые примеры в сети, но получил только примеры гистограммы.Ссылаясь на тех, кого я пытался реализовать на моем графике.Ниже приведен код для того же.

/ 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 
    });
});

/ static / 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>

1 Ответ

0 голосов
/ 21 января 2019

Вот пример моих работ с вашим измененным кодом:

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.

...