Highcharts - 具有tickPositioner的X轴值之间的相等间距

时间:2013-03-28 04:57:59

标签: 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]
     ]
 }] });

1 个答案:

答案 0 :(得分:0)

听起来你正试图让轴成对数。尝试设置

xAxis:{
    type:"logarithmic"

然后删除。 Tickpositioner。 http://api.highcharts.com/highcharts#xAxis.type

如果你这样做,你得到这个:http://jsfiddle.net/TsaMA/,xAxis刻度等间距为1M,10M和100M。

有两种xAxis设置:tickInterval和tickPixelInterval。 http://api.highcharts.com/highcharts#xAxis.tickInterval

如果您设置

tickInterval:1

你得到1M,10M和100M,这是我能得到你想要的最接近的。

如果你知道图表的宽度,那么

tickPixelInterval非常有用。如果您的图表宽度为1000px,则可以设置tickPixelInterval:250。