bagaimana cara menetapkan nilai awal sebagai "0" di chartjs?

109

ini kode saya. saya perlu menetapkan nilai awal sebagai "0" di kedua skala sumbu x dan y. Saya telah mencoba opsi skala versi terbaru.

graphOptions = {               
            ///Boolean - Whether grid lines are shown across the chart
            scaleShowGridLines: false,    
            tooltipTitleTemplate: "<%= label%>",
            //String - Colour of the grid lines
            scaleGridLineColor: "rgba(0,0,0,.05)",
            //Number - Width of the grid lines
            scaleGridLineWidth: 1,
            //Boolean - Whether to show horizontal lines (except X axis)
            scaleShowHorizontalLines: true,
            //Boolean - Whether to show vertical lines (except Y axis)
            scaleShowVerticalLines: true,
            //Boolean - Whether the line is curved between points
            bezierCurve: true,
            //Number - Tension of the bezier curve between points
            bezierCurveTension: 0.4,
            //Boolean - Whether to show a dot for each point
            pointDot: true,
            //Number - Radius of each point dot in pixels
            pointDotRadius: 4,
            //Number - Pixel width of point dot stroke
            pointDotStrokeWidth: 1,               
            pointHitDetectionRadius: 20,               
            datasetStroke: true,
            datasetStrokeWidth: 2,
            datasetFill: true,               
            legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
        };
        var LineChart = new Chart(ctx).Line(graphData, graphOptions);
   }     
Suganthan Raj
sumber

Jawaban:

298

Untuk Chart.js 2. *, opsi skala untuk dimulai dari nol terdaftar di bawah opsi konfigurasi skala linier . Ini digunakan untuk data numerik, yang kemungkinan besar adalah kasus sumbu y Anda. Jadi, Anda perlu menggunakan ini:

options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}

Bagan garis sampel juga tersedia di sini di mana opsi digunakan untuk sumbu y. Jika data angka Anda adalah pada sumbu x, menggunakan xAxesbukan yAxes. Perhatikan bahwa array (dan jamak) digunakan untuk yAxes(atau xAxes), karena Anda mungkin juga memiliki banyak sumbu.

xnakos.dll
sumber
@SuganthanRaj Sama-sama! Pastikan bahwa Anda berkonsultasi dengan dokumen untuk Chart.js 2.0. Banyak yang telah berubah dari versi 1.0 dan sebagian besar contoh online berlaku untuk versi 1.0. ;)
xnakos
@SuganthanRaj Misalnya, scaleShowVerticalLinestidak valid untuk 2.0. Atau template tooltip. Opsi, secara umum, mengikuti pendekatan hierarki di 2.0.
xnakos
3

Jika Anda perlu menggunakannya sebagai konfigurasi default, cukup letakkan min: 0di dalam node defaults.scale.ticks, seperti berikut:

defaults: {
  global: {...},
  scale: {
    ...
    ticks: { min: 0 },
  }
},

Referensi: https://www.chartjs.org/docs/latest/axes/

tuliomarchetto.dll
sumber
1

Harap tambahkan opsi ini:

//Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
scaleBeginAtZero : true,

(Referensi: Chart.js )

NB: Solusi asli yang saya posting adalah untuk Highcharts, jika Anda tidak menggunakan Highcharts, harap hapus tagnya untuk menghindari kebingungan

wmash
sumber
2
ini tidak bekerja . saya menggunakan versi terbaru dari chartjs v2.1
Suganthan Raj
@wmash Saya perlu memulai bagan dari nilai yang telah ditentukan. Apakah Anda tahu bagaimana melakukan ini? Saya mencoba menempatkan opsi ini ke benar dan salah, tetapi tidak berhasil.
Michael.
ini tidak benar dan bisa / harus dihapus. beginAtZero: trueadalah yang Anda butuhkan
tiga kali lipat