如何删除 Chart.js 中的标题颜色框答案

【问题标题】：How to remove title color box in Chart.js如何删除 Chart.js 中的标题颜色框
【发布时间】：2026-01-03 19:15:02
【问题描述】：

我正在为图表使用图表 js (https://www.chartjs.org/)。我检查了文档中的所有选项，但没有找到如何隐藏标题颜色框。请看附图

【问题讨论】：

【解决方案1】：

添加以下应该隐藏图例（我希望标题颜色框是指图例）：

legend:
{
    display: false
}

var canvas = document.getElementById('myChart');
var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
    label: "My First dataset",
    fill: false,
    lineTension: 0.1,
    backgroundColor: "rgba(75,192,192,0.4)",
    borderColor: "rgba(75,192,192,1)",
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    borderJoinStyle: 'miter',
    pointBorderColor: "rgba(75,192,192,1)",
    pointBackgroundColor: "#fff",
    pointBorderWidth: 1,
    pointHoverRadius: 5,
    pointHoverBackgroundColor: "rgba(75,192,192,1)",
    pointHoverBorderColor: "rgba(220,220,220,1)",
    pointHoverBorderWidth: 2,
    pointRadius: 5,
    pointHitRadius: 10,
    data: [65, 59, 80, 0, 56, 55, 40],
  }]
};

function adddata() {
  myLineChart.data.datasets[0].data[7] = 60;
  myLineChart.data.labels[7] = "Newly Added";
  myLineChart.update();
}

var option = {
  showLines: true,
  legend: {
    display: false
  }
};
var myLineChart = Chart.Line(canvas, {
  data: data,
  options: option
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>
<canvas id="myChart" width="400" height="250"></canvas>
<input type="button" value="Add Data" onclick="adddata()">

【讨论】：

【解决方案2】：

那个盒子就是传说。您可以通过图例标志将其关闭：https://www.chartjs.org/docs/latest/configuration/legend.html

var myChart = new Chart(ctx, {
    type: 'bar',
    legend: {
      display: false
    }

【讨论】：

【解决方案3】：

type: 'bar',
data: data,
options: {
    plugins: {
        legend: {
            display: false,
         } } }

【讨论】：

查看此链接以了解如何在 Stack Overflow 上写出好的答案：*.com/help/how-to-answer。

【解决方案4】：

对于vue-chartjs，我在options 对象中添加了这个

options: {
  legend: {
    display: false
  }
}

【讨论】：