ジェイド

Question

で動作するように、Googleのチャートを入手

マイGoogleのチャートは、このフィドルで正常に動作します：私のヒスイの環境ではhttps://jsfiddle.net/6b881at8/5/

、それはそう働いていなかった私は、ブラウザのコンソールにターゲットチャートのinnerHTMLプロパティを出力し、チャートのhtmlはそこにあった。

私はhtmlをjade構文に変換し、手作業でそれをjadeファイルに入れて正常に動作します。

私はチャートを動的にする必要があるので、Google Chartsを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); 
    } 

コンソール出力：

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> 

アップデート：私はChromeで要素インスペクタをチェックすると、私は何も添加しなかったことを見ました.chartContainerは、console.logに表示されますが、また、jQueryのを使用して、私はdiv要素の内部テキストを編集することができていますが、ないバニラJSで：クロムインスペクタから

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

：

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

Answer 1

問題は、チャートコンテナ理由原因でしたdivは私のjadeテンプレートのループに入っていました。クラスchartContainerを持つdivが1つしかないことを確認したら、それはうまくいった。