Highchart：刻度之間的確切距離

如何查找精確距離或使用Highchart在x軸上設置兩個刻度之間的精確距離（像素）？Highchart：刻度之間的確切距離

我已經使用了tickPixelInterval，它似乎沒有設置軸上兩個刻度之間的確切距離。

$(function drawCharts() { 
    var chartData = [100, 120, 120, 140, 110, 110]; 
    var index = 1; 
    $('#b').click(function() { 
    var buttonB = document.getElementById('b'); 
    buttonB.disabled = true; 
    if (index < chartData.length) { 
     var x = index, // current time 
     y = chartData[index]; 
     $('#container').highcharts().series[0].setData([chartData[index - 1]]); 
     $('#container').highcharts().series[0].addPoint([chartData[index]]); 

     setTimeout(function() { 
     if (index === 1) { 
      $('#container1').highcharts().series[0].addPoint([0, chartData[0]]); 
     } 
     $('#container1').highcharts().series[0].addPoint([x, y]); 
     index++; 
     }, 2000); 
    } 
    setTimeout(function() { 
     buttonB.disabled = false; 
    }, 3000); 

    }) 
    $(document).ready(function() { 
    var chart1 = new Highcharts.Chart({ 
     chart: { 
     renderTo: 'container1', 
     type: 'line', 
     animation: Highcharts.svg, // don't animate in old IE 
     marginRight: 10, 
     events: { 
      load: function() { 
      series = this.series[0]; 
      }, 
     } 
     }, 
     title: { 
     text: '' 
     }, 
     xAxis: { 
     title: { 
      text: '' 
     }, 
     gridLineWidth: 1, 
     startOnTick: true, 
     tickPixelInterval: 40, 
     min: 0, 
     max: 10 
     }, 
     yAxis: { 
     title: { 
      text: '' 
     }, 
     min: 0, 
     max: 200 
     }, 
     plotOptions: { 
     line: { 
      marker: { 
      enabled: false 
      } 
     }, 
     series: { 
      animation: { 
      duration: 1000 
      } 
     } 
     }, 
     tooltip: { 
     formatter: function() { 
      return Highcharts.numberFormat(this.y, 2) + 'GE'; 
     } 
     }, 
     legend: { 
     enabled: false 
     }, 
     exporting: { 
     enabled: false 
     }, 
     credits: { 
     enabled: false 
     }, 
     series: [{ 
     name: '', 
     data: [] 
     }] 
    }); 
    var chart2 = new Highcharts.Chart({ 
     chart: { 
     renderTo: 'container', 
     type: 'line', 
     animation: Highcharts.svg ? { 
      duration: 2000 
     } : false, // don't animate in old IE    marginRight: 10, 
     events: { 
      load: function() { 
      series = this.series[0]; 
      }, 
     } 
     }, 
     title: { 
     text: '' 
     }, 
     xAxis: { 
     title: { 
      text: '' 
     }, 
     gridLineWidth: 1, 
     startOnTick: true, 
     tickPixelInterval: 80, 
     categories: ['a', 'b'], 
     min: 0, 
     max: 1 
     }, 
     yAxis: { 
     title: { 
      text: '' 
     }, 
     min: 0, 
     max: 200 
     }, 
     plotOptions: { 
     line: { 
      marker: { 
      enabled: false 
      } 
     }, 
     series: { 
      animation: { 
      duration: 2000 
      } 
     } 
     }, 
     tooltip: { 
     formatter: function() { 
      return Highcharts.numberFormat(this.y, 2); 
     } 
     }, 
     legend: { 
     enabled: false 
     }, 
     exporting: { 
     enabled: false 
     }, 
     credits: { 
     enabled: false 
     }, 
     series: [{ 
     name: '', 
     data: [] 
     }] 
    }); 
    }); 
});

來源

2016-08-11 Aqqqq

能否請您提供您的代碼？ –

例如，這個？ http://jsfiddle.net/e0qxfLtt/21/ – Aqqqq

** tickPixelInterval **，每個文檔：*「此選項設置刻度標記的近似像素間隔」*將其視爲指南，並且庫選擇相應的最佳邏輯間隔。爲了更具體，可以使用** tickPositions **屬性，該屬性允許您設置特定的軸值或** tickPositioner **函數，該函數允許您定義自定義回調函數來放置刻度。參考：http：//api.highcharts.com/highcharts#xAxis.tickPositions | http://api.highcharts.com/highcharts#xAxis.tickPositioner – jlbriggs

如果你控制你的圖表的寬度，並使用邊距設置控制你的繪圖區的寬度，你知道有多少節拍，你將不得不在每張圖表，這都是一件簡單的事情。

所以，圖1：

width: 200, 
margin: [10,25,50,75]

兩個時隙，每50個像素寬

圖2：

width: 600, 
margin: [10,25,50,75]

10時隙，每個時隙50個像素寬。

更新小提琴：

http://jsfiddle.net/jlbriggs/k8r4s890/

輸出：

來源

2016-08-12 14:15:24 jlbriggs

Highchart：刻度之間的確切距離

回答

相關問題