Saya menggunakan bagan garis dari http://www.chartjs.org/
Seperti yang Anda lihat nilai maks (130) dan nilai min (60) untuk sumbu Y dipilih secara otomatis, saya ingin nilai maks = 500 dan nilai min = 0. Apakah ini mungkin?
Cara mengatur nilai maks dan min untuk sumbu Y
Jawaban:
Anda harus mengesampingkan skala, coba ini:
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
});
}
Apakah ada dokumentasi untuk v1.x juga @Boaz
—
Black Mamba
@IshanMahajan Dulu :) sepertinya saya tidak bisa menemukannya lagi. Saya pikir ini adalah cermin yang bagus: web-beta.archive.org/web/20150816192112/http://…
—
Boaz
Untuk chart.js V2 (beta), gunakan:
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.
}
}]
}
};
Lihat dokumentasi chart.js pada konfigurasi sumbu linear untuk detail lebih lanjut.
lihat juga
—
Ralph Callaway
min, maxdan stepsizeatribut dari ticksnamespace
suggestedMaxuntuk nilai tertinggi minimum
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>
Bekerja dengan baik di 2.4.0
—
Avinash
BaganJS v2.4.0
Seperti yang ditunjukkan dalam contoh di https://github.com/jtblin/angular-chart.js pada tanggal 7 Februari 2017 (karena ini tampaknya sering mengalami perubahan):
var options = {
yAxes: [{
ticks: {
min: 0,
max: 100,
stepSize: 20
}
}]
}
Ini akan menghasilkan nilai sumbu 5 y seperti:
100
80
60
40
20
0
Saya terkejut ini bekerja karena saya pikir
—
claudekennilol
xAxesdan yAxesseharusnya berada scalesdi bawah opsi. Yang plus ini lebih baru dari jawaban Ofer Sergev yang tampaknya benar juga mengejutkan.
Bagan saya menampilkan beberapa persamaan dengan banyak noise. Apakah ada cara untuk memperbarui nilai maks dalam waktu nyata berdasarkan nilai terbesar dari salah satu persamaan? Misalnya, nilai maks + 100.
—
Martin Erlic
Menulis ini pada 2016 sedangkan Chart js 2.3.0 adalah yang terbaru. Inilah cara seseorang mengubahnya
var options = {
scales: {
yAxes: [{
display: true,
stacked: true,
ticks: {
min: 0, // minimum value
max: 10 // maximum value
}
}]
}
};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
}
}]
}
}
});
Saya mengkonfigurasi dengan 'opsi' di v2.
Anda harus membaca dokumentasi: http://www.chartjs.org/docs/#scales-linear-scale
Terima kasih. Yang ini bekerja untuk saya di v2.5 dari chart.js. Sederhana dan efektif.
—
Ionut Necula
Doc sangat frustasi ... Saya harus mencari orang contoh untuk menebak pilihan yang tersedia.
—
Adrian P.
Jika seseorang menggunakan javascript murni, jawaban ini adalah yang benar. Saya menulis contoh kecil menggunakan ini dan saya memposting kode js lengkap saya di bawah ini.
—
Ishara Amarasekera
Saya menulis js untuk menampilkan nilai dari 0 hingga 100 dalam sumbu y dengan selisih 20.
Ini adalah script.js saya
//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,
}
}]
}
}
});Ini adalah grafik yang ditampilkan di web.
> Solusi Terbaik
"options":{
scales: {
yAxes: [{
display: true,
ticks: {
suggestedMin: 0, //min
suggestedMax: 100 //max
}
}]
}
}
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
steps:10,
stepValue:5,
max:100
}
}]
Meskipun kode ini dapat menjawab pertanyaan, memberikan konteks tambahan tentang mengapa dan / atau bagaimana ia menjawab pertanyaan akan secara signifikan meningkatkan nilai jangka panjangnya. Harap edit jawaban Anda untuk menambahkan beberapa penjelasan.
—
Toby Speight
Ini untuk Charts.js 2.0:
Alasan beberapa ini tidak berfungsi adalah karena Anda harus mendeklarasikan opsi Anda saat membuat bagan Anda seperti ini:
$(function () {
var ctxLine = document.getElementById("myLineChart");
var myLineChart = new Chart(ctxLine, {
type: 'line',
data: dataLine,
options: {
scales: {
yAxes: [{
ticks: {
min: 0,
beginAtZero: true
}
}]
}
}
});
})
Dokumentasi untuk ini ada di sini: http://www.chartjs.org/docs/#scales
Apakah ini mengadaptasi untuk perubahan di ChartJS yang datang dengan versi 2.0 (saya pikir pertanyaan dan jawaban yang diterima satu tahun yang lalu berurusan dengan ChartJS 1.x). Mungkin jawaban ini bahkan akan lebih membantu jika ini dijelaskan secara singkat. Mungkin hanya mengomentari komentar ini jika waktu memungkinkan. Terima kasih.
—
Dilettant
Dengan 1.1.1, saya menggunakan yang berikut ini untuk memperbaiki skala antara 0,0 dan 1.0:
var options = {
scaleOverride: true,
scaleStartValue: 0,
scaleSteps: 10,
scaleStepWidth: 0.1
}
Dalam kasus saya, saya menggunakan callback dalam kutu yaxis, nilai saya dalam persen dan ketika mencapai 100% tidak menunjukkan titik, saya menggunakan ini:
yAxes: [{
ticks: {
beginAtZero: true,
steps: 10,
stepValue: 5,
max: 100.1,
callback: function(value, index, values) {
if (value !== 100.1) {
return values[index]
}
}
}
}],
Dan itu bekerja dengan baik.
Karena tidak ada saran di atas yang membantu saya dengan charts.js 2.1.4, saya menyelesaikannya dengan menambahkan nilai 0 ke array kumpulan data saya (tetapi tidak ada label tambahan):
statsData.push(0);
[...]
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
datasets: [{
data: statsData,
[...]
Saya menggunakan versi lama templat Flat Lab di beberapa proyek saya yang menggunakan v1.x dari chart.js yang saya tidak yakin. Saya tidak dapat memperbarui ke v2.x karena saya sudah memiliki beberapa proyek yang bekerja dengannya . Yang disebutkan di atas(bardata,options) tidak bekerja untuk saya.
Jadi di sini adalah retas untuk versi 1.x
calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString);
Ganti dengan:
calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,1,valueBounds.maxValue,0,labelTemplateString);
Bagan memiliki nilai "min" dan "max". Dokumentasi pada tautan ini
https://www.chartjs.org/docs/latest/axes/cartesian/linear.html
Jawaban ini tidak menambahkan informasi apa pun ke pertanyaan ini, yang ditanyakan 4 tahun lalu. Selanjutnya, tautan dapat menghilang, oleh karena itu, harap sertakan intisari tautan tersebut di pos Anda.
—
Melengkung
scalesObjek dalam versi 2.x sangat berbeda. Lihat @OferSegev jawaban di bawah ini dan dokumentasi 2.x di sini .