更新Chartjs 2.5與自定義代碼

Question

我使用這個自定義代碼來呈現負條形圖值：

HTML

<canvas id="myChart" width="500" height="100"></canvas> 

JS

var data = { 
    labels: ["January", "February", "March", "April", "May", "June", "July", "August"], 
    datasets: [ 
     { 
      label: "My First dataset", 
      fillColor: "rgba(220,220,220,0.5)", 
      strokeColor: "rgba(220,220,220,0.8)", 
      highlightFill: "rgba(220,220,220,0.75)", 
      highlightStroke: "rgba(220,220,220,1)", 
      data: [65, 59, 80, 81, 56, 55, 40, -30] 
     }, 
     { 
      label: "My Second dataset", 
      fillColor: "rgba(151,187,205,0.5)", 
      strokeColor: "rgba(151,187,205,0.8)", 
      highlightFill: "rgba(151,187,205,0.75)", 
      highlightStroke: "rgba(151,187,205,1)", 
      data: [28, 48, 40, 19, 86, 27, 90, -42] 
     } 
    ] 
}; 

var options = { 
    scaleBeginAtZero: false, 
    responsive: true, 
    scaleStartValue : -50 
}; 

var ctx = document.getElementById("myChart").getContext("2d"); 
var myBarChart = new Chart(ctx).Bar(data, options); 

（在此發現codepen http://codepen.io/ranstyr/pen/yepved） 但是...該代碼是在Chartjs版本1.0.2和我ne編輯使用2.5

這是我的潛在更新到2.5的codepen，但我沒有得到它的工作。 http://codepen.io/nothingtoseehere/pen/oBOqJw

Answer 1

這裏是你在找什麼的... ...樣品

http://codepen.io/anon/pen/PWgeqx

以我的經驗，你需要一個div高度和寬度定義包裹的帆布。我相信你可以免費獲得響應。下面的代碼。

var ctx = document.getElementById("myChart").getContext("2d"); 
var myBarChart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
     labels: ["January", "February", "March", "April", "May", "June", "July", "August"], 
     datasets: [ 
      { 
       label: "My First dataset", 
       backgroundColor: "rgba(220,220,220,0.5)", 
       borderColor: "rgba(220,220,220,0.8)", 
       hoverBackgroundColor: "rgba(220,220,220,0.75)", 
       hoverBorderColor: "rgba(220,220,220,1)", 
       borderWidth: 5, 
       data: [65, 59, 80, 81, 56, 55, 40, -30] 
      }, 
      { 
       label: "My Second dataset", 
       backgroundColor: "rgba(151,187,205,0.5)", 
       borderColor: "rgba(151,187,205,0.8)", 
       hoverBackgroundColor: "rgba(151,187,205,0.75)", 
       hoverBorderColor: "rgba(151,187,205,1)", 
       borderWidth: 5, 
       data: [28, 48, 40, 19, 86, 27, 90, -42] 
      } 
     ] 
    }, 
    options: { 
     scales: { 
      yAxes: [{ 
       display: true, 
       ticks: { 
        beginAtZero: false, 
        min: -50 
       } 
      }] 
     } 
    } 
}); 

下面是Chart.js文檔的鏈接。酒吧和體重計部分將有所幫助。 http://www.chartjs.org/docs/