如何为条形图创建图例？ [英] How do I create a legend for a bar chart?

问题描述

如何创建如下所示的图例：

How do I create legends like the following:

到目前为止，我有以下内容：

So far I have the following:

我不知道如何为图例指定标签。他们也不提供示例。

I can't figure out how to specify labels for the legend. They don't provide examples either.

https://www.chartjs.org/docs/latest/configuration/legend.html

到目前为止，我有以下代码：

So far I have the following code:

var topClickSourcesChart = new Chart('dashboard-click-source-chart', {
    type: 'bar',
    data: {
      labels: ["Facebook","Google","NONE",],
      datasets: [{
        data: [10,5,3,],
        backgroundColor: ['#4D90C3', '#866DB2', '#EA6F98', '#61BDF6', '#768BB7'],
      }],
    },
    options: {
        scales: {
            xAxes: [{
                display: false,
            }]
        },
        legend: {
            position: 'right',
            labels: {
                boxWidth: 10,
            }
        }
    }
});

推荐答案

要显示图例，您需要设置<$ 数据集的c $ c> label 属性，因此可以通过根据所示代码创建图表来构建期望的输出类型下面。小提琴-> https://jsfiddle.net/6nkcx8sq/

To show a legend you need to set the label property of a dataset, so the type of output you are expecting can be built by creating a chart from the code as shown below. Fiddle -> https://jsfiddle.net/6nkcx8sq/

var topClickSourcesChart = new Chart('dashboard-click-source-chart', {
    type: 'bar',
    data: {
      labels: ["Number of users"],
      datasets: [{
        label: 'Facebook',
        data: [10],
        backgroundColor: '#4D90C3',
      },
      {
        label: 'Instagram',
        data: [15],
        backgroundColor: '#866DB2',
      },
      {
        label: 'Twitter',
        data: [7],
        backgroundColor: '#EA6F98',
      }],
    },
    options: {
        scales: {
            xAxes: [{
                display: false,
            }],
            yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
        },
        legend: {
            position: 'right',
            labels: {
                boxWidth: 10,
            }
        }
    }
});

这篇关于如何为条形图创建图例？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！