Chart.js，您可以覆盖图例标签框的颜色吗？

Question

通常，标签图例框的颜色与背景颜色相同。在我的条形图中，我有一个黄色的数据点（第一个），然后是一束蓝色的数据点。我希望我的标签图例框颜色为蓝色，但它显示为黄色，因为backgroundColors数组中的第一个颜色是黄色。

我可以保持图表的组织相同，并覆盖黄色的图例框颜色使其变为蓝色吗？

Answer 1

No way可以覆盖此行为（由JS生成的颜色），这种想法在大多数情况下非常有用（图例就像颜色的“索引”）。

解决此问题的唯一方法是为此HTML生成自己的legend。

https://www.chartjs.org/docs/latest/configuration/legend.html#html-legendshttps://codepen.io/mesuutt/pen/LbyPvr?editors=1011

在我看来，要完成这样一个简单的任务就很复杂。

非常简单的“愚蠢”解决方案-在将图例设置为false的选项下：

var options = {
  legend: false,
};

并在图表中添加所需的任何标签/设计：

  <div>
    <div style="text-align: center;">Hello Legend</div>
    <canvas id="chart" height="250px"></canvas>
  </div>

代码示例（同样，对于复杂/动态的想法，您需要使用generateLegend()（在此示例中，我将默认标签更改为“ hello”）：

var options = {
  title: {
    display: true,
    text: 'Custom legend example',
    position: 'bottom'
  },
  legend: false,
  legendCallback: function(chart) {
    var legendHtml = '<h2>Hello legendCallback</h2>';
    return legendHtml;
  },
  scales: {
    xAxes: [{
    }],
    yAxes: [{
      ticks: {
        beginAtZero: true
      }
    }]
  }
};

var data = {
  labels: ["Jan", "Feb"],
  datasets: [{
    label: 'Visitor',
    data: [65, 59],
    backgroundColor: ['#f9ed32', '#f98639']
  }]
};

var chart = new Chart(document.getElementById('chart'), {
  type: 'bar',
  data: data,
  options: options
});

$('#my-legend-con').html(chart.generateLegend());

<div>
  <div style="display: flex; justify-content: center; align-items: center;">
    <div style="width: 40px; height: 15px; background: blue; margin-right: 5px; display: inline-block; border: 3px solid rgba(0,0,0,0.3);">
    </div>
    <div style="display: inline-block; ">
      Hello Legend
    </div>
  </div>
  <canvas id="chart" height="250px"></canvas>
  <div id="my-legend-con"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>