自定义highcharts刻度间隔

如何创建一个x轴，如下图所示

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

---

例如，间隔1和10等于10px，但在10和40之间只有5px不受支持，但可以通过覆盖转换方法：

例如，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]
  }]
});

---

下面的代码添加了位置[133、141、150、160、171、185、200、218、240、267、300、343、400、480、600、800、1200、2400]，间距为偶数，如附图所示

---

但是，如何？根据API文档，tickPositioner返回简单的数据数组。滴答声之间的像素间隔无关。演示脚本没有明确说明。在tickPositioner中，您可以访问此.width，以便了解轴的最小、最大和宽度。现在，只需编写逻辑，根据您想要的位置返回简单数组。您可以演示一些示例，如何使用此。宽度吗？当然，这是：。然而，我才意识到我误解了你的问题。在xAxis上，不同的范围需要不同的空间。一般来说，它不受支持，您可以尝试使用ordinal axis来解决这个问题，但只能在Highstock中解决。然而，我认为它不受支持，但可以实现。请参阅更新的答案。

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]