Question

如何创建类似下方的x轴？

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

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

Answer 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]
  }]
});

Answer 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]

自定义highcharts tick间隔

2 个答案: