chart.js之不能正常工作時，只有1條

正如你可以看到線（元和蘭戈德aceptación）被畫成一個點。我相信這是因爲我只有一個酒吧，而在另一個圖表中，我是用2個酒吧製作的，我將這些線條畫成線條。

這是代碼，我做錯了什麼？

<canvas id="myChart2016_5857751099b04" width="500" height="500" style="display: block; width: 500px; height: 500px;"></canvas> 
<script style="text/javascript"> 
       var ctx2016_5857751099b04 = document.getElementById("myChart2016_5857751099b04"); 
       var myChart2016_5857751099b04 = new Chart(ctx2016_5857751099b04, { 
        type: 'bar', 
        data: { 

      labels: ["Año 1"], 
      datasets: [ 
          {backgroundColor:'rgba(36, 143, 36,0)',borderColor:'rgba(75, 172, 198,1)', 
         type: 'line', 
         label: 'Meta', 
         data: [100], 
         options: { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 },       {backgroundColor:'rgba(51, 51, 26,0)',borderColor:'rgba(182, 87, 8,1)', 
         type: 'line', 
         label: 'Rango de aceptación ', 
         data: [90], 
         options: { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 },       {backgroundColor:['rgba(99, 33, 36 ,0.1)'],borderColor:['rgba(99, 33, 36, 1)'], 
         type: 'bar', 
         label: 'Porcentaje de proveedores evaluados satisfactoriamente ', 
         data: [100], 
         options: { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 }   ]}, 
       options: { 
         tension:1, 
         scaleBeginAtZero: true, 
         scaleStartValue: 0, 
         scales: { 
          xAxes: [{ 
           categorySpacing: 20, 
           gridLines: { 
             color: "rgba(0, 0, 0, 0)", 
            }, 
          }], 
          yAxes: [{ 
           categorySpacing: 20, 
           ticks: { 
            beginAtZero:true 
           } 
          }] 
         } 

        } 
       }); 
       </script>

我tryed上元和蘭戈德aceptación數據：

data: [100,100,100]和data: [90,90,90]

但結果是出人意料：

[

來源

2016-12-19 Crishk Corporation

你可以提供一個[的jsfiddle（http://jsfiddle.net/）？ – Ethan

@Sami ..是的小提琴或垃圾箱將有助於弄清楚什麼是錯的 –

將您的拉貝l低於它的值將開始工作。

labels: ["Año 1","",""]

下面是工作樣例代碼

<script style="text/javascript"> 
       var ctx2016_5857751099b04 = document.getElementById("myChart2016_5857751099b04"); 
       var myChart2016_5857751099b04 = new Chart(ctx2016_5857751099b04, { 
        type: 'bar', 
        data: { 

      labels: ["Año 1","",""], 
      datasets: [ 
          {backgroundColor:'rgba(36, 143, 36,0)',borderColor:'rgba(75, 172, 198,1)', 
         type: 'line', 
         label: 'Meta', 
         data: [100,100,100], 
         options: { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 },       {backgroundColor:'rgba(51, 51, 26,0)',borderColor:'rgba(182, 87, 8,1)', 
         type: 'line', 
         label: 'Rango de aceptación ', 
         data: [90,90,90], 
         options: { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 },       {backgroundColor:['rgba(99, 33, 36 ,0.1)'],borderColor:['rgba(99, 33, 36, 1)'], 
         type: 'bar', 
         label: 'Porcentaje de proveedores evaluados satisfactoriamente ', 
         data: [100], 
         options: { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 }   ]}, 
       options: { 
         tension:1, 
         scaleBeginAtZero: true, 
         scaleStartValue: 0, 
         scales: { 
          xAxes: [{ 
           categorySpacing: 20, 
           gridLines: { 
             color: "rgba(0, 0, 0, 0)", 
            }, 
          }], 
          yAxes: [{ 
           categorySpacing: 20, 
           ticks: { 
            beginAtZero:true 
           } 
          }] 
         } 

        } 
       }); 
       </script>

來源

2016-12-19 07:32:07

chart.js之不能正常工作時，只有1條

回答

相關問題