Chartjs 2.0 alpha，如何为 y 轴设置静态刻度

Question

我正在使用 Chart.js 2.0，有时我的系列会出现 "out-of-scale"，因此 this/these 系列在图表上不可见。所以我决定使用固定秤。我在文档中找到：

// Object - if specified, allows the user to override the step generation algorithm.
//          Contains the following values
//              start: // number to start at
//              stepWidth: // size of step
//              steps: // number of steps

我试过了：

{
 type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
 display: true,
 position: "right",
 id: "y-axis-2",
  // grid line settings
 gridLines: {
      show: true,
      ( ... ) 
 },

object:{
    start: 0,       // number to start at
    stepWidth: 50,  // size of step
    steps: 5,       // number of steps
},
// label settings
 labels: {
      show: true,
      ( ... )
 }
}

但是y-axis-2没有固定的刻度。 Where/how 我应该放这 3 行代码吗？

Answer 1

在选项 > yAxes 下

var ctx = document.getElementById("chart").getContext("2d");
var myChart = new Chart(ctx, {
    type: "line",
    data: lineChartData,
    options: {
        scales: {
            yAxes: [{
                override: {
                    stepWidth: 20,
                    start: 0,
                    steps: 10
                }
            }]
        }
    }
});

Fiddle - https://jsfiddle.net/es83ujat/

Answer 2

Chart.js 已删除 v2.0 中的覆盖功能 (#1564)，并将其替换为自定义比例类型和回调。不幸的是，目前还没有这方面的文档，但我整理了一些似乎基于线性比例的东西。

var UserDefinedScaleDefaults = Chart.scaleService.getScaleDefaults("linear");
var UserDefinedScale = Chart.scaleService.getScaleConstructor("linear").extend({
  buildTicks: function() {
    this.min = this.options.ticks.min;
    this.max = this.options.ticks.max;
    var stepWidth = this.options.ticks.stepWidth;

    this.ticks = [];
    for (var tickValue = this.min; tickValue <= this.max; tickValue += stepWidth) {
      this.ticks.push(tickValue);
    }

    if (this.options.position == "left" || this.options.position == "right") {
      this.ticks.reverse();
    }

    if (this.options.ticks.reverse) {
      this.ticks.reverse();
      this.start = this.max;
      this.end = this.min;
    } else {
      this.start = this.min;
      this.end = this.max;
    }

    this.zeroLineIndex = this.ticks.indexOf(0);
  }
});

Chart.scaleService.registerScaleType("user-defined", UserDefinedScale, UserDefinedScaleDefaults);

然后您可以使用 "user-defined" 类型并在选项中指定刻度：

var config = {
  type: 'line',
  data: { datasets: [{data: data}] },
  options: {
    scales: {
      xAxes: [{
        type: "linear",
        position: "bottom"
      }],
      yAxes: [{
        type: "user-defined",
        ticks: {
          min: 0,
          max: 10,
          stepWidth: 2
        }
      }]
    }
  }
};

此处要覆盖的关键函数是 buildTicks，它指定 this.min、this.max、this.start、this.end、this.zeroLineIndex 和实际刻度值数组 this.ticks.

Codepen example

Chartjs 2.0 alpha，如何为 y 轴设置静态刻度

Chartjs 2.0 alpha, how to have a static scale for y-axis

linechart

chart.js