Einführung in Google Charts in Jade

Mein Google-Diagramm in dieser Geige funktioniert gut zu arbeiten: https://jsfiddle.net/6b881at8/5/Einführung in Google Charts in Jade

In meiner Jade Umgebung und es funktioniert nicht so ausgegeben ich die innerHTML- des Ziel Diagramm Konsole meines Browsers und die HTML des Diagramms war dort.

Ich konvertierte die HTML in Jade-Syntax und manuell in meine Jade-Datei und es funktioniert gut.

Da die Diagramme dynamisch sein müssen, hoffe ich, dass Google Chart in einer Jade-Umgebung funktioniert. Ich bin mir nicht sicher, was falsch ist, aber jede Hilfe wird geschätzt!

Jade:

.subCategoryContainer 
     .subCategoryLabel= subCategory.name 
     .subCategoryLabel 
    .chartWrapper 
     .chartContainer

charts.js:

google.charts.load('current', {'packages':['corechart']}); 
    google.charts.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Month', 'Foo', 'Bar'], 
     ['02/1', 80,  85], 
       ['02/8', 20,  35], 
     ['02/15', 75,  65], 
     ['02/22', 50,  65], 
     ['02/28', 60,  50], 
    ]); 

    var options = { 

     hAxis: {title: 'February', titleTextStyle: {color: '#333'}}, 
     vAxis: {minValue: 0, title: '% of students'}, 
     colors:['rgb(32, 170, 188)', 'rgb(32, 188, 77)'], 
     lineWidth:4, 
     areaOpacity: 0.15, 
    }; 

    var chart = new google.visualization.AreaChart(document.querySelector('.chartContainer')); 
    chart.draw(data, options); 
    console.log(document.querySelector('.chartContainer').innerHTML); 
    }

Konsolenausgabe:

charts.js:25 <div style="position: relative;"><div dir="ltr" style="position: relative; width: 400px; height: 200px;"><div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"><svg width="400" height="200" aria-label="A chart." style="overflow: hidden;"><defs id="defs"><clipPath id="_ABSTRACT_RENDERER_ID_0"><rect x="67" y="38" width="267" height="124"></rect></clipPath></defs><rect x="0" y="0" width="400" height="200" stroke="none" stroke-width="0" fill="#ffffff"></rect><g><rect x="345" y="38" width="44" height="29" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><rect x="345" y="38" width="44" height="11" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="371" y="47.35" font-family="Arial" font-size="11" stroke="none" stroke-width="0" fill="#222222">Attendance</text></g><rect x="345" y="43.5" width="22" height="5.5" stroke="none" stroke-width="0" fill-opacity="0.15" fill="#20aabc"></rect><path d="M345,43.5L367,43.5" stroke="#20aabc" stroke-width="4" fill-opacity="1" fill="none"></path></g><g><rect x="345" y="56" width="44" height="11" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="371" y="65.35" font-family="Arial" font-size="11" stroke="none" stroke-width="0" fill="#222222">Emotion</text></g><rect x="345" y="61.5" width="22" height="5.5" stroke="none" stroke-width="0" fill-opacity="0.15" fill="#20bc4d"></rect><path d="M345,61.5L367,61.5" stroke="#20bc4d" stroke-width="4" fill-opacity="1" fill="none"></path></g></g><g><rect x="67" y="38" width="267" height="124" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g clip-path="url(http://localhost:3001/edu/DenverPublicSchools/school/Amesse?type=elementary#_ABSTRACT_RENDERER_ID_0)"><g><rect x="67" y="161" width="267" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="67" y="130" width="267" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="67" y="100" width="267" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="67" y="69" width="267" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="67" y="38" width="267" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect></g><g><g><path d="M67.5,161.5L67.5,161.5L67.5,63.099999999999994L134,136.9L200.5,69.25L267,100L333.5,87.7L333.5,161.5L333.5,161.5Z" stroke="none" stroke-width="0" fill-opacity="0.15" fill="#20aabc"></path></g><g><path d="M67.5,161.5L67.5,161.5L67.5,56.95L134,118.45L200.5,81.55L267,81.55L333.5,100L333.5,161.5L333.5,161.5Z" stroke="none" stroke-width="0" fill-opacity="0.15" fill="#20bc4d"></path></g></g><g><rect x="67" y="161" width="267" height="1" stroke="none" stroke-width="0" fill="#333333"></rect></g><g><path d="M67.5,63.099999999999994L134,136.9L200.5,69.25L267,100L333.5,87.7" stroke="#20aabc" stroke-width="4" fill-opacity="1" fill="none"></path><path d="M67.5,56.95L134,118.45L200.5,81.55L267,81.55L333.5,100" stroke="#20bc4d" stroke-width="4" fill-opacity="1" fill="none"></path></g></g><g></g><g><g><text text-anchor="middle" x="67.5" y="176.68333333333334" font-family="Arial" font-size="11" stroke="none" stroke-width="0" fill="#222222">02/1</text></g><g><text text-anchor="middle" x="134" y="176.68333333333334" font-family="Arial" font-size="11" stroke="none" stroke-width="0" fill="#222222">02/8</text></g><g><text text-anchor="middle" x="200.5" y="176.68333333333334" font-family="Arial" font-size="11" stroke="none" stroke-width="0" fill="#222222">02/15</text></g><g><text text-anchor="middle" x="267" y="176.68333333333334" font-family="Arial" font-size="11" stroke="none" stroke-width="0" fill="#222222">02/22</text></g><g><text text-anchor="middle" x="333.5" y="176.68333333333334" font-family="Arial" font-size="11" stroke="none" stroke-width="0" fill="#222222">02/28</text></g><g><text text-anchor="end" x="56" y="165.35" font-family="Arial" font-size="11" stroke="none" stroke-width="0" fill="#444444">0</text></g><g><text text-anchor="end" x="56" y="134.6" font-family="Arial" font-size="11" stroke="none" stroke-width="0" fill="#444444">25</text></g><g><text text-anchor="end" x="56" y="103.85" font-family="Arial" font-size="11" stroke="none" stroke-width="0" fill="#444444">50</text></g><g><text text-anchor="end" x="56" y="73.1" font-family="Arial" font-size="11" stroke="none" stroke-width="0" fill="#444444">75</text></g><g><text text-anchor="end" x="56" y="42.35" font-family="Arial" font-size="11" stroke="none" stroke-width="0" fill="#444444">100</text></g></g></g><g><g><text text-anchor="middle" x="200.5" y="193.01666666666668" font-family="Arial" font-size="11" font-style="italic" stroke="none" stroke-width="0" fill="#333333">February</text><rect x="67" y="183.66666666666669" width="267" height="11" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect></g><g><text text-anchor="middle" x="31.85" y="100" font-family="Arial" font-size="11" font-style="italic" transform="rotate(-90 31.85 100)" stroke="none" stroke-width="0" fill="#222222">% of students</text><path d="M22.499999999999996,162L22.500000000000004,38L33.50000000000001,38L33.5,162Z" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></path></g></g><g></g></svg></div></div><div aria-hidden="true" style="display: none; position: absolute; top: 210px; left: 410px; white-space: nowrap; font-family: Arial; font-size: 11px;">Emotion</div><div></div></div>

Update: wenn ich die Elemente Inspektor in Chrome geprüft sah ich, dass nichts hinzugefügt wurde zu .chartContainer, obwohl es in der console.log angezeigt wird. Zusätzlich mit JQuery Ich kann den inneren Text des div-Elements bearbeiten, aber nicht in Vanille js:

$('.chartContainer').text('bar1'); //works 
document.querySelector('.chartContainer').innerHTML = 'bar2'; //doesn't work

aus dem Chrom-Inspektoren:

<div class="chartWrapper"><div class="chartContainer">bar1</div></div>

Quelle

2016-07-01 Ron I

Jade ist Server-Seite und Google Charts ist Client-Seite, wie sehen Sie, dass sie interagieren müssen? Können Sie besser erklären _ "Da ich brauche, dass die Diagramme dynamisch sind" _? – Sergio

@Sergio - Danke, dass Sie das gesehen haben, ich habe das noch nicht gemacht, aber ich stellte mir vor, dass ich Werte in Routen übergeben könnte: router.get ('/: edu_name', Funktion (req, res)) { array_of_dataPoints = myModule .getXData(); res.render ('./ some_route', {array_of_dataPoints, ein anderes_array}); }); –

Wie rufen Sie '/: edu_name'? durch Ajax, oder öffne diese URL mit einer neuen Seite? – Sergio

Die Frage war Ursache, weil der Plan-Behälter Div war in einer Schleife in meiner Jade-Vorlage. Sobald ich sichergestellt hatte, dass es nur ein div mit dem class chartContainer gab, funktionierte es.

Quelle

2016-07-02 11:06:13

Einführung in Google Charts in Jade

Antwort

Verwandte Themen