javascript - 在条形图顶部显示计数 - ChartJS

Question

在 Chart.js 中的选项对象中

我已经尝试过

plugins: {
    afterDatasetsDraw: function (context, easing) {
        var ctx = context.chart.ctx;
        context.data.datasets.forEach(function (dataset) {
            for (var i = 0; i < dataset.data.length; i++) {
                if (dataset.data[i] != 0) {
                    var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
                    var textY = model.y + (dataset.type == "line" ? -3 : 15);

                    ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
                    ctx.textAlign = 'start';
                    ctx.textBaseline = 'middle';
                    ctx.fillStyle = dataset.type == "line" ? "black" : "black";
                    ctx.save();
                    ctx.translate(model.x, textY-15);
                    ctx.rotate(4.7);
                    ctx.fillText(dataset.data[i], 0, 0);
                    ctx.restore();
                }
            }
        });
    }

}

我没有运气。

<小时/>

虽然我已经尝试过了，但它有效

animation: {
    duration: ,
    onComplete: function() {
        var chartInstance = this.chart,
        ctx = chartInstance.ctx;

        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        this.data.datasets.forEach(function(dataset, i) {
            var meta = chartInstance.controller.getDatasetMeta(i);
            meta.data.forEach(function(bar, index) {
                var data = dataset.data[index];
                ctx.fillText(data, bar._model.x, bar._model.y - 5);
            });
        });
    }
}

它似乎得到了我想要的东西，但是当我将鼠标悬停在它上面时，它会闪烁并且看起来非常有问题。

/image/Zz4NX.gif

你们知道更好的方法吗？

Answer 1

datalabels 插件提供的一个解决方案 - https://chartjs-plugin-datalabels.netlify.com/以及标签的选项:

• anchor:'end', ==>最高元素边界

• align: top ==> 标签位于 anchor 之后，方向相同

对于小的调整，更改填充、偏移(负或正)、字体大小等(大量控制)。 datalabels Options

“Hello world 示例”:

// Change default options for ALL charts
Chart.helpers.merge(Chart.defaults.global.plugins.datalabels, {
  formatter: function(value, context) {
    return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  },
  opacity: 1,
  color: 'black',
  borderColor: '#11469e', 
  anchor: 'end', /*https://chartjs-plugin-datalabels.netlify.com/guide/positioning.html */
  align: 'top', /* https://chartjs-plugin-datalabels.netlify.com/guide/positioning.html#alignment-and-offset */
  font: {
    weight: 'bold',
    size: 14,
    lineHeight: 1 /* align v center */
  },

  offset: 0, /* 4 by deafult */
  padding:{
    bottom: 0 /* 4 by deafult */
  }
});

var data = {
  labels: ["Africa", "Asia", "Europe", "America"],
  datasets: [{
    /* data */
    label: "Population (millions)",
    backgroundColor: ["#490A3D", "#BD1550","#E97F02", '#F8CA00'],
    data: [1000,1500,2000, 2200]
  }]
};

var options = {
  plugins: {
    // Change options for ALL labels of THIS CHART
    datalabels: {
    }
  },
  animation:{
    duration: 2000 /* time in ms */
  },
  scales: {
    xAxes: [{
      stacked: true
    }],
    yAxes: [{
      ticks: {
        // Include a dollar sign in the ticks
        callback: function(value, index, values) {
          return '$' + value;
        }
      },
      stacked: true
    }]
  }
};

var myChart = new Chart(document.getElementById("chart"), {
  type: 'bar',
  data: data,
  options: options
});

<canvas id="chart"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>

再一个示例(额外的悬停和样式): https://codepen.io/ezra_siton/pen/bGdYaLd

datalabels 是非常酷的库。例如，添加$并将1000更改为1,000以2行代码的数据。

formatter: function(value, context) {
 return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
},

相关:How to print a number with commas as thousands separators in JavaScript