我想在散点图中的数据点周围、极值点和轴之间留出一点额外空间。
Chart.js documentation列出了据称常见的 offset 属性，这听起来和我想要的完全一样，但它似乎只适用于水平标记轴(代码片段的前半部分)。它对散点图(下半部分)没有任何作用。
我是不是做错了什么，或者这只是不受支持？解决方法是什么？
var options, ctx;
options = {
type: 'line',
data: {
labels: [0, 1, 2],
datasets: [{
data: [0, 1, 0]
}]
},
options: {
scales: {
xAxes: [{
offset: true
}],
yAxes: [{
offset: true
}]
}
}
}
ctx = document.getElementById('chart1').getContext('2d');
new Chart(ctx, options);
options = {
type: 'scatter',
data: {
datasets: [{
data: [{
x: 0,
y: 0
}, {
x: 1,
y: 1
}, {
x: 2,
y: 0
}]
}]
},
options: {
scales: {
xAxes: [{
offset: true
}],
yAxes: [{
offset: true
}]
}
}
}
ctx = document.getElementById('chart2').getContext('2d');
new Chart(ctx, options);<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<body>
<canvas id="chart1" height="100"></canvas>
</body>
<body>
<canvas id="chart2" height="100"></canvas>
</body>最佳答案
我不确定 offset 是否按您预期的那样工作。请注意，即使在第一张图中，yaxis 也没有进行填充。
我会 look into suggestedMin 和suggestedMax 如下图:
var options, ctx;
options = {
type: 'line',
data: {
labels: [0, 1, 2],
datasets: [{
data: [0, 1, 0]
}]
},
options: {
scales: {
xAxes: [{
offset: true
}],
yAxes: [{
offset: true
}]
}
}
}
ctx = document.getElementById('chart1').getContext('2d');
new Chart(ctx, options);
options = {
type: 'scatter',
data: {
datasets: [{
data: [{
x: 0,
y: 0
}, {
x: 1,
y: 1
}, {
x: 2,
y: 0
}]
}]
},
options: {
scales: {
xAxes: [{
display: true,
ticks: {
suggestedMin: -1, // minimum will be -1, unless there is a lower value.
suggestedMax: 3
}
}],
yAxes: [{
display: true,
ticks: {
suggestedMin: -1, // minimum will be -1, unless there is a lower value.
suggestedMax: 2
}
}]
}
}
}
ctx = document.getElementById('chart2').getContext('2d');
new Chart(ctx, options);<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<body>
<canvas id="chart1" height="100"></canvas>
</body>
<body>
<canvas id="chart2" height="100"></canvas>
</body>关于javascript - 如何偏移散点图中的轴？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57040552/