Blase wird abgeschnitten in Chart.js

Question

Ich habe ein Problem, wo die letzte Blase in meinem Diagramm abschneidet. Ich brauche eine Möglichkeit, das Diagramm so zu erweitern, dass der gesamte Kreis angezeigt wird. Ich habe alles ausprobiert, von einem zusätzlichen Wert bis zum Ende, zum Anpassen der Polsterung. Nichts scheint zu funktionieren. Leider fehlt auch die Chart JS-Dokumentation in den Bubble-Charts stark.

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

löste ich dieses Problem durch die xAxes Modifizieren Zecken min und max. Dies funktionierte, weil ich eine bestimmte Anzahl von Daten zur Anzeige hatte, also setze ich einfach die Werte auf 10 weniger als den ersten Datenpunkt und 10 mehr als die letzte.

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