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>