Highcharts - 定位傳說（左右/ x和y）

我Highcharts解決方案使用戶能夠控制該系列在任何一個點都顯示的選項。由於可用的系列數量衆多，我將功能擴展到了複選框，而不僅僅是將它們全部添加到啓動中，並最初隱藏大部分，因爲這會使傳說變得巨大。Highcharts - 定位傳說（左右/ x和y）

我想重疊圖表上的一個按鈕，使它看起來整合。這本身沒有任何問題，因爲我可以給legend.x一個負值以移動它以爲按鈕騰出空間。然而，當以編程方式添加更多系列時，這會產生問題，因爲圖例保持其原始寬度，並且在太多時會丟失一些選項。

這是我的問題的一個精簡小提琴：https://jsfiddle.net/paLoxcy3/。這是一個相關的片段：

legend: { 
    align: "right", 
    x: -100 
}

這是值得加入這裏的圖形需要保持一個負責任的寬度，所以我不能只是添加width。順便說一下，如果我這樣做（並且實際上當系列名稱最終會在我當前的小提琴中放下一條線）時，它們會變成左對齊，這是不希望的。

我有不錯的發揮與周圍的legend的選擇，但在這一點上假設有效增加padding-right傳說持有人使用chart.events.load和chart.events.redraw以某種方式做手工唯一的解決辦法？這是一個有點惱人的選項來添加marginTop和 marginBottom存在，但不marginLeft和marginRight。

任何幫助非常感謝！快捷方式文件是here節省一些時間:)

來源

2016-06-28 Ian

嗨，感謝您提供有關此問題的信息。我認爲這是renderItem函數中的一個小問題。在這裏你可以看到它如何改變這個功能：https://jsfiddle.net/paLoxcy3/1/ –

完美。感謝您的幫助，並已記錄在Github上的錯誤:) – Ian

高興地看到我的例子幫助你:)我已經發布它作爲答案。 –

我認爲這個問題是在Highcharts legend.renderItem功能的小問題有關。作爲一種解決方法，您可以更改負責將項目移動到另一行的語句。在這裏，你可以看到這個說法怎麼看在代碼：

// if the item exceeds the width, start a new line 
     if (horizontal && legend.itemX - initialItemX + itemWidth > 
       (widthOption || (chart.chartWidth - 2 * padding - initialItemX - options.x))) { 
      legend.itemX = initialItemX; 
      legend.itemY += itemMarginTop + legend.lastLineHeight + itemMarginBottom; 
      legend.lastLineHeight = 0; // reset for next line (#915, #3976) 
     }

，在這裏你可以看到我是如何改變了這種說法：

// if the item exceeds the width, start a new line 
     if (horizontal && legend.itemX - initialItemX + itemWidth > 
       (widthOption || (chart.chartWidth - 2 * padding - initialItemX - ((options.align === 'right') ? (-options.x) : options.x)))) { 
      legend.itemX = initialItemX; 
      legend.itemY += itemMarginTop + legend.lastLineHeight + itemMarginBottom; 
      legend.lastLineHeight = 0; // reset for next line (#915, #3976) 
     }

在這裏你可以找到Github上話題該問題有關：

在這裏，你可以看到圖表與我的解決方法： https://jsfiddle.net/paLoxcy3/2/

此致敬禮。

來源

2016-06-29 12:49:46

Highcharts - 定位傳說（左右/ x和y）

回答

相關問題