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/