如何使用 Chart.js 在水平堆积条形图中添加标签

我想添加标签内的一个水平条形图中的每个堆栈的数据。

似乎该mirror选项不适用于水平条形图，并且关于 SO 的类似问题也不起作用（Chart.js - 在水平条内书写标签？）。

您可以运行下面的示例代码段：

const ctx = document.querySelector("canvas").getContext('2d');
var chart = getChart();
new Chart(ctx, chart);

function getChart() {
  return {
    "type": "horizontalBar",
    "data": {
      "datasets": [{
          "label": "label 1",
          "data": [
            24
          ],
          "fill": false,
          "backgroundColor": "rgba(255, 82, 82, 0.2)",
          "borderColor": "rgb(255,255,255)",
          "hoverBorderColor": "rgb(255,255,255)",
          "borderWidth": 1
        },
        {
          "label": "label 2",
          "data": [
            12
          ],
          "fill": false,
          "backgroundColor": "rgba(224, 64, 251, 0.2)",
          "borderColor": "rgb(255,255,255)",
          "hoverBorderColor": "rgb(255,255,255)",
          "borderWidth": 1
        },
        {
          "label": "label 3",
          "data": [
            12
          ],
          "fill": false,
          "backgroundColor": "rgba(41, 121, 255, 0.2)",
          "borderColor": "rgb(255,255,255)",
          "hoverBorderColor": "rgb(255,255,255)",
          "borderWidth": 1
        },
        {
          "label": "label 4",
          "data": [
            35
          ],
          "fill": false,
          "backgroundColor": "rgba(0, 230, 118, 0.2)",
          "borderColor": "rgb(255,255,255)",
          "hoverBorderColor": "rgb(255,255,255)",
          "borderWidth": 1
        },
        {
          "label": "label 5",
          "data": [
            5
          ],
          "fill": false,
          "backgroundColor": "rgba(255, 196, 0, 0.2)",
          "borderColor": "rgb(255,255,255)",
          "hoverBorderColor": "rgb(255,255,255)",
          "borderWidth": 1
        }
      ]
    },
    "options": {
      "maintainAspectRatio": false,
      "responsive": true,
      "legend": {
        "display": false
      },
      "tooltips": {
        "enabled": true,
        "mode": "single"
      },
      "scales": {
        "xAxes": [{
          "display": false,
          "stacked": true
        }],
        "yAxes": [{
          "display": false,
          "stacked": true
        }]
      }
    }
  };
}

Run Code Online (Sandbox Code Playgroud)

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
</head>

<body>
  <canvas id="chart"></canvas>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，1 月前
查看次数：	391 次
最近记录：	7 年，1 月前