自定义 highcharts 刻度间隔答案

【问题标题】：Customizing highcharts tick interval自定义 highcharts 刻度间隔
【发布时间】：2014-12-11 09:21:04
【问题描述】：

如何创建如下所示的 x 轴？

1----------10-----40--50--60-----90---------100

例如，区间 beetwen 1 和 10 等于 10pxs，但 10 和 40 之间只有 5pxs

【问题讨论】：

标签： highcharts intervals

【解决方案1】：

不支持，但可以通过覆盖translate 方法：http://jsfiddle.net/dv60w8gc/13/

例如yAxis的正态概率分布：

Highcharts.wrap(Highcharts.Axis.prototype, 'translate', function (proceed) {
  // Normal Translation
  var result = proceed.apply(this, [].slice.call(arguments, 1));

  // Apply curving
  if (this.options.curvature) {
    var val = (arguments[1] / (this.max - this.min)) * (Math.PI) - (Math.PI / 2),
        val2 = (Math.sin(val) + 1) / 2;

    result = (this.len * val2);
    if (arguments[2] == 0) {
        result = this.len - result;
    }
  }
  return result;
});

$('#container').highcharts({
  yAxis: {
    min: 0,
    max: 1,
    tickInterval: 0.1,
    curvature: true
  },
  series: [{
    data: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
  }]
});

【讨论】：

但是，怎么做？根据 API 文档，“tickPositioner”返回简单的数据数组。刻度之间的像素间隔没有任何意义。演示脚本没有说明。
在tickPositioner 你可以访问this.width - 所以你知道轴的最小值、最大值和宽度。现在只需编写逻辑以根据您想要的位置返回简单数组。
你能举个例子，如何使用“this.width”吗？
当然，你在这里：jsfiddle.net/2LgaLafm。但是，我刚刚意识到我误读了您的问题。您希望 xAxis 上的不同范围具有不同的空间。一般不支持，您可以尝试使用 ordinal 轴来解决此问题，但仅限于 Highstock。
但是，我认为它不受支持，但可以实现。查看更新的答案。

【解决方案2】：

下面的代码以均匀的间距添加 tickPositions [133, 141, 150, 160, 171, 185, 200, 218, 240, 267, 300, 343, 400, 480, 600, 800, 1200, 2400]附上图片。enter image description here

H.wrap(H.Axis.prototype, 'translate', function (proceed) {
            var result = proceed.apply(this, [].slice.call(arguments, 1));
            if (this.options.curvature) {
                var tickPos = [133, 141, 150, 160, 171, 185, 200, 218, 240, 267, 300, 343, 400, 480, 600, 800, 1200, 2400];
                var tickPosLen = [275, 259, 243, 227, 211, 195, 178, 162, 146, 130, 114, 98, 81, 65, 49, 33, 17, 1];
                var index = tickPos.indexOf(arguments[1]);
                if (index >= 0) {
                    result = tickPosLen[index];
                }
                if (arguments[2] == 0) {
                    var arrBiggerElements = tickPos.filter((inArray) => {
                      return inArray > arguments[1];
                    });
                    var nextElement = Math.min.apply(null, arrBiggerElements);
                    var nextElementIndex = -1;
                    var prevElementIndex = -1;
                    if (nextElement == null) {
                        prevElementIndex = tickPos.length - 1;
                    } else {
                        nextElementIndex = tickPos.indexOf(nextElement);
                        prevElementIndex = nextElementIndex - 1;
                    }
                    var nextTickValue  = -1;
                    var prevTickValue  = -1;
                    if (nextElementIndex > 0) {
                        nextTickValue  = tickPos[nextElementIndex];
                    }
                    if (prevElementIndex > 0) {
                        prevTickValue  = tickPos[prevElementIndex];
                    }
                    if (nextTickValue > 0 && prevTickValue > 0) {
                        var fac = (nextTickValue - prevTickValue) / 16;
                        var decrement = (arguments[1] - prevTickValue) / fac;
                        var lowerPointLen = tickPosLen[prevElementIndex];
                        result = lowerPointLen - decrement;
                    }
                    result = this.len - result;
                }
            }
            return result;[enter image description here][1]

【讨论】：