新的坐标轴(New Axes)

Chart.js 中的坐标轴可以单独扩展。坐标轴应始终来自Chart.Scale，但并非强制性的要求。

  1. let MyScale = Chart.Scale.extend({
  2.     /* extensions ... */
  3. });
  5. // MyScale现在从Chart.Scale派生而来

一旦创建了scale类，就需要将其注册到全局图表对象以便可以使用它。注册构造函数时可以提供一个默认的比例配置。注册函数的第一个参数是一个string key，用于标识之后图表用哪个缩放类型。

  1. Chart.scaleService.registerScaleType("myScale", MyScale, defaultConfigObject);

要使用新比例，只需在创建图表时将string key传递给配置。

  1. var lineChart = new Chart(ctx, {
  2.     data: data,
  3.     type: "line",
  4.     options: {
  5.         scales: {
  6.             yAxes: [
  7.                 {
  8.                     type: "myScale" // 这是传递给registerScaleType函数的相同key
  9.                 }
  10.             ]
  11.         }
  12.     }
  13. });

比例属性

在拟合过程中给出缩放实例的如下属性。

  1. {
  2.     left: Number, // 比例边框的左边
  3.     right: Number, // 比例边框的右边
  4.     top: Number,
  5.     bottom: Number,
  6.     width: Number, // 同 right - left
  7.     height: Number, // 同 bottom - top
  9.     // 每个边的边距，同css，此处是外边距
  10.     margins: {
  11.         left: Number,
  12.         right: Number,
  13.         top: Number,
  14.         bottom: Number,
  15.     },
  17.     // 边框的内间距（同CSS）
  18.     paddingLeft: Number,
  19.     paddingRight: Number,
  20.     paddingTop: Number,
  21.     paddingBottom: Number,
  22. }

比例接口

要使用Chart.js，自定义比例类型必须实现以下接口。

  1. {
  2.     // 确定数据限制。应该将this.min和this.max设置为数据最大/最小值
  3.     determineDataLimits: function() {},
  5.     // 生成刻度标记。 this.chart是图表实例。数据对象可以通过this.chart.data访问
  6.     // 如果你打算使用基类中的任何实现则buildTicks（）应该在坐标轴实例上创建一个ticks数组
  7.     buildTicks: function() {},
  9.     // 获取在给定数据集的给定索引处显示数据的值，即this.chart.data.datasets[datasetIndex].data [index]
  10.     getLabelForIndex: function(index, datasetIndex) {},
  12.     // 获取给定值的像素（水平轴的x坐标，垂直轴的y坐标）
  13.     // @param index: 刻度数组中的索引
  14.     // @param includeOffset: 如果为true，则在给定刻度与下一个刻度之间获得像素半径
  15.     getPixelForTick: function(index, includeOffset) {},
  17.     // 获取给定值的像素（水平轴的x坐标，垂直轴的y坐标）
  18.     // @param value : 获取像素的值
  19.     // @param index : 数据值在数据数组中的索引
  20.     // @param datasetIndex : 索引的数据来源
  21.     // @param includeOffset : 如果为true，则在给定刻度与下一个刻度之间获得像素半径
  22.     getPixelForValue: function(value, index, datasetIndex, includeOffset) {}
  24.     // 获取给定像素的值（水平轴的x坐标，垂直轴的y坐标）
  25.     // @param pixel : 像素值
  26.     getValueForPixel: function(pixel) {}
  27. }

可选地，以下方法也可能被覆盖，但Chart.Scale基类已经提供了一个实现。

  1.     // 将缩放实例的刻度数组转换为字符串。默认实现简单地调用this.options.ticks.callback（numericalTick，index，ticks）
  2.     convertTicksToLabels: function() {},
  4.     // 确定标签将旋转多少。默认实现将只在标尺水平时旋转标签。
  5.     calculateTickRotation: function() {},
  7.     // 依canvas适配比例
  8.     // this.maxWidth和this.maxHeight会告诉你scale实例可以达到的最大尺寸。比例尺应尽可能使用画布空间。
  9.     // this.margins是您可以扩展到的scale两侧的空间量。这已经用于计算最佳标签旋转。
  10.     // 必须将this.minSize设置为您的比例尺寸。它必须是包含2个属性的对象：width和height。
  11.     // 必须将this.width设置为宽度，this.height为scale的高度
  12.     fit: function() {},
  13.     // 将比例绘制到canvas上。this.(left|right|top|bottom)将被填充以告诉你canvas上的区域进行绘制
  14.     // @param chartArea : 一个包含四个属性的对象：left, right, top, bottom。折线图，条形图等将被绘制在该区域。例如，它可以用于绘制网格线。
  15.     draw: function(chartArea) {},

Core.Scale基类还有一些实用功能，可能会对你有所帮助。

  1. {
  2.     // 如果scale实例是水平的，则返回true
  3.     isHorizontal: function() {},
  5.     // 从this.chart.data.datasets [x] .data []中获取正确的值
  6.     // 如果dataValue是一个对象，则返回.x或.y，具体取决于isHorizo​​ntal（）的返回值
  7.     // 如果该值未定义，则返回NaN
  8.     // 否则返回该值
  9.     // 请注意，在任何情况下，返回的值不能保证一定是个数字
  10.     getRightValue: function(dataValue) {},
  11. }