j4n*_*4nw 6 javascript chart.js
I want a little extra space around my data points in a scatter plot, between the extremum points and the axis.
Chart.js documentation lists the supposedly common offset property which sounds exactly like what I want, but it seems to only work for the horizontal labeled axis (first half of the snippet). It does nothing whatsoever for a scatter plot (second half).
Am I doing something wrong, or is this simply unsupported? What can I do as a workaround?
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>小智 1
我不确定offset工作是否如您所期望的那样。请注意，即使在第一个图表上，y 轴也没有进行填充。
我会研究 一下 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>