如何在Chart.js 2.1.6的圖例中顯示條形標籤？

我使用Chart.js創建圖表，我想在圖例中顯示酒吧的標籤，而不是數據集的標題（只有一個），請參閱下面的圖像作爲示例：如何在Chart.js 2.1.6的圖例中顯示條形標籤？

我現在的傳說只是看起來是這樣的：

我已經通過文檔，但無濟於事看着，我發現他們其實很混亂。

這裏是我當前的代碼：

var chart_0 = new Chart($('#cp_chart_0'), { 
     type: 'bar' 
    , data: { 
      labels: ['Blue','Green','Yellow','Red','Purple','Orange'] 
     , datasets: [{ 
       label: 'Dataset 1' 
      , borderWidth: 0 
      , backgroundColor: ['#2C79C5','#7FA830','#7B57C3','#ED4D40','#EC802F','#1DC6D3'] 
      , data: ['12','2','5','0','9','1'] 
     }] 
     } 
});

謝謝！

來源

2016-07-21 bbeckford

最簡單的方法是提供您的數據擁有多套：

data: { 
     labels: ['total votes'] 
    , datasets: [{ 
      label: 'Blue' 
     , backgroundColor: ['#2C79C5'] 
     , data: ['12'] 
    },{ 
      label: 'Green' 
     , backgroundColor: ['#7FA830'] 
     , data: ['2'] 
    }, 
    ... 
    ] 
    }

但是你可以使用generateLabels生成自定義標籤 - http://www.chartjs.org/docs/#chart-configuration-legend-configuration

或者甚至可以自定義整個傳奇，包括格式化，用legendCallback - http://www.chartjs.org/docs/#chart-configuration-common-chart-configuration

來源

2016-07-21 23:54:16

這樣做，謝謝！我分成了多個集合，然後用'chart_0.generateLegend（）'創建了我自己的圖例，所以我對它有更多的控制權。 – bbeckford

在最新的Chart.js 2.1.x版本之一中，他們添加了這個功能。所以先去獲取最新版本。然後插入下面的代碼。

它位於選項和圖例下。這裏是你如何使用它：

options: { 
    legend: { 
     position: 'right' 
    } 
}

來源

2016-07-22 15:22:02 JPeG

非常感謝您的提示！我最終與Hugo的答案一起拆分爲多個數據集，並用'chart_0.generateLegend（）'創建了我自己的圖例，這樣我就可以更好地控制它 - 但是在拆分成多個數據集之後，這也起作用了。 – bbeckford

如何在Chart.js 2.1.6的圖例中顯示條形標籤？

回答

相關問題