Highcharts - 具有tickPositioner的X軸值之間的等間距

我正在通過tickPositioner屬性傳遞x軸的一些值。這些值彼此間沒有相等的距離。我的要求是，我希望這些值彼此等距，即使它們之間沒有相同的差異。請看我的代碼如下：Highcharts - 具有tickPositioner的X軸值之間的等間距

var chart = new Highcharts.Chart({ 
chart: { 
    renderTo: 'container' 
}, 
credits: { 
    enabled: false 
}, 
title: { 
    text: 'Duration vs Productive Hours' 
}, 
xAxis: [{ 
    allowDecimals: false, 
    title: { 
     text: 'Hours' 
    }, 
    labels: { 
     rotation: -90, 
     align: 'right', 
     style: { 
      fontSize: '10px' 
     } 
    }, 
    tickPositioner: function() { 
     var pos; 
     tickPositions = []; 
     tickStart = 100000; 
     for (pos = tickStart; pos <= 1000000000; pos *= 10) { 
      tickPositions.push(pos); 
     } 
     return tickPositions; 
    } 
}], 
exporting: { 
    width: 1024, 
    filename: 'Duration_vs_Productive_Hours', 
    buttons: { 
     exportButton: { 
      menuItems: [{ 
       text: 'Export to PNG image', 
       onclick: function() { 
        this.exportChart(); 
       } 
      }, { 
       text: 'Export to JPEG image', 
       onclick: function() { 
        this.exportChart({ 
         type: 'image/jpeg' 
        }); 
       } 
      }, { 
       text: 'Export to PDF file', 
       onclick: function() { 
        this.exportChart({ 
         type: 'application/pdf' 
        }); 
       } 
      }, 
      null] 
     } 
    } 
}, 
yAxis: [{ 
    min: 0, 
    tickInterval: 10, 
    max: 60, 
    labels: { 
     formatter: function() { 
      return this.value; 
     }, 
     style: {} 
    }, 
    showEmpty: true, 
    alternateGridColor: '#f7f7f7', 
    gridLineColor: '#e7e7e7', 
    allowDecimals: false, 
    title: { 
     text: 'Duration (Months)', 
     style: {} 
    } 
}], 
tooltip: { 
    crosshairs: true, 
    formatter: function() { 
     if (this.series.type == 'line') { 
      return '' + this.x; 
     } else { 
      return '' + this.x + ': ' + this.y; 
     } 
    } 
}, 
legend: { 
    layout: 'horizontal', 
    align: 'center', 
    verticalAlign: 'bottom', 
    backgroundColor: '#FFFFFF' 
}, 
series: [{ 
    name: 'Other Projects', 
    type: 'scatter', 
    data: [ 
     [560000, 13], 
     [185250, 11], 
     [3625788, 23], 
     [1648510, 21], 
     [265000, 14], 
     [13000000, 43], 
     [28000000, 34], 
     [1567000, 19], 
     [1190000, 20], 
     [21000000, 31], 
     [7000000, 33], 
     [3805200, 30], 
     [17000000, 29], 
     [1503267, 21], 
     [11332332, 29], 
     [1485067, 20], 
     [5000000, 30], 
     [5400000, 22], 
     [13000000, 23], 
     [3810000, 26], 
     [810000, 18], 
     [27528218, 26], 
     [377319, 14], 
     [840000, 22], 
     [550000, 13], 
     [2643142, 26], 
     [412800, 13], 
     [2500000, 22], 
     [4510000, 19], 
     [523116, 15], 
     [17600000, 28], 
     [2500000, 21], 
     [21000000, 29], 
     [3500000, 17], 
     [620000, 15], 
     [163000000, 46], 
     [134000000, 41], 
     [45000000, 39], 
     [13677454, 31], 
     [167000000, 52], 
     [47000000, 33], 
     [49000000, 38], 
     [31000000, 38] 
    ] 
}, { 
    name: 'User Data', 
    type: 'line', 
    data: [ 
     [4050000, 0], 
     [4050000, 60] 
    ] 
}] });

來源

2013-03-28 Jeena

這聽起來像你試圖使軸對數。嘗試設置

xAxis:{ 
    type:"logarithmic"

並刪除。 Tickpositioner。 http://api.highcharts.com/highcharts#xAxis.type

如果你這樣做，你會得到這樣的：http://jsfiddle.net/TsaMA/與x軸的1M，10M和100M蜱等距。

有兩個xAxis設置可能：tickInterval和tickPixelInterval。 http://api.highcharts.com/highcharts#xAxis.tickInterval

如果設置

tickInterval:1

你得到1M，10M和100M，這是最接近我能得到你想要的東西。

如果知道圖表的寬度，tickPixelInterval非常有用。如果您的圖表寬度爲1000px，則可以設置tickPixelInterval：250。

來源

2013-03-28 06:39:40 SteveP

您好SteveP，我不想對數，因爲它將我的X軸分爲200K，400K，600K等。我想要的是給X軸值爲0.1M，1M，10M，100M等，但在每個tick之間有相等的間隔。請幫助。 – Jeena 2013-03-28 07:10:44

0.1,1,10,100是logartihmic。用jsfiddle示例更新。 – SteveP 2013-03-28 08:41:29

但是，包含高圖的div的固定寬度。 – Jeena 2013-03-28 10:28:27

Highcharts - 具有tickPositioner的X軸值之間的等間距

回答

相關問題