Question

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

但传说应该是：

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

Answer 1

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

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

我页面的HTML。

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

然后我定义了图例在＆＃39; legendCallback＆＃39;中的外观。期权财产。

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来更改您的图例外观。

条形图图例调整 - 图表JS

1 个答案: