Высокие и низкие точки на графике становятся обрезанными

Question

Низкие и высокие точки на этой диаграмме обрезаются, есть ли способ исправить это без зная, какие цифры будут в данных?

Я видел, как другие люди создают прописку с минимальными и максимальными значениями диаграммы, но я не знаю, какие значения будут заблаговременно.

Диаграмма:

Аналогичный пример страдает от тех же проблем показано здесь: http://codepen.io/erose/pen/LNwdQO/

Вот HTML:

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

Вот CSS:

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

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

и здесь JS, используемый для создания выше диаграмм:

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

Прочитав ваш вопрос, я полагаю, вы не только хотите, чтобы для круга, чтобы не отрезать, но вы хотели бы некоторые дополнительные прокладки внутри диаграммы.

Для этого я бы структурировать это немного по-другому:

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 Важных изменений

1. создать вар GetData, чтобы держать массив таким образом массив может отформатируйте, однако вам нравится, что функция не заботится, просто ищет getData и ожидает массив.
2. Я создал функцию minNum и MAXNUM пройти через массив и выбрать либо низкое или высокое число затем вызвать, что внутри тикер вы можете найти больше об этом на ChartJS Scales