chartjs将轴的原点与图形的角对齐

Question

我是Java脚本的新手，现在尝试在一个很小的盒子中绘制charJS图形时遇到了一些麻烦。

我的预期行为是使图形坐标的原点位于画布的左下角，因此可以充分利用画布。 当前行为如下，

以下预期行为，

这是我在fiddle中尝试过的。图的原点未与轴的左角对齐，我也不知道如何更改轴原点的位置。

javascript：

var ctx = document.getElementById("lineChart").getContext('2d');

var data = {
labels: [
    1,
    2,
    3,
    4,
    5 ,
    6 ,
    7 ,
    8 ,
    9 ,
    10
],
datasets: [{
    label: "Project",
    fill:false,
    borderColor:"#F83435",
    borderWidth:1,
    data: [
1,
2,
3,
4,
5,
    6,
7,
8,
8,
9, ],
} 
]};

var options = {
elements:{point:{radius:0}},
responsive:true,
scales:{
    xAxes:[{gridLines:{display:false, color: "#FFFFFF"},
        ticks:{display:false}}],
        yAxes:[{gridLines:{display:false, color: "#FFFFFF"},
        ticks:{display:false}}]
},    
legend:{display:false}

}

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

html

<div class="wrapper">
<canvas id="lineChart" width="150" height="150"></canvas>
</div>

css

.wrapper{
  width:150px;
  height:150px;
  background:blue;
}

请帮助。非常感谢！

Answer 1

Nvm，是我很愚蠢，只需要隐藏整个轴即可得到正确的结果。喜欢，

scales:{
       xAxes:[{display:false, }],
       yAxes:[{display:false,}]},    
       legend:{display:false}
}