Chart.js 如何设置要绘制的开始值和结束值

Question

我正在尝试在我的 Angular 应用程序中实现 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 从 x 轴上的 1 开始到 x 轴上的 2。 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>