chartjs 中的标签如何使数据不可见答案

【问题标题】：how labels in chartjs can make data invisiblechartjs 中的标签如何使数据不可见
【发布时间】：2021-10-31 03:07:19
【问题描述】：

我的代码是这样的

const data = {
  days: [
    0, 0, 0, 0, 123, 0, 0, 45, 0, 0, 0, 43, 0, 123, 0, 0, 43, 0, 0, 0, 0, 43, 0,
    0, 0, 43, 0, 0, 0, 0, 32, 0, 0, 0, 54, 0, 0, 0, 232, 32, 0, 212, 0, 0, 43,
    0, 23, 0, 0, 0, 12, 0,
  ],
  seconds: [
    52.2909, 26.4449, 16.7054, 8.7704, 3.5397, 2.7876, 6.7211, 2.8077, 0.7437,
    1.0504, 1.6137, 0.6969, 0.5165, 0.4017, 0.239, 0.2001, 0.1516, 0.0348,
    0.0443, 0.0286, 0.0217, 0.0181, 0.0122, 0.0131, 0.0031, 0.0065, 16686.9304,
    12610.8165, 49872.3664, 21321.155, 33705.2063, 54887.3542, 32077.976,
    17994.7266, 15847.4785, 24065.34, 7971.773, 3930.3123, 3294.6206, 1925.8107,
    2113.6292, 2353.2807, 448.5209, 1307.2341, 343.6484, 567.8189, 405.3052,
    79.4946, 212.0314, 81.9343, 100.1345, 61.209,
  ],
  weeks: [
    0, 0, 0, 0, 0, 213, 0, 43, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 40, 0, 0, 0, 60, 0,
    0, 0, 0, 100, 0, 0, 0, 0, 0, 0, 65, 0, 0, 78, 0, 0, 90, 0, 0, 0, 12, 0, 0,
    43, 0, 0, 0, 0,
  ],
  minutes: [
    5613.5638, 4018.1524, 2782.8912, 2223.0685, 859.3159, 1092.8524, 6106.947,
    2236.1713, 811.9827, 1642.5207, 5930.5772, 2876.2958, 3231.4032, 3190.6772,
    2563.7517, 4262.5525, 4031.1007, 682.8778, 2327.1964, 2100.0363, 2425.7081,
    2369.4146, 3155.9515, 2829.6594, 918.8314, 3467.2555, 3559.1161, 1466.975,
    4802.0379, 1910.0191, 2593.348, 4772.5789, 2503.5062, 1633.5984, 1994.0311,
    5839.1324, 2152.2181, 902.1712, 1233.78, 1399.3437, 2307.5043, 3974.9305,
    942.2388, 4584.5575, 1802.5456, 4606.8556, 5108.2835, 1111.4571, 5088.5189,
    2394.1285, 4773.9491, 3483.375,
  ],
};

const ctx = document.getElementById("myChart");
let myChart = new Chart(ctx, {
  type: "doughnut",
  data: {
    labels: Object.keys(data),
    datasets: [
      {
        label: "days",
        data: data.days,
        backgroundColor: "rgba(255, 99, 132)",
        hoverOffset: 4,
      },
      {
        label: "seconds",
        data: data.seconds,
        backgroundColor: ["rgba(255, 206, 86)"],
        hoverOffset: 4,
      },
      {
        label: "weeks",
        data: data.weeks,
        backgroundColor: ["rgba(54, 162, 235)"],
        hoverOffset: 4,
      },
      {
        label: "minutes",
        data: data.minutes,
        backgroundColor: ["rgba(75, 192, 192)"],
        hoverOffset: 4,
      },
    ],
  },
  options: {
    maintainAspectRatio: false,
    scales: {
      y: {
        display: false,
      },
    },
  },
});

*,
*::after,
*::before {
  box-sizing: border-box;
}

.chart {
  width: 400px;
  height: 400px;
  margin: auto;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Task 1</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/task1/css/normalize.css" />
    <link rel="stylesheet" href="/task1/css/style.css" />
  </head>

  <body>
    <div class="chart">
      <canvas id="myChart"></canvas>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script>
    <script src="./chart.js"></script>
  </body>
</html>

如果您运行 sn-p，您会看到所有标签的颜色都相同，这很奇怪，而且如果您勾选星期类别，它不会被删除。

我试图了解 chart.js 的工作原理，但我似乎失败了。

我想实现两件事。

1- 为每个标签分配不同的颜色。

2- 每当我点击一个标签时，所有相关数据都应该被删除。

有什么帮助吗？

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

可以通过定义以下选项来获得预期的行为：

请查看您修改后的代码，看看它是如何工作的。

const data = {
  days: [
    0, 0, 0, 0, 123, 0, 0, 45, 0, 0, 0, 43, 0, 123, 0, 0, 43, 0, 0, 0, 0, 43, 0,
    0, 0, 43, 0, 0, 0, 0, 32, 0, 0, 0, 54, 0, 0, 0, 232, 32, 0, 212, 0, 0, 43,
    0, 23, 0, 0, 0, 12, 0,
  ],
  seconds: [
    52.2909, 26.4449, 16.7054, 8.7704, 3.5397, 2.7876, 6.7211, 2.8077, 0.7437,
    1.0504, 1.6137, 0.6969, 0.5165, 0.4017, 0.239, 0.2001, 0.1516, 0.0348,
    0.0443, 0.0286, 0.0217, 0.0181, 0.0122, 0.0131, 0.0031, 0.0065, 16686.9304,
    12610.8165, 49872.3664, 21321.155, 33705.2063, 54887.3542, 32077.976,
    17994.7266, 15847.4785, 24065.34, 7971.773, 3930.3123, 3294.6206, 1925.8107,
    2113.6292, 2353.2807, 448.5209, 1307.2341, 343.6484, 567.8189, 405.3052,
    79.4946, 212.0314, 81.9343, 100.1345, 61.209,
  ],
  weeks: [
    0, 0, 0, 0, 0, 213, 0, 43, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 40, 0, 0, 0, 60, 0,
    0, 0, 0, 100, 0, 0, 0, 0, 0, 0, 65, 0, 0, 78, 0, 0, 90, 0, 0, 0, 12, 0, 0,
    43, 0, 0, 0, 0,
  ],
  minutes: [
    5613.5638, 4018.1524, 2782.8912, 2223.0685, 859.3159, 1092.8524, 6106.947,
    2236.1713, 811.9827, 1642.5207, 5930.5772, 2876.2958, 3231.4032, 3190.6772,
    2563.7517, 4262.5525, 4031.1007, 682.8778, 2327.1964, 2100.0363, 2425.7081,
    2369.4146, 3155.9515, 2829.6594, 918.8314, 3467.2555, 3559.1161, 1466.975,
    4802.0379, 1910.0191, 2593.348, 4772.5789, 2503.5062, 1633.5984, 1994.0311,
    5839.1324, 2152.2181, 902.1712, 1233.78, 1399.3437, 2307.5043, 3974.9305,
    942.2388, 4584.5575, 1802.5456, 4606.8556, 5108.2835, 1111.4571, 5088.5189,
    2394.1285, 4773.9491, 3483.375,
  ],
};

let myChart = new Chart('myChart', {
  type: "doughnut",
  data: {
    labels: Object.keys(data),
    datasets: [{
        label: "days",
        data: data.days,
        backgroundColor: "rgb(255, 99, 132)",
        hoverOffset: 4,
      },
      {
        label: "seconds",
        data: data.seconds,
        backgroundColor: "rgb(255, 206, 86)",
        hoverOffset: 4,
      },
      {
        label: "weeks",
        data: data.weeks,
        backgroundColor: "rgb(54, 162, 235)",
        hoverOffset: 4,
      },
      {
        label: "minutes",
        data: data.minutes,
        backgroundColor: "rgb(75, 192, 192)",
        hoverOffset: 4,
      },
    ],
  },
  options: {
    plugins: {
      legend: {
        labels: {
          generateLabels: chart => chart.data.labels.map((l, i) => ({
            datasetIndex: i,
            text: l,
            fillStyle: chart.data.datasets[i].backgroundColor,
            strokeStyle: chart.data.datasets[i].backgroundColor,
            hidden: chart.getDatasetMeta(i).hidden
          }))
        },
        onClick: (event, legendItem, legend) => {  myChart.getDatasetMeta(legendItem.datasetIndex).hidden = !legendItem.hidden;
          myChart.update();
        }
      },
      tooltip: {
        callbacks: {
          label: context => myChart.data.labels[context.datasetIndex] + ': ' + myChart.data.datasets[context.datasetIndex].data[context.dataIndex]
        }
      }
    }
  }
});

canvas {
  max-height: 300px;
}

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script>
<canvas id="myChart"></canvas>

【讨论】：