chart.js之如何設置開始和結束的值繪製

Question

我想實現我的角度應用chart.js之。（水平條形圖）

我想補充的起點和終點的數據被繪製。

在我的dataset每當我傳遞一個值時，圖表從0繪製到給定的值。

data: [2,6,5,8,7,3,2]

當這個數據被繪製的圖表顯示，從0到2

但我想從1拿給2.

有沒有辦法通過起始值並在圖表中顯示結束值（未在標籤中的數據的數據集的內部。）

我的資料：

var data = { 
labels: [10,9,8,7,6,5,4,3,2,1,0], 
datasets: [ 
    { 
     label: "My First dataset", 
     backgroundColor: [ 
      'rgba(255, 99, 132, 0.2)', 
      'rgba(54, 162, 235, 0.2)', 
      'rgba(255, 206, 86, 0.2)', 
      'rgba(75, 192, 192, 0.2)', 
      'rgba(153, 102, 255, 0.2)', 
      'rgba(255, 159, 64, 0.2)' 
     ], 
     borderColor: [ 
      'rgba(255,99,132,1)', 
      'rgba(54, 162, 235, 1)', 
      'rgba(255, 206, 86, 1)', 
      'rgba(75, 192, 192, 1)', 
      'rgba(153, 102, 255, 1)', 
      'rgba(255, 159, 64, 1)' 
     ], 
     borderWidth: 1, 
     data: [2,6,5,8,7,3,2], 
    } 
] 
}; 

var options ={ 
barShowStroke: false, 
    scaleShowGridLines: true, 
    scaleOverride: true, 
    scaleStartValue: 1, 
    scaleStepWidth: 1,  
    responsive: true, 
    barBeginAtOrigin: true, 
    scales: { 
        xAxes: [{ 
          time: { 
       unit: 'month' 
      }, 
          ticks:{ 
            min: 0, 
            max: 20, 
            stepSize: 1 
          } 
        }], 
        yAxes: [{ 
          display:true}] 
    } 
}; 

編輯：

在這裏，我想y軸4從1中的x軸開始2中的x軸。 y軸6從x軸的3開始到x軸的7。

Answer 1

是可能的，請在下方提供（規模）圖表選項：

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

 

 
var options = { 
 
     barShowStroke: false, 
 
     scaleShowGridLines: true, 
 
     scaleOverride: true, 
 
     scaleStartValue: 1, 
 
     caleStepWidth: 1,  
 
     responsive: true, 
 
     barBeginAtOrigin: true 
 
    }; 
 
    
 
var data = { 
 
labels: [10,9,8,7,6,5,4,3,2,1], 
 
datasets: [ 
 
    { 
 
     label: "My First dataset", 
 
     backgroundColor: [ 
 
      'rgba(255, 99, 132, 0.2)', 
 
      'rgba(54, 162, 235, 0.2)', 
 
      'rgba(255, 206, 86, 0.2)', 
 
      'rgba(75, 192, 192, 0.2)', 
 
      'rgba(153, 102, 255, 0.2)', 
 
      'rgba(255, 159, 64, 0.2)' 
 
     ], 
 
     borderColor: [ 
 
      'rgba(255,99,132,1)', 
 
      'rgba(54, 162, 235, 1)', 
 
      'rgba(255, 206, 86, 1)', 
 
      'rgba(75, 192, 192, 1)', 
 
      'rgba(153, 102, 255, 1)', 
 
      'rgba(255, 159, 64, 1)' 
 
     ], 
 
     borderWidth: 1, 
 
     data: [2,6,5,8,7,3,2], 
 
    } 
 
] 
 
}; 
 

 

 
var myBarChart = new Chart(ctx, { 
 
    type: 'horizontalBar', 
 
    data: data, 
 
    options: options 
 
}); 
 

 
     
 
     
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script> 
 
<canvas id="graphTest" width="400" height="190" style="padding-left:10px; padding-right:10px;"></canvas>