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

Question

我是 java 脚本的新手，当我尝试在一个非常小的盒子中绘制 charJS 图时遇到了一些麻烦。

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

预期行为如下，

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

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

请帮忙。非常感谢！

标签： javascriptgraphchartsalignmentchart.js

Answer 1

Nvm，是我笨，只需要隐藏整个轴然后结果是正确的。喜欢，

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