วิธีการตั้งค่าสูงสุดและต่ำสุดสำหรับแกน Y

ฉันกำลังใช้แผนภูมิเส้นจากhttp://www.chartjs.org/

เนื่องจากคุณสามารถเห็นค่าสูงสุด (130) และค่าต่ำสุด (60) สำหรับแกน Y ถูกเลือกโดยอัตโนมัติฉันต้องการค่าสูงสุด = 500 และค่าต่ำสุด = 0 เป็นไปได้ไหม

คุณต้องลบล้างสเกลลองสิ่งนี้:

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 
    });
}

สำหรับ 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 เกี่ยวกับการกำหนดค่าแกนเชิงเส้นสำหรับรายละเอียดเพิ่มเติม

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

เขียนสิ่งนี้ในปี 2559 ในขณะที่ Chart js 2.3.0 เป็นเวอร์ชั่นล่าสุด นี่คือวิธีที่หนึ่งสามารถเปลี่ยนแปลงได้

var options = {
    scales: {
        yAxes: [{
            display: true,
            stacked: true,
            ticks: {
                min: 0, // minimum value
                max: 10 // maximum value
            }
        }]
    }
};

คำตอบข้างต้นไม่ได้ผลสำหรับฉัน อาจเป็นไปได้ว่าชื่อตัวเลือกมีการเปลี่ยนแปลงตั้งแต่ '11 แต่ต่อไปนี้เป็นเคล็ดลับสำหรับฉัน:

ChartJsProvider.setOptions
  scaleBeginAtZero: true

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

ฉันเขียน 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,
        }
      }]
    }
  }
});

นี่คือกราฟที่แสดงบนเว็บ

> ทางออกที่ดีที่สุด

  "options":{
                    scales: {
                                yAxes: [{
                                    display: true,
                                    ticks: {
                                        suggestedMin: 0, //min
                                        suggestedMax: 100 //max 
                                    }
                                }]
                            }
                    }

เพียงตั้งค่าสำหรับscaleStartValueในตัวเลือกของคุณ

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

โปรดดูเอกสารสำหรับเรื่องนี้ที่นี่

yAxes: [{
    display: true,
    ticks: {
        beginAtZero: true,
        steps:10,
        stepValue:5,
        max:100
    }
}]

นี่สำหรับ 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

ด้วย 1.1.1 ฉันใช้สิ่งต่อไปนี้เพื่อแก้ไขสเกลระหว่าง 0.0 และ 1.0:

var options = {
    scaleOverride: true,
    scaleStartValue: 0,
    scaleSteps: 10,
    scaleStepWidth: 0.1
}

ในกรณีของฉันฉันใช้การโทรกลับด้วยเครื่องหมายติ๊ก yaxis ค่าของฉันเป็นเปอร์เซ็นต์และเมื่อถึง 100% จะไม่แสดงจุดฉันใช้สิ่งนี้:

      yAxes: [{
                   ticks: {
                       beginAtZero: true,
                       steps: 10,
                       stepValue: 5,
                       max: 100.1,
                       callback: function(value, index, values) {
                           if (value !== 100.1) {
                               return values[index]
                           }
                       }
                   }
               }],

และมันก็ใช้ได้ดี

เนื่องจากไม่มีคำแนะนำข้างต้นช่วยฉันด้วย charts.js 2.1.4 ฉันแก้ไขได้โดยการเพิ่มค่า 0 ลงในอาร์เรย์ชุดข้อมูลของฉัน (แต่ไม่มีป้ายกำกับเพิ่มเติม):

statsData.push(0);

[...]

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

ฉันใช้เทมเพลต Flat Lab เวอร์ชันเก่าในหลายโครงการของฉันซึ่งใช้ v1.x ของ chart.js ซึ่งฉันไม่แน่ใจฉันไม่สามารถอัปเดตเป็น 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);

แผนภูมิมีค่า "ต่ำสุด" และ "สูงสุด" เอกสารเกี่ยวกับลิงค์นี้

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