Chart.js 2 - 如何将数据集值垂直插入条形图中？

Question

我想将数据集值垂直插入到相应的条形图中。我应该怎么办？示例代码将不胜感激。

代码的当前部分

animation: {
  duration: 500,
  easing: "easeOutQuart",
  onComplete: function () {
    var ctx = this.chart.ctx;
    ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';

    this.data.datasets.filter(dataset => !dataset._meta[Object.keys(dataset._meta)[0]].hidden).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;
        ctx.fillStyle = '#000';
        var y_pos = model.y - 5;
                  // 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.70)
                    y_pos = model.y + 20; 
                  ctx.fillText(addCommas(dataset.data[i]), model.x, y_pos);
                }
          });               
  }
}

我刚从这个网站得到代码，所以我不确定如何播放或修改它。据我所知，这种功能在图表js的文档中没有讨论。

预期输出

如果值为 35,400，则应为： 3个 5、 4个 0 0（垂直）

Answer 1

完成需求后，我编写了这个用于创建垂直标签的通用函数，这里是一个实际的垂直标签功能演示。

JSFiddle Demo

下面详细介绍垂直标签功能的参数详情。

function verticalLabel(ctx, data, dataToSplit, topOffset, spaceBetween, commaGap) {
  var i = 0, prev = 0;
  for (x of dataToSplit.toString().split("").reverse()) {
    if (x.indexOf(",") > -1) {
      ctx.fillText(x, data.x + commaGap, prev - topOffset);
    } else {
      ctx.fillText(x, data.x, data.y - spaceBetween * i - topOffset);
      i++;
    }
    var prev = data.y - spaceBetween * i;
  }
}

调用函数：

    this.datasets.forEach(function(dataset) {
      dataset.points.forEach(function(points) {
        console.log(points);
        verticalLabel(ctx, points, addCommas(points.value), 30, 10, 4);
      });
    })

参数：

ctx - 包含行 (var ctx = document.getElementById("myChart1").getContext("2d"))
data - 这是包含各个点的 label、value、x 和 y 属性的变量在图表中。
dataToSplit - 在将数据传递给函数之前，我们可能会对数据进行一些字符串操作。我们可以将最终操作的字符串变量传递给此参数，这将转换为垂直标签。所以在我们上面的例子中，我们通过另一个名为 addCommas() 的函数传递 bar 的值（它只是我们函数的数据参数），它只是将数字分隔符添加到值中，最后这是传递给主函数，它将此结果的输出显示为垂直数字。
topOffset - 此参数用于设置数字与点顶部的距离，这可以是任何数字，只要它是数字数据类型并且是整数！
spaceBetween - 此参数用于设置点值（data）的字符之间的距离，这可以是任何数字，只要它的数字数据类型和它是一个整数！此参数不适用于data.
commaGap - 该参数用于设置逗号前的字符与实际逗号之间的距离，可以认为是通过增加space 在逗号 (E.g 9, can be represented as 9 ,) 之前，这可以是任何数字，只要它是数字数据类型并且它是一个整数！此参数不适用于data.

Chart.js 2 - 如何将数据集值垂直插入条形图中？

Chart.js 2 - How will I vertically insert the dataset values inside the bar graph?

javascript

chart.js2