Chart.jsでバブルが途切れている

Question

私のチャートの最後のバブルが途切れる問題があります。全体の円が表示されるようにグラフを拡張する方法が必要です。私は余分な価値を加えることから最後までパディングを調整することまで、すべてを試しました。何も動作していないようです。残念なことに、バブルチャートに関する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/

Answer 1

Iは最小値と最大値をティックxAxesを変更することで、この問題を解決しました。これは、表示するデータの数が設定されているために機能しました。そのため、値を最初のデータポイントより10少なく、最後のデータポイントよりも10に設定するだけです。

var chart = new Chart(ctx, { 
     type: 'bubble', 
     data: bubbleChartData, 
     options: { 
      scales: { 
       xAxes: [ 
       { 
        ticks: { 
         min: -10, 
         max: 100 
        } 
       }] 
      } 
     } 
    });