Cara mengatur max dan min nilai untuk sumbu Y

Saya menggunakan grafik garis dari http://www.chartjs.org/

Seperti yang anda lihat nilai max (130) dan min nilai (60) untuk sumbu Y yang dipilih secara otomatis , saya ingin nilai max = 500 dan nilai min=0. Apakah ini mungkin?

Uwe Keim
Pertanyaan edit 21 Februari 2019 в 5:41
Pemrograman
chart.js
11 Maret 2015 в 3:26
217 tayangan

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 chart.js dokumentasi linear pada sumbu konfigurasi untuk lebih jelasnya.

Pedro A
Jawaban edit 10 Januari 2018 в 4:07
Komentar (2)
Larutan

Anda harus overrride 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 
    });
}
Komentar (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>
Komentar (2)

ChartJS v2.4.0

Seperti yang ditunjukkan dalam contoh-contoh di https://github.com/jtblin/angular-chart.js pada tanggal 7 februari 2017 (karena ini tampaknya menjadi subjek sering berubah):

var options = {
    yAxes: [{
        ticks: {
            min: 0,
            max: 100,
            stepSize: 20
        }
    }]
}

Hal ini akan mengakibatkan 5 sumbu-y nilai-nilai seperti:

100
80
60
40
20
0
Eduardo Dennis
Jawaban edit 25 Juli 2017 в 7:53
Komentar (2)

Tulisan ini pada tahun 2016, sementara Grafik js 2.3.0 adalah yang terbaru. Di sini adalah bagaimana seseorang dapat mengubahnya

              var options = {
                    scales: {
                       yAxes: [{
                                display: true,
                                stacked: true,
                                ticks: {
                                    min: 0, // minimum value
                                    max: 10 // maximum value
                                }
                       }]
                    }
               };
Damien Sawyer
Jawaban edit 3 Mei 2018 в 4:52
Komentar (0)

Atas jawaban didn't bekerja untuk saya. Mungkin pilihan nama-nama yang berubah sejak '11, tapi setelah melakukan trik untuk saya:

ChartJsProvider.setOptions
  scaleBeginAtZero: true
Komentar (1)
 
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 'pilihan' di v2.

Anda harus membaca dokumentasi: http://www.chartjs.org/docs/#scales-linear-scale

Komentar (3)

Ini adalah untuk Charts.js 2.0:

Alasan ini tidak bekerja adalah karena anda harus menyatakan pilihan anda ketika anda membuat chart anda seperti: 

$(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 adalah berikut ini: http://www.chartjs.org/docs/#scales

JPeG
Jawaban edit 9 Juni 2016 в 5:23
Komentar (1)
 
yAxes: [{
    display: true,
    ticks: {
        beginAtZero: true,
        steps:10,
        stepValue:5,
        max:100
    }
}]
Tunaki
Jawaban edit 16 Mei 2016 в 9:13
Komentar (1)

Hanya mengatur nilai scaleStartValue dalam pilihan anda.

var options = {
   // ....
   scaleStartValue: 0,
}

Lihat dokumentasi untuk ini di sini.

Komentar (1)

Saya menulis js untuk menampilkan nilai-nilai dari 0 sampai 100 dalam sumbu-y dengan jarak 20.

Ini adalah saya 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,
        }
      }]
    }
  }
});

Ini adalah grafik yang ditampilkan di web.

Komentar (0)

Dengan 1.1.1, saya menggunakan berikut untuk memperbaiki skala antara 0.0 dan 1.0:

var options = {
    scaleOverride: true,
    scaleStartValue: 0,
    scaleSteps: 10,
    scaleStepWidth: 0.1
}
Lingasamy Sakthivel
Jawaban edit 25 Juni 2016 в 10:02
Komentar (0)

Dalam kasus saya, saya menggunakan callback di yaxis kutu, saya nilai dalam persen dan ketika mencapai 100% itu doesn't menunjukkan dot, 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.

Komentar (0)

Grafik memiliki "min" dan "max" nilai. Dokumentasi di link ini

https://www.chartjs.org/docs/latest/axes/cartesian/linear.html

Komentar (1)

Karena tidak ada saran di atas membantu saya dengan charts.js 2.1.4, saya dipecahkan dengan menambahkan nilai 0 untuk data set array (tapi tidak ada tambahan label):

statsData.push(0);

[...]

var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        datasets: [{
            data: statsData,
[...]
Komentar (0)

Saya menggunakan versi lama dari Datar Lab template dalam beberapa proyek-proyek tambang yang menggunakan v1.x chart.js yang saya'm tidak yakin.Saya tidak bisa update ke v2.x karena saya sudah memiliki beberapa proyek bekerja dengan itu. Yang disebutkan di atas (bardata,pilihan) tidak bekerja untuk saya.

Jadi di sini adalah hack 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);
Komentar (0)