2016-11-03 102 views
0

我嘗試僅顯示來自我工作的項目中的圖表js的示例。不幸的是我不得不使用Chart Js 1.x. 我試圖實現巴例如從https://github.com/chartjs/Chart.js/blob/master/samples/bar/bar.html 這是一個非常簡單的例子,我想,但它沒有運行:(圖表js不顯示圖表

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<canvas id="zeitsteuerungChart"></canvas>

var barChartData = { 
     labels: ["January", "February", "March", "April", "May", "June", "July"], 
     datasets: [{ 
      label: 'Dataset 1', 
      borderWidth: 1, 
      data: [ 
       "1","1","1","1","1","1","1" 
      ] 
     }, { 
      label: 'Dataset 2', 
      borderWidth: 1, 
      data: [ 
       "1","1","1","1","1","1","1" 
      ] 
     }] 
    }; 
    window.onload = function() { 
     var ctx = document.getElementById("zeitsteuerungChart").getContext("2d"); 
     var myBar = new Chart(ctx, { 
      type: 'bar', 
      data: barChartData 
     }); 
    }; 

圖表JS操縱

<canvas id="zeitsteuerungChart"></canvas>

元素

<canvas id="zeitsteuerungChart" width="300" height="150" style="width: 300px; height: 150px;"></canvas>

但多數民衆贊成差不多了。沒有圖表顯示。控制檯沒有錯誤。我試圖使用jQuery以及與

var ctx = $("#zeitsteuerungChart").get(0).getContext("2d");

,但同樣的效果,選擇畫布!在該項目的其他子頁面上,它工作得很好!

回答

0

您在v1上使用了圖表js v2語法。

爲V1

var barChartData = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [{ 
    label: 'Dataset 1', 
    borderWidth: 1, 
    data: ["1","1","1","1","1","1","1"] 
    }, 
    { 
    label: 'Dataset 2', 
    borderWidth: 1, 
    data: ["1","1","1","1","1","1","1"] 
    }] 
}; 

window.onload = function() { 
    var ctx = document.getElementById("zeitsteuerungChart").getContext("2d"); 
    var myBar = new Chart(ctx).Bar(barChartData, options); 
}; 

您可以查看圖表選項(圖JS V1)herecomplete options here

+0

喜山姆章! 非常感謝你的建議!我遵循你的建議,現在它可以工作。多麼愚蠢的我錯過了:( 王問候安達拉 – andara

+0

不客氣,請也標記問題解決 –