Question

我正在尝试在我的角应用程序中实现chart.js。（水平条形图）

我想为要绘制的数据添加起点和终点。

在我的Level中，每当我传递一个值时，图表都会从0到给定值。

dataset

绘制此数据时，图表显示从0到2。

但我希望从1到2显示它。

有没有办法传递要在图表中显示的起始值和结束值。（不是数据集内部数据的标签。）

我的数据：

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

修改

这里我希望y轴4从x轴的1开始到x轴的2。 y轴6从x轴的3开始到x轴的7。

Answer 1

是的，请查看下面（比例）图表提供的选项：

＆＃13;

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
});

＆＃13;

<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>

＆＃13;

Chart.js如何设置绘图的起始值和结束值

1 个答案: