將線段/柱形圖上的xAxis對齊

我無法使用常見的日期時間xAxis在線條和柱形圖中直觀地排列。我希望十字線能夠同步移動。將線段/柱形圖上的xAxis對齊

這裏是行和列的圖表與同步十字證明：

https://jsfiddle.net/aadhoc331/9xodqw4u/

（注：實際上，我使用Highstock的當前版本，但小提琴是一個最小的例子）

強制性代碼（而不是去撥弄）：

$('<div class="chart">') 
    .appendTo('#container') 
    .highcharts({ 
     title: { 
      text: 'Chart A', 
     }, 
     chart: { 
      type: 'line' 
     }, 
     xAxis: { 
      type: 'datetime', 
      crosshair: true, 
     }, 
     yAxis: { 
      title: { 
       text: undefined 
      }, 
      labels: { 
       enabled: false, 
      }, 
     }, 
     series: [ 
      { 
       name: 'Line', 
       type: 'line', 
       data: [ 
        [1072915200000, 8000], 
        [1104537600000, 9000], 
        [1136073600000, 10000], 
        [1167609600000, 11000], 
        [1199145600000, 12000], 
        [1230768000000, 13000], 
        [1262304000000, 14000], 
        [1293840000000, 15000], 
       ] 
      } 
     ] 
    }); 

$('<div class="chart">') 
    .appendTo('#container') 
    .highcharts({ 
     title: { 
      text: 'Chart B', 
     }, 
     chart: { 
      type: 'column' 
     }, 
     xAxis: { 
      type: 'datetime', 
      crosshair: true, 
     }, 
     yAxis: { 
      title: { 
       text: undefined 
      }, 
      labels: { 
       enabled: false, 
      }, 
     }, 
     plotOptions: { 
      column: { 
       stacking: 'normal', 
      } 
     }, 
     series: [ 
      { 
       type: 'line', 
       name: 'The Line', 
       data: [ 
        [1072915200000, 800], 
        [1104537600000, 900], 
        [1136073600000, 1000], 
        [1167609600000, 1100], 
        [1199145600000, 1200], 
        [1230768000000, 1300], 
        [1262304000000, 1400], 
        [1293840000000, 1500], 
       ] 
      }, 
      { 
       type: 'column', 
       name: 'The Columns', 
       data: [ 
        [1072915200000, 800], 
        [1104537600000, 900], 
        [1136073600000, 1000], 
        [1167609600000, 1100], 
        [1199145600000, 1200], 
        [1230768000000, 1300], 
        [1262304000000, 1400], 
        [1293840000000, 1500], 
       ] 
      } 
     ] 
    });

來源

2016-08-14 AAron

設置x軸minPadding，maxPadding性質：

xAxis: { 
      type: 'datetime', 
      crosshair: true, 
      minPadding: 0.08, 
      maxPadding: 0.08 
     }

https://jsfiddle.net/9xodqw4u/1/

被告知，如果您使用的是導航，你需要一種不同的方法 - 導航集極端和填充復位。

來源

2016-08-15 14:18:53 morganfree

你釘住了路線。因爲我沒有意識到這一點很重要，所以對航海家來說很好。我正在使用它們。什麼方法可以幫助導航員？理想的端點：https：//jsfiddle.net/aadhoc331/9xodqw4u/3/ – AAron

如果你像使用setExtremes（null，null）那樣進行填充處理 - 這是一種方法。另一個是設置極端值，但使用其他值 - setExtremes（e.min - additionalPadding，e.max + additionalPadding）。第一種情況的例子：https：//jsfiddle.net/uLw18anj/ 所以這是填充，有對齊線 - 你需要在兩個圖表同步極端，但你可以在Highcharts網站上的演示中找到它。 – morganfree

小提琴看起來非常好，我相信我可以使用它。感謝您的建議。 – AAron

將線段/柱形圖上的xAxis對齊

回答

相關問題