Question

在Google地图上，我在空气质量监测传感器的位置放置了一些标记。现在我想要的是，当我单击标记时，它会在图形中向我显示传感器的数据以执行此操作，而我正在使用Dash Plotly绘制图形。为了显示单击的图形，我向jango views.py发送了一个ajax请求，其中dash_view（）函数使用jquery函数返回了html fil=(chart.html)，我将chart.html的代码放在了div id=#chart_div中在index.html中。现在的问题是，当我第一次单击标记时，它仅显示使用此

加载的图形

未捕获的ReferenceError：未定义DashRenderer

多次单击标记时，控制台中出现

错误，然后显示图形，并且双击或三次单击后，单击也开始起作用。当我使用{% plotly_direct name="AQI" %}在模板中渲染图形时，需要多次单击才能显示图形，而当我使用{% plotly_app name="AQI" %}时，只需单击一下即可使用，但是整个图形的样式都被删除了。使用{% plotly_direct name="AQI" %}时使用This is what I get，使用{% plotly_app name="AQI" %}时使用This is what I get。当我使用{% plotly_app name="AQI" %}

时，样式将被删除

#############views.py#############

@csrf_exempt
def dash_view(request):
    return render (request,'map/chart.html')

#############ajax_call on click marker##############
function ajax() {
    var json = {};
    // json['a'] = 1;
    $.ajax({
        url: "dash",
        type: "POST",
        data:json,
        dataType: "html",
        success : function(res)
        {
            $('#chart_div').html(res);
            console.log(res);

        }
    });
}

#############chart.html#############
{% load static %}
{% block content%}
<div class="col-md-12 col-sm-12 col-xs-12 no-space" style="border: 2px black solid;">
    <div class="side-info">
      {% load plotly_dash %}

      <div id="chart_div"class="col-md-12 col-sm-12 col-xs-12 no-space fa-pull-right">
        {%plotly_direct name="AQI"%}
        {% plotly_footer %}
      </div>
    </div>
  </div>
{% endblock%}

#############index.html#############
<div class="container-fluid">    
  <div class="row">    

    <div class="col-md-12 col-sm-12 col-xs-12 no-space " >
      <div id="map"></div>
    </div>
  
    <div id="chart_div" class="col-md-12 col-sm-12 col-xs-12 no-space" style="border: 2px black solid;">
 
    </div>

  </div>
</div>

如何使用ajax调用在django模板中加载虚线图？

0 个答案: