ChartJS水平图表在每个栏上显示图例

Question

我是ChartJS的新手，我有一个水平条形图：

HTML

<canvas id="mybarChart"></canvas>

JavaScript：

var ctx = document.getElementById("mybarChart");

    ctx.height = 300;

    var mybarChart = new Chart(ctx, {
        type: 'horizontalBar',
        responsive: true,
        data: data,
        options: {
            legend: {
                display: false
            },
            scales: {
                yAxes: [{
                    display: false,
                    ticks: {
                        beginAtZero: true
                    },
                    gridLines: {
                        color: "rgba(0, 0, 0, 0)",
                    }
                }],
                xAxes: [{
                    display: false,
                    gridLines: {
                        color: "rgba(0, 0, 0, 0)",
                    },
                    barPercentage: 0.5,
                    categoryPercentage: 0.5
                }]
            }
        }
    });

我试着加上

onAnimationComplete: function () {

            var ctx = this.chart.ctx;
            ctx.font = this.scale.font;
            ctx.fillStyle = this.scale.textColor
            ctx.textAlign = "center";
            ctx.textBaseline = "bottom";

            this.datasets.forEach(function (dataset) {
                dataset.points.forEach(function (points) {
                    ctx.fillText(points.value, points.x, points.y - 10);
                });
            })
        }

但结果还是一样。我做错了什么？我在这里发现了一些东西，但是每个条上显示的标签是Y轴的刻度。是否可以在每个栏上添加图例并保留工具提示？

提前感谢！

Answer 1

实际上有几种方法可以实现这一点。为了简单起见，我将修改您提供的示例。

请记住，这会将标签放在条内。您可以很容易地修改它以将其放置在外部，但您必须添加逻辑以确保不会溢出到图表顶部或其他条形图中（不是非常简单的逻辑）。

此外，这种方法要求您为每个数据集配置一个标签（无论如何，驱动常规图例都需要这个标签）。

只要把它放在你的animation.on完成属性中。

function() {
  var ctx = this.chart.ctx;
  ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
  ctx.textAlign = 'left';
  ctx.textBaseline = 'bottom';

  this.data.datasets.forEach(function(dataset) {
    for (var i = 0; i < dataset.data.length; i++) {
      var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
          scale_max = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
      left = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._xScale.left;
      offset = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._xScale.longestLabelWidth;
      ctx.fillStyle = '#444';
      var y_pos = model.y - 5;
      var label = model.label;
      // Make sure data value does not get overflown and hidden
      // when the bar's value is too close to max value of scale
      // Note: The y value is reverse, it counts from top down
      if ((scale_max - model.y) / scale_max >= 0.93)
        y_pos = model.y + 20;
      // ctx.fillText(dataset.data[i], model.x, y_pos);

      if (dataset.data[i] > 0) {
        ctx.fillText(dataset.label, left + 10, model.y + 8);
      }
    }
  });
}

下面是一个jsfiddle示例（从您提供的示例中分叉）。