一页中有多个Highcharts - 只显示一个图表

问题描述 投票：1回答：3

我正在创建一个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>

蟒蛇

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)

我现在看不到木头的树木，我想这是我忽略的基本东西。这是我目前使用的所有代码，我将其从较大的应用程序中删除，以便在发布问题时更清楚。

谢谢

javascript flask highcharts
3个回答
3
投票

您只需要将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 = {...}等）。

1
投票

在您的第一个代码块中，您将图表选项提供给高图，如chart1, title1等.Highcharts希望这些选项为chart, title，这两个图表中的结构必须相同（API：https://api.highcharts.com/highcharts/）：

.../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>
0
投票

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.