Chart.js-如何添加图例？

Question

我有以下代码来使用chart.js生成条形图。 现在我希望每个栏都有一个图例。

1 = CP，2 = AA，...

我怎样才能做到这一点 ？

$(document).ready(function() {
  initData();
});

function initData() {
  loadChartVorselektion();
}

function loadChartVorselektion() {
  var randomScalingFactor = function() {
    return Math.round(Math.random() * 70)
  };

  var orders = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];

  var barChartData = {
    labels: orders,

    datasets: [{
      label: "Order",
      fillColor: "rgba(0, 62, 76,0.8)",
      highlightFill: "rgba(151,187,205,0.75)",
      data: [6, randomScalingFactor(), randomScalingFactor(),
        randomScalingFactor(), randomScalingFactor(),
        randomScalingFactor(), randomScalingFactor(),
        randomScalingFactor(), 5, 6
      ]
    }]

  }

  window.onload = function() {
    var ctx = document.getElementById("canvas").getContext("2d");

    Chart.types.Bar.extend({
      name: "BarAlt",
      initialize: function(data) {
        Chart.types.Bar.prototype.initialize.apply(this, arguments);
      },
      draw: function() {
        Chart.types.Bar.prototype.draw.apply(this, arguments);
        this.chart.ctx.beginPath();
        this.chart.ctx.beginPath();
        this.chart.ctx.moveTo(25, 50);
        this.chart.ctx.lineTo(1000, 50);
      }
    });

    var chart = new Chart(ctx).BarAlt(barChartData, {

      responsive: true,
      animation: true,
      barValueSpacing: 5,
      barDatasetSpacing: 1,
      tooltipFillColor: "rgba(0,0,0,0.8)",
      // multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"
      tooltipTemplate: function(valuesObject) {
        console.log(valuesObject);

        var label = valuesObject.label
        var objLen = label.length;
        var string = label.substring(0, objLen);

        console.log(string);
        return "Dummy: " + string;
      },

    });
  }
}

我得到的是：

如您所见，仅显示条形图和每个条形图下的数字。 那我该怎么做，才能得到一个传奇？

Answer 1

我不确定“每个小节的传说”是什么意思，但我想您要执行的操作是将数字替换为文本。

您可以有一个保存键值对的对象，以便每个数字实际上对应一个单词。

然后，您必须使用逻辑将自定义标签指定为将数字解析为其单词的逻辑。

您可以使用ChartJS中的刻度和刻度

这是您的键值对对象：

var xLabels = {
    1 : 'HELLO',
    2 : 'THERE',
    3 : 'MY',
    4 : 'FRIEND'
}

这就是选项的外观：

 options: {
   scales: {
     xAxes: [{
       ticks: {
         callback: function (value, index, values) {
           return xLabels[value];
         }
       }
     }]
   }
 }

这是一个小提琴示例：

https://jsfiddle.net/7dxp2qzo/