Question

我正在创建Flask应用程序，对于要使用Highcharts的图表元素，我设法在网页上显示了一个图表，但是当我尝试仅显示一个图表时，渲染。

我已经尝试了很多方法来开始，更改变量名称，逐行检查代码，以查看一张图表是否存在问题。注释掉一个图表，然后注释另一个图表，以确保它们都能正常工作。最后，我检查了Chrome中的脚本，看看返回了什么，一切看起来都很好。

我认为问题出在脚本元素的变量声明中。如果我都将其保留为chart_id，则我认为第一个图表已被覆盖，但是如果将var更改为chart_id1和chart_id2，则没有任何图表返回？

我试图将“ div id = {{chart1ID | safe}}”下的所有变量标记为chart1_id，series1等...，并将“ id = {{chart2ID | safe}}”下的所有变量标记为2.当我检查Chrome中的代码时，所有内容看起来都可以正确返回，但是没有图表呈现。

.../static/main.js
$(document).ready(function() {
$(chart1_id).highcharts({
    chart1: chart1,
    title1: title1,
    xAxis1: xAxis1,
    yAxis1: yAxis1,
    series1: series1
})
});

$(document).ready(function() {
$(chart2_id).highcharts({
    chart2: chart2,
    title2: title2,
    xAxis2: xAxis2,
    yAxis2: yAxis2,
    series2: series2
})});

HTML

..../templates/index.html
    <body>

<div id={{ chart1ID|safe }} class="chart1" style="height: 500px; width: 500px">
    <script>
        var chart_id = {{ chart1ID|safe }}
        var series = {{ series1|safe }}
        var title = {{ title1|safe }}
        var xAxis = {{ xAxis1|safe }}
        var yAxis = {{ yAxis1|safe }}
        var chart = {{ chart1|safe }}
    </script>
    </div>

    <br>
    <P>***********************************************************************************</P>

    <div id={{ chart2ID|safe }} class="chart2" style="height: 500px; width: 500px">
    <script>
        var chart_id = {{ chart2ID|safe }}
        var series = {{ series2|safe }}
        var title = {{ title2|safe }}
        var xAxis = {{ xAxis2|safe }}
        var yAxis = {{ yAxis2|safe }}
        var chart = {{ chart2|safe }}
    </script>
    </div>

        <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/main.js"></script>
</body>

Python

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
@app.route('/index')
def index(chart1ID = 'chart1_ID', chart1_type = 'line', chart1_height = 500, chart2ID = 'chart2_ID', chart2_type = 'line', chart2_height = 500):
  chart1 = {"renderTo": chart1ID, "type": chart1_type, "height": chart1_height,}
  series1 = [{"name": 'Label1', "data": [1,2,3]}, {"name": 'Label2', "data": [9, 10, 11]}]
  title1 = {"text": 'Chart 1 Title'}
  xAxis1 = {"categories": ['xAxis Data1', 'xAxis Data2', 'xAxis Data3']}
  yAxis1 = {"title": {"text": 'yAxis Label'}}

  chart2 = {"renderTo": chart2ID, "type": chart2_type, "height": chart2_height,}
  series2 = [{"name": 'Label1', "data": [1,2,3]}, {"name": 'Label2', "data": [14, 15, 20]}]
  title2 = {"text": 'Second Chart Title'}
  xAxis2 = {"categories": ['xAxis Data1', 'xAxis Data2', 'xAxis Data3']}
  yAxis2 = {"title": {"text": 'yAxis Label'}}
  return render_template('index.html',
                         chart1ID=chart1ID, chart1=chart1, series1=series1, title1=title1, xAxis1=xAxis1, yAxis1=yAxis1,
                         chart2ID=chart2ID, chart2=chart2, series2=series2, title2=title2, xAxis2=xAxis2, yAxis2=yAxis2)

if __name__ == "__main__":
    app.run(debug = True)

此刻我看不到树木用的木头，我想这是我所忽略的基本知识。这是我目前正在使用的所有代码，我从一个更大的应用程序中删除了它，以便在发布问题时更加清楚。

谢谢

Answer 1

您需要做的就是将HTML文档中的var更改为var series1，title1等。我的工作代码：

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={{ chart1ID|safe }} class="chart1" style="height: 500px; width: 1000px"></div>
    <script>
        var chart1_id = {{ chart1ID|safe }}
        var series1 = {{ series1|safe }}
        var title1 = {{ title1|safe }}
        var xAxis1 = {{ xAxis1|safe }}
        var yAxis1 = {{ yAxis1|safe }}
        var chart1 = {{ chart1|safe }}
    </script>

    <div id={{ chart2ID|safe }} class="chart2" style="height: 500px; width: 1000px">
 <script>
         var chart2_id = {{ chart2ID|safe }}
         var series2 = {{ series2|safe }}
         var title2 = {{ title2|safe }}
         var xAxis2 = {{ xAxis2|safe }}
         var yAxis2 = {{ yAxis2|safe }}
         var chart2 = {{ chart2|safe }}
 </script>
 </div>
        <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() {
  $(chart1_id).highcharts({
    chart: chart1,
    title: title1,
    xAxis: xAxis1,
    yAxis: yAxis1,
    series: series1
 });
});

$(document).ready(function() {
 $(chart2_id).highcharts({
  chart: chart2,
  title: title2,
  xAxis: xAxis2,
  yAxis: yAxis2,
  series: series2
})});

和Python：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
@app.route('/index')
def index(chart1ID = 'chart1_ID', chart1_type = 'line', chart1_height = 500, 
chart2ID = 'chart2_ID', chart2_type = 'line', chart2_height = 500):
  chart1 = {"renderTo": chart1ID, "type": chart1_type, "height": chart1_height,}
  series1 = [{"name": 'Label1', "data": [1,2,3]}, {"name": 'Label2', "data": [9, 10, 11]}]
  title1 = {"text": 'Chart 1 Title'}
  xAxis1 = {"categories": ['xAxis Data1', 'xAxis Data2', 'xAxis Data3']}
  yAxis1 = {"title": {"text": 'yAxis Label'}}


  chart2 = {"renderTo": chart2ID, "type": chart2_type, "height": chart2_height,}
  series2 = [{"name": 'Label1', "data": [1,2,3]}, {"name": 'Label2', "data": [14, 15, 20]}]
  title2 = {"text": 'Second Chart Title'}
  xAxis2 = {"categories": ['xAxis Data1', 'xAxis Data2', 'xAxis Data3']}
  yAxis2 = {"title": {"text": 'yAxis Label'}}
  return render_template('index.html', chart1ID=chart1ID, chart1=chart1, series1=series1, title1=title1, xAxis1=xAxis1, yAxis1=yAxis1, chart2ID=chart2ID, chart2=chart2, series2=series2, title2=title2, xAxis2=xAxis2, yAxis2=yAxis2)

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

当您尝试复制此Python代码时，请记住在变量之前设置等号格式（例如，在每个变量之前使用一个制表符-[tab] chart1 = {...} [tab] series1 = {...}等）。

Answer 2

在您的第一个代码块中，为高图表提供图表选项，例如chart1, title1等。高图表期望这些选项为chart, title，并且两个图表的结构必须相同（API：{{ 3}}）：

.../static/main.js
$(document).ready(function() {
$(chart1_id).highcharts({
    chart: chart1,
    title: title1,
    xAxis: xAxis1,
    yAxis: yAxis1,
    series: series1
})
});

$(document).ready(function() {
$(chart2_id).highcharts({
    chart: chart2,
    title: title2,
    xAxis: xAxis2,
    yAxis: yAxis2,
    series: series2
})});

在HTML代码中，您创建了全局js变量，它们在两个地方的名称相同，这就是第二张图表的选项将覆盖第一张图表的原因。也许更好的主意是使用图表选项创建两个全局对象（chartOptions1和chartOptions2），然后使用这些对象初始化图表，或者仅使用python变量立即在highcharts图表对象中初始化图表：

HTML：

..../templates/index.html
<body>

    <div id={{ chart1ID|safe }} class="chart1" style="height: 500px; width: 500px"></div>

    <br>
    <P>***********************************************************************************</P>

    <div id={{ chart2ID|safe }} class="chart2" style="height: 500px; width: 500px"></div>

    <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/main.js"></script>
    <script>
        $(document).ready(function() {
        var chart1_id = {{ chart1ID|safe }};
        var chart2_id = {{ chart2ID|safe }};

        $('#' + chart1_id).highcharts({
            chart: {{ chart1|safe }},
            title: {{ title1|safe }},
            xAxis: {{ xAxis1|safe }},
            yAxis: {{ yAxis1|safe }},
            series: {{ series1|safe }}
        });

        $('#' + chart2_id).highcharts({
            chart: {{ chart2|safe }},
            title: {{ title2|safe }},
            xAxis: {{ xAxis2|safe }},
            yAxis: {{ yAxis2|safe }},
            series: {{ series2|safe }}
        });
      });
    </script>
</body>

Answer 3

*更新* 所以我不明白为什么这不起作用。似乎太简单了，无法工作，上面提供了两个很好的答案。

我删除了我正在处理的项目（在PyCharm中构建），然后重新构建该项目并重新启动。使用上面的Sebastian示例，我可以显示两个图表而没有任何问题。我不知道是否存在缓存问题，某处是否有尾随空间或项目已损坏。为遇到此问题的其他任何人提供了更新。

一页中有多个图表-仅显示一张图表

3 个答案: