chartjs将轴的原点对准图形的角

问题描述 投票:0回答:1

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

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

enter image description here

以下预期行为,

enter image description here

[这是我在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;
}

请帮助。非常感谢!

javascript graph charts alignment chart.js
1个回答
0
投票

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

scales:{
       xAxes:[{display:false, }],
       yAxes:[{display:false,}]},    
       legend:{display:false}
}
© www.soinside.com 2019 - 2024. All rights reserved.