Я использую линейную диаграмму из http://www.chartjs.org/
Как вы можете видеть, максимальное значение (130) и минимальное значение (60) для оси Y выбраны автоматически, я хочу максимальное value = 500 и значение min = 0. Возможно ли это?
Как установить максимальное и минимальное значение для оси Y
Ответ 1
Вы должны переопределить масштаб, попробуйте следующее:
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
scaleOverride : true,
scaleSteps : 10,
scaleStepWidth : 50,
scaleStartValue : 0
});
}
Ответ 2
Для chart.js V2 (бета) используйте:
var options = {
scales: {
yAxes: [{
display: true,
ticks: {
suggestedMin: 0, // minimum will be 0, unless there is a lower value.
// OR //
beginAtZero: true // minimum value will be 0.
}
}]
}
};
Для получения более подробной информации смотрите документацию chart.js по конфигурации линейных осей.
Ответ 3
var config = {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [10, 80, 56, 60, 6, 45, 15],
fill: false,
backgroundColor: "#eebcde ",
borderColor: "#eebcde",
borderCapStyle: 'butt',
borderDash: [5, 5],
}]
},
options: {
responsive: true,
legend: {
position: 'bottom',
},
hover: {
mode: 'label'
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
steps: 10,
stepValue: 5,
max: 100
}
}]
},
title: {
display: true,
text: 'Chart.js Line Chart - Legend'
}
}
};
var ctx = document.getElementById("canvas").getContext("2d");
new Chart(ctx, config);<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<canvas id="canvas"></canvas>
</body>Ответ 4
ChartJS v2.4.0
Как показано в примерах в https://github.com/jtblin/angular-chart.js 7-го февраля 2017 года (поскольку это, как представляется, подвержено частым изменениям):
var options = {
yAxes: [{
ticks: {
min: 0,
max: 100,
stepSize: 20
}
}]
}
Это приведет к 5 значениям оси y как таковым:
100
80
60
40
20
0
Ответ 5
Написание этого в 2016 году, в то время как Chart JS 2.3.0 является самым последним. Вот как это можно изменить
var options = {
scales: {
yAxes: [{
display: true,
stacked: true,
ticks: {
min: 0, // minimum value
max: 10 // maximum value
}
}]
}
};
Ответ 6
Вышеуказанные ответы не помогли мне. Возможно, имена опций были изменены с "11", но следующее трюк для меня:
ChartJsProvider.setOptions
scaleBeginAtZero: true
Ответ 7
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx ,{
type: 'line',
data: yourData,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
min: 0,
max: 500
}
}]
}
}
});
Я настраиваю с помощью "options" в v2.
Вы должны прочитать документацию: http://www.chartjs.org/docs/#scales-linear-scale
Ответ 8
Просто установите для параметра scaleStartValue значение.
var options = {
// ....
scaleStartValue: 0,
}
Смотрите документацию для этого здесь.
Ответ 9
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
steps:10,
stepValue:5,
max:100
}
}]
Ответ 10
Это для Charts.js 2.0:
Причина, по которой некоторые из них не работают, заключается в том, что вы должны объявлять свои параметры при создании диаграммы следующим образом:
$(function () {
var ctxLine = document.getElementById("myLineChart");
var myLineChart = new Chart(ctxLine, {
type: 'line',
data: dataLine,
options: {
scales: {
yAxes: [{
ticks: {
min: 0,
beginAtZero: true
}
}]
}
}
});
})
Документация для этого здесь: http://www.chartjs.org/docs/#scales
Ответ 11
Я написал JS для отображения значений от 0 до 100 по оси Y с разрывом в 20.
Это мой script.js
//x-axis
var vehicles = ["Trucks", "Cars", "Bikes", "Jeeps"];
//The percentage of vehicles of each type
var percentage = [41, 76, 29, 50];
var ctx = document.getElementById("barChart");
var lineChart = new Chart(ctx, {
type: 'bar',
data: {
labels: vehicles,
datasets: [{
data: percentage,
label: "Percentage of vehicles",
backgroundColor: "#3e95cd",
fill: false
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
min: 0,
max: 100,
stepSize: 20,
}
}]
}
}
});Ответ 12
В 1.1.1 я использовал следующее, чтобы исправить шкалу между 0.0 и 1.0:
var options = {
scaleOverride: true,
scaleStartValue: 0,
scaleSteps: 10,
scaleStepWidth: 0.1
}
Ответ 13
Поскольку ни одно из предложений, приведенных выше, не помогло мне с charts.js 2.1.4, я решил это, добавив значение 0 в мой массив массивов данных (но без дополнительной метки):
statsData.push(0);
[...]
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
datasets: [{
data: statsData,
[...]
Ответ 14
Я использовал старую версию шаблона Flat Lab в нескольких моих проектах, которые использовали v1.x диаграммы. Я не уверен. Я не смог обновить v2.x, поскольку у меня уже было несколько проектов работая с ним.
Вышеупомянутый (bardata,options) не работал у меня.
Итак, вот взлом для версии 1.x
calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString);
Замените его:
calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,1,valueBounds.maxValue,0,labelTemplateString);
Ответ 15
В моем случае я использовал обратный вызов в тиках яксиса, мои значения в процентах, и когда он достигает 100%, он не показывает точку, я использовал это:
yAxes: [{
ticks: {
beginAtZero: true,
steps: 10,
stepValue: 5,
max: 100.1,
callback: function(value, index, values) {
if (value !== 100.1) {
return values[index]
}
}
}
}],
И это сработало хорошо.
Ответ 16
Диаграмма имеет значения "мин" и "макс". Документация по этой ссылке
https://www.chartjs.org/docs/latest/axes/cartesian/linear.html