mpld3 और flask

Question

का उपयोग कर एक HTML कंटेनर में matplotlib साजिश को कैसे रखा जाए, मैं एक निश्चित व्यवहार प्राप्त करने के लिए mpld3-flask उदाहरण (https://github.com/nipunreddevil/mpld3-flask) टेम्पलेट के रूप में उपयोग करने का प्रयास कर रहा हूं। मैं क्या चाहता हूं, रेडियो बटन क्वेरी फॉर्म के बजाय, विभिन्न प्लॉट्स पर हेडर बार पर लिंक जोड़ना है।

अभी, टेम्पलेट्स/index.html में उपरोक्त उदाहरण कोड, एक कंटेनर बनाता है और फिर उपयोगकर्ता को "प्लॉट देखें" बटन पर क्लिक करके एक क्वेरी सबमिट करते समय इसे साजिश के साथ पॉप्युलेट करता है। यही कारण है कि इस कोड में होता है, जहाँ तक मैं बता सकता हूँ, index.html में:

$("#query").click(function() { 

    $("#loading-div-background").show(); 
    $("#container").hide(); 
    var plot_type = $('input:radio[name=plot_type]:checked').val(); 
    var qu = {"plot_type":plot_type} 
    $.ajax({ 
    type: "POST", 
    async:true, 
    contentType: "application/json; charset=utf-8", 
    url: "/query", 
    data: JSON.stringify(qu), 
    success: function (data) {  
    var graph = $("#container"); 
    graph.html(data); 
    $("#loading-div-background").hide();  
    $("#container").show(); 
    }, 
    dataType: "html" 
}); 
}); 

क्या मैं बजाय चाहते हैं हेडर बार वर्तमान में "घर" उस में है कि करने के लिए जोड़ सकते हैं और प्रत्येक को लाने के लिए है एक अलग पृष्ठ में उदाहरण साजिश। मैं एक अलग लिंक पर जाउंगा, और फिर उपयोगकर्ता क्वेरी की आवश्यकता के बिना, साजिश के लिए डेटा के साथ टेम्पलेट एचटीएमएल कोड पॉप्युलेट करूँगा।

मैं HTML के साथ एक नौसिखिया हूं और अनिवार्य रूप से इस बिंदु पर जावास्क्रिप्ट के बारे में कुछ भी नहीं जानता। मेरा अर्थ यहां यह है कि ऐसा करने के लिए फ्लास्क + जिंजा 2 का उपयोग करने के लिए कुछ अपेक्षाकृत आसान तरीका है, लेकिन मैं इसे समझने में सक्षम नहीं हूं।

मुझे इन सभी भाषाओं को संयोजित करने के परिणामस्वरूप अस्पष्ट नामस्थानों के साथ कुछ परेशानी हो रही है। मैं आमतौर पर अपने स्वयं के पायथन प्रोग्रामिंग में नेमस्पेस के साथ बहुत सख्त हूं (यानी मैंने कभी भी '____ आयात * से' कभी भी उपयोग नहीं किया है) इसलिए यह मुझे थोड़ा पागल कर रहा है।

Answer 1

थोड़ी देर के लिए काम करने के बाद, मुझे एक ऐसा समाधान मिला है जो काम करता है और जो व्यवहार मैं चाहता हूं उसे प्राप्त करता हूं। ध्यान दें कि मैं ट्विटर बूटस्ट्रैप सीएसएस और जावास्क्रिप्ट पैकेज का उपयोग कर रहा हूं। mpld3-कुप्पी उदाहरण मैं उपयोग से जावास्क्रिप्ट में फिर

<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-primary"> 
     <input type="radio" name="options" id="home"> Option 1 
    </label> 
    <label class="btn btn-primary"> 
     <input type="radio" name="options" id="option2"> Option 2 
    </label> 
    <label class="btn btn-primary"> 
     <input type="radio" name="options" id="option3"> Option 3 
    </label> 

:

मूल रूप से, मैं एक बटन समूह बनाने

$('.btn-primary').on('click', function(){ 
    var qu = {"plot_type":$(this).find('input').attr('id')} 
    $(this).addClass('active').siblings().removeClass('active'); 
    $.ajax({ 
    type: "POST", 
    async:true, 
    contentType: "application/json; charset=utf-8", 
    url: "/query", 
    data: JSON.stringify(qu), 
    success: function (data) { 
    var graph = $("#container"); 
    graph.html(data); 
    $("#container").show(); 
    }, 
    dataType: "html" 
    }); 
}); 

अब मैं एक रेडियो बटन है बार, वर्तमान में सक्रिय साजिश बटन 'सक्रिय' पर सेट है, जिसके लिए केवल एक नई साजिश खींचने के लिए बटनों में से एक पर क्लिक करना आवश्यक है।

संपादित करें: फ्लास्क और जिनजा 2 के बारे में अधिक जानने के बाद, एमपीएल 3 जेनरेट किए गए एचटीएमएल को एक टेम्पलेट में पास करना भी आसान है, लेकिन थोड़ा सा गचाचा है; यह इस

तरह दिखता है अपने अजगर मार्ग समारोह के बदले में:

return render_template('index.html', plot=mpld3_html)

फिर HTML टेम्पलेट में आप के साथ

{{plot|safe}}

आशा इस मदद करता है इस एचटीएमएल संदर्भित कर सकते हैं कोई और।