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

Question

我正在尝试在水平条形图中的每个堆叠数据的内部添加标签 。

似乎RankID ASXCode DateValue High Low Close TR1 TR2 TR3 TR ATR14a ATR14b ATR14c 1 A2M 2016-09-21 1.810 1.765 1.780 0.045 NULL NULL 0.045 NULL NULL NULL 2 A2M 2016-09-22 1.800 1.772 1.795 0.028 0.020 0.008 0.028 NULL NULL NULL 3 A2M 2016-09-23 1.805 1.775 1.780 0.030 0.010 0.020 0.030 NULL NULL NULL 4 A2M 2016-09-26 1.785 1.755 1.765 0.030 0.005 0.025 0.030 NULL NULL NULL 5 A2M 2016-09-27 1.755 1.730 1.735 0.025 0.010 0.035 0.035 NULL NULL NULL 6 A2M 2016-09-28 1.750 1.715 1.730 0.035 0.015 0.020 0.035 NULL NULL NULL 7 A2M 2016-09-29 1.750 1.720 1.730 0.030 0.020 0.010 0.030 NULL NULL NULL 8 A2M 2016-09-30 1.735 1.715 1.725 0.020 0.005 0.015 0.020 NULL NULL NULL 9 A2M 2016-10-03 1.760 1.730 1.750 0.030 0.035 0.005 0.035 NULL NULL NULL 10 A2M 2016-10-04 1.800 1.742 1.790 0.058 0.050 0.008 0.058 NULL NULL NULL 11 A2M 2016-10-05 1.800 1.770 1.790 0.030 0.010 0.020 0.030 NULL NULL NULL 12 A2M 2016-10-06 1.850 1.790 1.845 0.060 0.060 0.000 0.060 NULL NULL NULL 13 A2M 2016-10-07 1.850 1.810 1.820 0.040 0.005 0.035 0.040 NULL NULL NULL 14 A2M 2016-10-10 1.832 1.775 1.800 0.057 0.012 0.045 0.057 0.038071 NULL NULL 15 A2M 2016-10-11 1.810 1.785 1.800 0.025 0.010 0.015 0.025 NULL 0.037137 NULL 16 A2M 2016-10-12 1.805 1.765 1.800 0.040 0.005 0.035 0.040 NULL NULL 0.037341 17 A2M 2016-10-13 1.805 1.755 1.800 0.050 0.005 0.045 0.050 NULL NULL NULL 18 A2M 2016-10-14 1.830 1.790 1.800 0.040 0.030 0.010 0.040 NULL NULL NULL 19 A2M 2016-10-17 1.870 1.790 1.865 0.080 0.070 0.010 0.080 NULL NULL NULL 20 A2M 2016-10-18 1.875 1.835 1.840 0.040 0.010 0.030 0.040 NULL NULL NULL 21 A2M 2016-10-19 1.920 1.855 1.920 0.065 0.080 0.015 0.080 NULL NULL NULL 22 A2M 2016-10-20 1.930 1.885 1.920 0.045 0.010 0.035 0.045 NULL NULL NULL 23 A2M 2016-10-21 1.960 1.905 1.955 0.055 0.040 0.015 0.055 NULL NULL NULL 24 A2M 2016-10-24 2.010 1.955 2.000 0.055 0.055 0.000 0.055 NULL NULL NULL 25 A2M 2016-10-25 2.000 1.890 1.950 0.110 0.000 0.110 0.110 NULL NULL NULL 选项对水平条形图不起作用，关于SO的类似问题也不起作用（Chart.js - Writing Labels Inside of Horizontal Bars?）。

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

mirror

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
        }]
      }
    }
  };
}