我遇到了图表中最后一个气泡被切断的问题。我需要一种扩展图表的方法,以便显示整个圆圈。我已经尝试了从添加额外值到最后调整填充的所有方法。似乎没有任何效果。不幸的是,关于气泡图的 Chart JS 文档也严重缺乏。
var randomScalingFactor = function() {
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
};
var randomColorFactor = function() {
return Math.round(Math.random() * 255);
};
var randomColor = function() {
return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
};
var bubbleChartData = {
animation: {
duration: 10000
},
datasets: [{
label: "My First dataset",
backgroundColor: randomColor(),
data: [
{
x: 10,
y: 0,
r: Math.abs(randomScalingFactor()) / 5,
}, {
x: 20,
y: 0,
r: Math.abs(randomScalingFactor()) / 5,
}, {
x: 30,
y: 0,
r: Math.abs(randomScalingFactor()) / 5,
}, {
x: 40,
y: 0,
r: Math.abs(randomScalingFactor()) / 5,
}, {
x: 50,
y: 0,
r: Math.abs(randomScalingFactor()) / 5,
}, {
x: 60,
y: 0,
r: Math.abs(randomScalingFactor()) / 5,
}, {
x: 70,
y: 0,
r: 30,
}]
}]
};
var ctx = document.getElementById('Chart').getContext('2d');
var chart = new Chart(ctx, {
type: 'bubble',
data: bubbleChartData
})
JSFiddle:https://jsfiddle.net/3dog0bec/
最佳答案
我通过修改 xAxes 刻度最小值和最大值解决了这个问题。这是有效的,因为我有一定数量的数据要显示,所以我只是将这些值设置为比第一个数据点少 10,比最后一个数据点多 10。
var chart = new Chart(ctx, {
type: 'bubble',
data: bubbleChartData,
options: {
scales: {
xAxes: [
{
ticks: {
min: -10,
max: 100
}
}]
}
}
});
关于chart.js - Chart.js 中的气泡被截断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38402075/