javascript - 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);
                }
          });               
  }
}

我刚从这个网站得到代码，所以我不确定如何播放或修改它。据我所知，chart 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);
      });
    })

参数:

1. ctx - 包含行的变量 (var ctx = document.getElementById("myChart1").getContext("2d"))

2. data - 这是包含 label、value、x 和 的变量>y 图表中各个点的属性。

3. dataToSplit - 在将数据传入函数之前，我们可能会对数据进行一些字符串操作。我们可以将最终操作的字符串变量传递给此参数，这将转换为垂直标签。所以在我们上面的例子中，我们通过另一个名为 addCommas() 的函数传递了 bar 的值(它只不过是我们函数的数据参数)，它只会添加数字值中的分隔符，最后将其传递给主函数，主函数将此结果的输出显示为垂直数字。

4. topOffset - 此参数用于设置数字与点顶部的距离，这可以是任何数字，只要它是数字数据类型并且是整数!

5. spaceBetween - 此参数用于设置点值(data)的字符之间的距离，这可以是任何数字，只要它的数值数据类型及其整数!此参数不适用于 data 中的逗号。

6. commaGap - 这个参数用来设置逗号前的字符和实际逗号之间的距离，你可以认为是通过增加空格来增加逗号的易读性在逗号之前(例如 9，可以表示为 9 ，)，这可以是任何数字，只要它是数字数据类型并且它是一个整数!此参数不适用于 data 中的逗号。