Highcharts：將可點擊的圖像添加到每個xAxis gridLine

我正在構建一些自定義功能，用戶可以單擊折線圖中的數據點向該日期添加註釋。這有點讓人誤解，因爲這些筆記實際上並未附加到度量標準本身，而是它所處的日期。換句話說，如果我在一個折線圖上有6個系列，橫跨2012年1月12日 - 2012年8月1日，那麼在01/05/12上的一個單注將適用於所有6個系列。因此，您可以想象點擊6個系列其中一個系列的數據點或2012年5月1日的數據點會誤導用戶認爲此筆記將應用於該數據點，而不是整個日期和任何系列在那一天登陸。Highcharts：將可點擊的圖像添加到每個xAxis gridLine

因此，要解決這個可用性問題我已經決定，最佳視覺線索會是這樣的：

enter image description here

將會有在每個網格線X軸的頂部可點擊圖標會需要使用xAxis gridLine進行縮放（就像用戶選擇要放大的區域一樣）。

建議最好的方法來解決這個問題？我只需要建議如何最好地將圖標添加到每一行...我已經建立了所有的點擊後功能。

來源

2012-01-09 Brandon Durham

建立在Mark的建議下使用redraw事件來定位圖像並使用load事件來創建它們。需要在load上添加它們才能在導出過程中使其可用，並且您也不希望在每個redraw上都創建新圖像。

這些圖表事件用於：

events: { 
    load: drawImages, 
    redraw: alignImages 
}

在drawImages功能我使用的是逆譯名爲X軸，以圖表上的圖像定位：

x = chart.plotLeft + chart.xAxis[0].translate(i, false) - imageWidth/2, 
y = chart.plotTop - imageWidth/2;

，然後將它們添加並設置點擊處理程序，zIndex，指針光標：

chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', x, y, imageWidth, imageWidth) 
    .on('click', function() { 
     location.href = 'http://example.com' 
    }) 
    .attr({ 
     zIndex: 100 
    }) 
    .css({ 
     cursor: 'pointer' 
    }) 
    .add();

In alignImagesattr函數用於設置與drawImages中計算方法相同的圖像的新x和y值。

全部例如在jsfiddle

截圖：

screenshot

來源

2012-01-10 09:45:41 eolsson

很不錯的解決方案！我不知道翻譯方法。比查詢DOM更清潔。 – Mark 2012-01-10 14:19:23

不可思議。謝謝！ – 2012-01-10 14:43:52

@Eolsson實際上看着你的小提琴，如果我有一組日期，你能告訴我for循環是如何工作的，並且循環遍歷數組，並且對於每一個這些日期，將可點擊圖標放入xaxis中？這可能比我想要做的比較日期更容易。 – Anagio 2013-09-10 11:35:58

夫婦的想法。首先，我將使用圖表redraw事件來了解圖表何時重繪（比如放大縮小）。其次，明確地將您的圖像放在感興趣的軸位置。直接從DOM中獲取這些查詢。

使用jQuery：

$('.highcharts-axis') //return an array of the two axis.

他們將SVG 「文本元素」兒童（X，Y）的位置。

來源

2012-01-10 01:22:31 Mark

Highcharts：將可點擊的圖像添加到每個xAxis gridLine

回答

相關問題