如何在Chart.js 2.1.6中的图例中显示条形标签？ [英] How to show bar labels in legend in Chart.js 2.1.6?

问题描述

我正在使用Chart.js创建图表，并且想显示图例中条形的标签，不是数据集的标题（只有一个），请参见以下内容图片为例：

我当前的图例看起来像这样：

我浏览了文档，但无济于事，实际上发现它们很混乱。 / p>

这是我当前的代码：

  var chart_0 = new Chart（ $（'＃cp_chart_0'），{
类型：'bar'
，数据：{
标签：['Blue'，'Green'，'Yellow'，'Red'，' Purple'，'Orange'] 
，数据集：[{
标签：'Dataset 1'
 ，borderWidth：0 
，backgroundColor：['＃2C79C5'，'＃7FA830'，'＃7B57C3'，'＃ED4D40'，'＃EC802F'，'＃1DC6D3'] 
，数据：[ '12'，'2'，'5'，'0'，'9'，'1'] 
}] 
} 
}）； 
  

谢谢！

解决方案

最简单的方法是为您的数据提供多个集合：

 数据：{
标签： ['总投票'] 
，数据集：[{
标签：'Blue'
，backgroundColor：['＃2C79C5'] 
，数据：['12'] 
}，{
标签：'Green'
，backgroundColor：['＃7FA830'] 
，数据：['2'] 
}，
 ... 
] 
} 
  

但是您可以使用以下方法生成自定义标签 generateLabels - http：/ /www.chartjs.org/docs/#chart-configuration-legend-configuration

甚至可以使用<$ c自定义整个图例，包括格式$ c> legendCallback - http：// www.ch artjs.org/docs/#chart-configuration-common-chart-configuration

I'm creating charts using Chart.js and I want to show the labels for the bars in the legend, not the title of the dataset (there is only one), please see the below image as an example:

My current legend just looks like this:

I have looked through the docs but to no avail, I found them very confusing actually.

Here is my current code:

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']
        }]
      }
});

Thanks!

解决方案

Easiest way is to provide your data with multiple sets :

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

But you can generate a custom labels using generateLabels - http://www.chartjs.org/docs/#chart-configuration-legend-configuration

Or even customise the whole legend, including formatting, with legendCallback - http://www.chartjs.org/docs/#chart-configuration-common-chart-configuration

这篇关于如何在Chart.js 2.1.6中的图例中显示条形标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！