2017-02-22 15 views
0

私のコードは3枚のcsvシートから日付を読み込むことになっています。次に、読み込んだ値をchartjsでhtmlファイルに表示します。しかし、作成されたhtmlファイルには、オーバーレイされたチャートとタイトルが表示されません。誰かが私に間違いを教えることができますか? ご協力いただきありがとうございます!複数のチャートを表示するjs 1ページの図表

ヘッド:

window.onload = function() { 
    var chartGarage = new CanvasJS.Chart("chartContainerGarage", 
    { 
     axisX:{  
      valueFormatString: "H:m" , 
      labelAngle: -50 
     }, 
     axisY:{ 
      minimum: 40, 
      maximum: 95 
     }, 
     data:[ 
     { 
      type: "line", 
      dataPoints: [ 
    ''') 

r = 0 
for row in csvDataGarage: 
    if r < 30: 
     html.write('{ x: new Date('+ row[0] + '), y:' + row[2] + '},') 
    r += 1 

html.write(''' 
         ] 
     } 
      ] 
    }); 
    chartGarage.render(); 
    var chartWerkstatt = new CanvasJS.Chart("chartContainerWerkstatt", 
    { 
     axisX:{  
      valueFormatString: "H:m" , 
      labelAngle: -50 
     }, 
     axisY:{ 
      minimum: 40, 
      maximum: 95 
     }, 
     data:[ 
     { 
      type: "line", 
      dataPoints: [ 
    ''') 

r = 0 
for row in csvDataWerkstatt: 
    if r < 30: 
     html.write('{ x: new Date('+ row[0] + '), y:' + row[2] + '},') 
    r += 1 

html.write(''' 
         ] 
     } 
      ] 
    }); 
    chartWerkstatt.render(); 
    var chartWaschhalle = new CanvasJS.Chart("chartContainerWaschhalle", 
    { 
     axisX:{  
      valueFormatString: "H:m" , 
      labelAngle: -50 
     }, 
     axisY:{ 
      minimum: 40, 
      maximum: 95 
     }, 
     data:[ 
     { 
      type: "line", 
      dataPoints: [ 
    ''') 

r = 0 
for row in csvDataWaschhalle: 
    if r < 30: 
     html.write('{ x: new Date('+ row[0] + '), y:' + row[2] + '},') 
    r += 1 

html.write(''' 
         ] 
     } 
      ] 
    }); 
    chartWaschhalle.render(); 
    } 
</script> 

体:

<section> 
    <div class="section-contentGarage"> 
     <div class="container"> 
      <div class="row text-center" id="headerTextGarage"> 
       <h1>Luftfeuchtigkeit</h1> 
       <h3>Garage</h3> 
      </div> 
      <div class="row"> 
       <div id="chartContainerGarage"></div> 
      </div> 
     </div> 
    </div> 


    <div class="section-contentWerkstatt"> 
     <div class="container"> 
      <div class="row text-center" id="headerTextWerkstatt"> 
       <h3>Werkstatt</h3> 
      </div> 
      <div class="row"> 
       <div id="chartContainerWerkstatt"></div> 
      </div> 
     </div> 
    </div> 


    <div class="section-contentWaschhalle"> 
     <div class="container"> 
      <div class="row text-center" id="headerTextWaschhalle"> 
       <h3>Garage</h3> 
      </div> 
      <div class="row"> 
       <div id="chartContainerWaschhalle"></div> 
      </div> 
     </div> 
    </div> 
</section> 



<footer> 
    <div class="container-fluid text-center"> 
     <div class="row"> 

      <div class="col-sm-4"> 
      Rindfleisch Reisen <br> 
      Zeughausgasse 3, 6020 Innsbruck<br> 
       [email protected]<br> 
       +43512585966 
      </div> 
      <div class="col-sm-4"> 
       <img class="img-responsive img-centered" src="img/logo.png" alt=""> 
      </div> 
      <div class="col-sm-4"> 

       Gewerberechtliche Geschäftsführung: Franz Rindfleisch<br> 
       Handelsrechtliche Geschäftsführung: Franz Rindfleisch<br> 
       Firmenbuchnummer: 141843<br> 
       Firmenbuchgericht: Landesgericht Innsbruck<br> 
       UID Nr.: ATU40307707<br> 
      </div> 
     </div> 

    </div> 
</footer> 

<script type="text/javascript" src="js/calibration.js"></script> 
<script type="text/javascript" src="js/statusanzeige.js"></script> 
<script type="text/javascript" src="js/logfile.js"></script> 
<script type="text/javascript" src="js/temperatur.js"></script> 
<script type="text/javascript" src="js/luftfeuchtigkeit.js"></script> 

誰かが私が変更すべきかを教えてもらえますか?

答えて

0

Chart.jsは、チャートを含むようにHTML5 <canvas>要素を使用しています - line.htmlサンプルのように:私はあなたの<body>コードで<canvas>要素が表示されていない

<body> 
<div style="width:75%;"> 
    <canvas id="canvas"></canvas> 
</div> 

。 この要素は、JavaScriptでチャート要素を作成するために使用されます。

window.onload = function() { 
    var ctx = document.getElementById("canvas").getContext("2d"); 
    window.myLine = new Chart(ctx, config); 
}; 
関連する問題