Question

如何创建如下图例：

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

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

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

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

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,
            }
        }
    }
});

Answer 1

要显示图例，您需要设置label的{{1}}属性，因此可以通过使用如下所示的代码创建图表来构建期望的输出类型。小提琴-> https://jsfiddle.net/6nkcx8sq/

dataset

Answer 2

我能够通过以下方式获得它，但是由于backgroundColor必须位于dataset内，这对于循环来说是很痛苦的。

var topClickSourceChart = new Chart('dashboard-click-source-chart', {
    type: 'bar',
    data: {
      labels: ["Facebook","Google","NONE",],
      datasets: [
          {label: "Facebook", data: [10]},{label: "Google", data: [5]},{label: "NONE", data: [3]},
      ]
    },
    options: {
        scales: {
            xAxes: [{
                display: false,
            }],
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                }
            }]
        },
        legend: {
            position: 'right',
            labels: {
                boxWidth: 10,
            }
        }
    }
});
if (topClickSourceChart.data.datasets.length > 0) topClickSourceChart.data.datasets[0].backgroundColor = '#4D90C3';
if (topClickSourceChart.data.datasets.length > 1) topClickSourceChart.data.datasets[1].backgroundColor = '#866DB2';
if (topClickSourceChart.data.datasets.length > 2) topClickSourceChart.data.datasets[2].backgroundColor = '#EA6F98';
if (topClickSourceChart.data.datasets.length > 3) topClickSourceChart.data.datasets[3].backgroundColor = '#61BDF6';
if (topClickSourceChart.data.datasets.length > 4) topClickSourceChart.data.datasets[4].backgroundColor = '#768BB7';

这是JSP / JSTL循环：

data: {
  labels: [<c:forEach items="${clickSources}" var="cs">"${cs.key}",</c:forEach>],
  datasets: [
      <c:forEach items="${clickSources}" var="cs">{label: "${cs.key}", data: [${cs.value}]},</c:forEach>
  ]
},

我仍然找不到使圆条顶部变圆的方法。

如何为条形图创建图例？

2 个答案: