하이 차트 틱 간격 사용자 정의

Question

어떻게 아래와 같이 x 축을 만들 수 있습니까? http://jsfiddle.net/dv60w8gc/13/ 예

, 정규 확률 : translate 방식을 덮어 쓰기함으로써

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

예

간격 1 beetwen 및 10 10pxs 동일하지만 지원되지 않는

Answer 1

10 내지 40은 5pxs 있지만 가능 y 축에 대한 분포 :

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

이하의 코드는 [133, 141, 150, 160, 171, 185, 200, 21 tickPositions 추가 8, 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]