Chart.js傳奇風格

Question

我們一直在探索更改chart.js傳奇風格的方法，因爲默認不符合我們創建的Web應用的風格/設計。我們對這個librasry很感興趣，而且這個文檔似乎沒有多少好處。

我們唯一能夠改變的就是圖例中框的大小。我們正在尋找的可能是，而不是傳說中的關鍵是矩形/正方形，還是顯示爲中間有一個點或只有一行的線？

下面是我們的選項設置：

labels: { 
    fontColor: 'rgb(0,0,0)', 
    boxWidth: 10, 
    padding: 20 
    }, 

我們想知道，如果有使標籤選項中這些變化的一個簡單的方法是什麼？

UPDATE

這裏是，這是當前設置：

願我們的標貼，而不是成爲一個正方形的，但在中間也許一個點一個單行？或者至少一條線。

我從這個問題得到的一個問題是，如果圖例被更改或定製，它會失去切換的能力嗎？

Answer 1

在chart.js中，可以完成的圖例配置很少。你基本上在你的問題中提到了所有這些。原因之所以如此，是因爲默認圖例直接在畫布對象中呈現，並且很難對其進行參數化，因爲畫布API並不簡單。

儘管如此，chart.js傢伙意識到我們會希望有更多的靈活性，他們提供了一種機制來創建/設計圖表範圍以外的圖例。您可以使用legendCallback選項來創建一個函數，爲您的圖例返回HTML/CSS，然後調用.generateLegend() prorotype方法來渲染它。

使用這種方法，您可以將您的圖例置於您的HTML頁面的任何位置並對其進行設計，但您認爲它適合於普通的舊HTML/CSS。

這是一個example，它顯示瞭如何做我所描述的。我對CSS不太瞭解，所以我會把它交給你來改變方框，或者你想要的東西。

需要注意的一件事是，使用外部圖例會破壞圖例與圖表交互的功能。你將不得不自己建立這個。取決於你想做什麼，它可能有點複雜，但沒有什麼是不可能的。

這是外部自定義圖例的another example，顯示一些圖表交互。在這裏，我們將突出顯示圖例項目mouseover上的餅圖區域。請參閱此other question（實際上由您問：D）以查看如何操縱數據集切換。

你應該能夠結合所有這些例子來構建你夢想中的自定義外部傳奇！如果您有具體問題，請告訴我。