我是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;
}
请帮助。非常感谢!
Nvm,是我很愚蠢,只需要隐藏整个轴即可,结果是正确的。喜欢,
scales:{
xAxes:[{display:false, }],
yAxes:[{display:false,}]},
legend:{display:false}
}