条形图图例调整 - Chart JS答案

【问题标题】：Bar chart legend adjustments - Chart JS条形图图例调整 - Chart JS
【发布时间】：2017-03-14 20:27:09
【问题描述】：

我是 Chart JS 的新手，我有一个条形图，其图例显示在图表下方：

var data = {
        labels: [],
        datasets: [{
            label: 'Disk C',
            backgroundColor: "#000080",
            data: [80]
        }, {
            label: 'Disk D',
            backgroundColor: "#d3d3d3",
            data: [90]
        },
        {
            label: 'Memory',
            backgroundColor: "#add8e6",
            data: [45]
        }]
    };

    var ctx = document.getElementById("mybarChart");

    ctx.height = 300;

    var mybarChart = new Chart(ctx, {
        type: 'bar',
        responsive: true,
        data: data,
        options: {
            legend: {
                display: true,
                position: 'bottom'
            },
            scales: {
                yAxes: [{
                    display: false,
                    ticks: {
                        beginAtZero: true
                    },
                    gridLines: {
                        color: "rgba(0, 0, 0, 0)",
                    }
                }],
                xAxes: [{
                    display: false,
                    gridLines: {
                        color: "rgba(0, 0, 0, 0)",
                    },
                    barPercentage: 0.5,
                    categoryPercentage: 0.5
                }]
            }
        }
    });

但传说应该是：

有可能使颜色矩形更小，并且值显示在另一个下方，因为在我的示例中，标签显示在单行中？

【问题讨论】：

标签： javascript charts chart.js

【解决方案1】：

很遗憾，无法以您想要的方式自定义默认图例。然而幸运的是，chart.js 考虑到了这一点，并为您提供了一种机制，让您可以在画布对象之外生成和设置自己的图例（使用常规 html/css）。

您可以使用legendCallback 选项属性定义生成图例html 的方法，然后调用图表.generateLegend() 原型方法将其放入您的页面。这就是我的意思。

我的页面的 HTML。

<div style="width:25%;">
  <canvas id="mybarChart"></canvas>
  <div id="legend"></div>    
</div>

然后我在“legendCallback”选项属性中定义图例的外观。

legendCallback: function(chart) {
  var text = [];
  text.push('<ul class="' + chart.id + '-legend">');
  for (var i = 0; i < chart.data.datasets.length; i++) {
    text.push('<li><div class="legendValue"><span style="background-color:' + chart.data.datasets[i].backgroundColor + '">&nbsp;&nbsp;&nbsp;&nbsp;</span>');

    if (chart.data.datasets[i].label) {
      text.push('<span class="label">' + chart.data.datasets[i].label + '</span>');
    }

    text.push('</div></li><div class="clear"></div>');
  }

  text.push('</ul>');

  return text.join('');
}

最后，我将图例 html 添加到我的页面中。

$('#legend').prepend(mybarChart.generateLegend());

与往常一样，这里有一个codepen example，显示了一个可行的解决方案。您只需更改回调生成的 html 并使用 css 即可更改您的图例外观。

【讨论】：

@Dana 有帮助吗？