Hohe und niedrige Punkte auf dem Diagramm abgeschnitten

Question

Die unteren und oberen Punkte in diesem Diagramm werden abgeschnitten, gibt es eine Möglichkeit, diese ohne zu beheben wissen, welche Zahlen in den Daten sein werden?

Ich habe andere Leute gesehen, die mit den Mindest- und Höchstwerten des Diagramms eine Auffüllung erzeugen, aber ich weiß nicht, was die Werte vorher sein werden.

Chart:

Ein ähnliches Beispiel aus dem gleichen Problem leiden, wird hier gezeigt: http://codepen.io/erose/pen/LNwdQO/

Hier ist der HTML:

<div class="chart-container"> 
    <canvas id="chart"></canvas> 
</div> 

Hier ist die CSS:

.chart-container { 
    width: 493px; 
    height: 83px; 
} 

canvas { 
    -moz-user-select: none; 
    -webkit-user-select: none; 
    -ms-user-select: none; 
} 

und hier die der obigen Tabelle verwendet JS zu erstellen:

var ctx = $("#chart"); 

Chart.defaults.global.responsive = true; 
Chart.defaults.global.maintainAspectRatio = false; 
Chart.defaults.global.legend.display = false; 
Chart.defaults.global.tooltips.backgroundColor = "lightblue"; 
Chart.defaults.global.tooltips.bodyFontFamily = "sans-serif"; 
Chart.defaults.global.tooltips.bodyFontSize = 20; 
Chart.defaults.global.tooltips.bodyColor = "#95989a"; 
Chart.defaults.global.tooltips.bodyAlign = "left"; 
Chart.defaults.global.tooltips.titleFontSize = 0; 
Chart.defaults.global.tooltips.titleMarginBottom = 0; 
Chart.defaults.global.tooltips.footerMarginTop = 0; 
Chart.defaults.global.tooltips.cornerRadius = 12; 
Chart.defaults.global.tooltips.caretSize = 10; 
Chart.defaults.global.tooltips.xPadding = 20; 
Chart.defaults.global.tooltips.yPadding = 10; 
Chart.defaults.scale.gridLines.color = 'white'; 

var myChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
    labels: ["   ", "", "", "", "", "", "", "", "", "   "], 
    datasets: [{ 
     label: '$', 
     data: [100,100,100,100,0,100,100,100,100,100], 
     fill: false, 
     borderWidth: 1, 
     borderColor: "#2f75c1", 
     borderCapSytle: "round", 
     pointBorderColor: "#2f75c1", 
     pointBackgroundColor: "#2f75c1", 
     pointBorderWidth: 5, 
     pointHoverRadius: 10, 

    }] 
    }, 
    options: { 
    scales: { 
     yAxes: [{ 
     gridLines: { 
      display: false 
     }, 
     scaleLabel: { 
      display: false 
     }, 
     scaleLkneColor: 'white', 
     ticks: { 
      display: false 
     } 
     }], 
     xAxes: [{ 
     gridLines: { 
      display: false 
     }, 
     scaleLabel: { 
      display: false 
     }, 
     // ticks: { 
     // display: false 
     // } 
     }] 
    } 
    } 
}); 

Answer 1

Aus der Lektüre Ihrer Frage, die ich glaube, Sie wollen, dass die für den Kreis nicht nur nicht abgeschnitten werden, aber Sie würden einige zusätzliche Polsterung im Inneren des Diagramm mögen.

Dafür würde ich strukturieren dies ein wenig anders:

var ctx = $("#chart"); 
 

 
Chart.defaults.global.responsive = true; 
 
Chart.defaults.global.maintainAspectRatio = false; 
 
Chart.defaults.global.legend.display = false; 
 
Chart.defaults.global.tooltips.backgroundColor = "lightblue"; 
 
Chart.defaults.global.tooltips.bodyFontFamily = "sans-serif"; 
 
Chart.defaults.global.tooltips.bodyFontSize = 20; 
 
Chart.defaults.global.tooltips.bodyColor = "#95989a"; 
 
Chart.defaults.global.tooltips.bodyAlign = "left"; 
 
Chart.defaults.global.tooltips.titleFontSize = 0; 
 
Chart.defaults.global.tooltips.titleMarginBottom = 0; 
 
Chart.defaults.global.tooltips.footerMarginTop = 0; 
 
Chart.defaults.global.tooltips.cornerRadius = 12; 
 
Chart.defaults.global.tooltips.caretSize = 10; 
 
Chart.defaults.global.tooltips.xPadding = 20; 
 
Chart.defaults.global.tooltips.yPadding = 10; 
 
Chart.defaults.scale.gridLines.color = 'white'; 
 
var getData = [100,100,100,100,0,100,100,100,100,100]; 
 
var getLabels = ["", "", "", "", "", "", "", "", "", ""]; 
 
var minNum = function(array){ 
 
    return Math.min.apply(Math, array)-10; 
 
} 
 
var maxNum = function(array){ 
 
    return Math.max.apply(Math, array)+10; 
 
} 
 
var myChart = new Chart(ctx, { 
 
    type: 'line', 
 
    data: { 
 
    labels: getLabels, 
 
    datasets: [{ 
 
     label: '$', 
 
     data: getData, 
 
     fill: false, 
 
     borderWidth: 1, 
 
     borderColor: "#2f75c1", 
 
     borderCapSytle: "round", 
 
     pointBorderColor: "#2f75c1", 
 
     pointBackgroundColor: "#2f75c1", 
 
     pointBorderWidth: 5, 
 
     pointHoverRadius: 10, 
 

 
    }] 
 
    }, 
 
    options: { 
 
    scales: { 
 
     yAxes: [{ 
 
     gridLines: { 
 
      display: false 
 
     }, 
 
     scaleLabel: { 
 
      display: false 
 
     }, 
 
     scaleLkneColor: 'white', 
 
     ticks: { 
 
      suggestedMin: minNum(getData), 
 
      suggestedMax: maxNum(getData), 
 
     } 
 
     }], 
 
     xAxes: [{ 
 
     gridLines: { 
 
      display: false 
 
     }, 
 
     scaleLabel: { 
 
      display: false 
 
     }, 
 
     // ticks: { 
 
     // display: false 
 
     // } 
 
     }] 
 
    } 
 
    } 
 
});

.chart-container { 
 
    width: 493px; 
 
    height: 83px; 
 
} 
 

 
canvas { 
 
    -moz-user-select: none; 
 
    -webkit-user-select: none; 
 
    -ms-user-select: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script> 
 
<div class="chart-container"> 
 
    <canvas id="chart"></canvas> 
 
</div>

2 Wichtige Änderungen

1. ich eine getData var das Array auf diese Weise kann die Anordnung zu halten, formatiert werden, aber Sie mögen die Funktion ist es egal, es sucht nur nach GetData und erwartet ein Array.
2. habe ich eine minNum und MAXNUM Funktion durch das Feld zu gehen, und wählen Sie entweder die niedrigste oder höchste Zahl dann rufen Sie, dass Sie in den Ticker mehr dazu bei ChartJS Scales

finden