Derived Axis Type

Derived Axis Type - 图1

config setup

  1. const config = {
  2.   type: 'line',
  3.   data,
  4.   options: {
  5.     responsive: true,
  6.     scales: {
  7.       x: {
  8.         display: true,
  9.       },
  10.       y: {
  11.         display: true,
  12.         type: 'log2',
  13.       }
  14.     }
  15.   }
  16. };
  1. const DATA_COUNT = 12;
  2. const NUMBER_CFG = {count: DATA_COUNT, min: 0, max: 1000};
  3. const labels = Utils.months({count: DATA_COUNT});
  4. const data = {
  5.   labels: labels,
  6.   datasets: [
  7.     {
  8.       label: 'My First dataset',
  9.       data: Utils.numbers(NUMBER_CFG),
  10.       borderColor: Utils.CHART_COLORS.red,
  11.       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
  12.       fill: false,
  13.     }
  14.   ],
  15. };

Log2 axis implementation

  1. import {Scale, LinearScale} from 'chart.js';
  3. export default class Log2Axis extends Scale {
  4.   constructor(cfg) {
  5.     super(cfg);
  6.     this._startValue = undefined;
  7.     this._valueRange = 0;
  8.   }
  10.   parse(raw, index) {
  11.     const value = LinearScale.prototype.parse.apply(this, [raw, index]);
  12.     return isFinite(value) && value > 0 ? value : null;
  13.   }
  15.   determineDataLimits() {
  16.     const {min, max} = this.getMinMax(true);
  17.     this.min = isFinite(min) ? Math.max(0, min) : null;
  18.     this.max = isFinite(max) ? Math.max(0, max) : null;
  19.   }
  21.   buildTicks() {
  22.     const ticks = [];
  24.     let power = Math.floor(Math.log2(this.min || 1));
  25.     let maxPower = Math.ceil(Math.log2(this.max || 2));
  26.     while (power <= maxPower) {
  27.       ticks.push({value: Math.pow(2, power)});
  28.       power += 1;
  29.     }
  31.     this.min = ticks[0].value;
  32.     this.max = ticks[ticks.length - 1].value;
  33.     return ticks;
  34.   }
  36.   /**
  37.    * @protected
  38.    */
  39.   configure() {
  40.     const start = this.min;
  42.     super.configure();
  44.     this._startValue = Math.log2(start);
  45.     this._valueRange = Math.log2(this.max) - Math.log2(start);
  46.   }
  48.   getPixelForValue(value) {
  49.     if (value === undefined || value === 0) {
  50.       value = this.min;
  51.     }
  53.     return this.getPixelForDecimal(value === this.min ? 0
  54.       : (Math.log2(value) - this._startValue) / this._valueRange);
  55.   }
  57.   getValueForPixel(pixel) {
  58.     const decimal = this.getDecimalForPixel(pixel);
  59.     return Math.pow(2, this._startValue + decimal * this._valueRange);
  60.   }
  61. }
  63. Log2Axis.id = 'log2';
  64. Log2Axis.defaults = {};
  66. // The derived axis is registered like this:
  67. // Chart.register(Log2Axis);

Docs