Question

我正在尝试几天，而且对Chart.js来说真的很新。一切似乎都很清楚，但现在我想在每个酒吧的顶部贴一个标签。尝试这个我得到一个错误： this.scale未定义。我从网上得到了 animation.onComplete Snippet，但似乎我犯了一个错误。图表工作正常..我只是没有在酒吧顶部的标签。也许有人可以帮我解决这个问题？！我也有一个同样问题的折线图。

            var ctx = document.getElementById("chartA").getContext("2d");

            Chart.defaults.global.animation.duration = 2400;
            Chart.defaults.global.animation.easing = "easeInOutQuad";
            Chart.defaults.global.elements.point.radius = 4;
            Chart.defaults.global.elements.point.hoverRadius = 5;
            Chart.defaults.global.elements.point.hitRadius = 1;

            var chart = new Chart(ctx, {
                type: "bar",
                data: {
                    labels: ["A","B","C"],
                    datasets: [{
                        label: "Test",
                        backgroundColor: "rgba(255, 99, 132, 0.2)",
                        borderColor: "#CF2748",
                        borderWidth: 1,
                        data: [10,20,30]
                    }]
                },                  
                options: {
                    tooltips: { mode: 'nearest', intersect: false },
                    layout: { padding: { left: 20, right: 0, top: 0, bottom: 0 } },
                    legend: { display: true, position: 'top' },
                    scales: {
                        yAxes: [{
                            ticks: { maxTicksLimit: 9, stepSize: 300, callback: function(value, index, values) { return value+" €"; } }                             
                        }]
                    },
                    animation: {
                        onComplete: function () {
                            var ctx = this.chart.ctx; // this part doesn't work
                            ctx.font = this.scale.font;
                            ctx.fillStyle = this.scale.textColor;
                            ctx.textAlign = "center";
                            ctx.textBaseline = "bottom";

                            this.datasets.forEach(function (dataset) {
                                dataset.bars.forEach(function (bar) {
                                    ctx.fillText(bar.value, bar.x, bar.y - 5);
                                });
                            });
                        }
                    }
                }
            });

非常感谢你奥利弗

谢谢@Jeff我正在测试并靠近。

chart.data.datasets.forEach(function (dataset) {
    dataset.data.forEach(function (value) {
        ctx.fillText(value, x, y);
    });
});

现在我在“价值”中拥有正确的价值。但是我需要引用X和Y.我从哪里得到它们？如果我用静态值改变X和Y，它可以工作，但所有值都在逻辑上打印在同一个空间中。

Answer 1

您的代码存在一些问题。

您可以使用以下图表插件来完成相同的操作：

Chart.plugins.register({
   afterDatasetsDraw: function(chart) {
      var ctx = chart.ctx;
      chart.data.datasets.forEach(function(dataset, datasetIndex) {
         var datasetMeta = chart.getDatasetMeta(datasetIndex);
         datasetMeta.data.forEach(function(meta) {
            var posX = meta._model.x;
            var posY = meta._model.y;
            var value = chart.data.datasets[meta._datasetIndex].data[meta._index];
            // draw values
            ctx.save();
            ctx.textBaseline = 'bottom';
            ctx.textAlign = 'center';
            ctx.font = '16px Arial';
            ctx.fillStyle = 'black';
            ctx.fillText(value, posX, posY);
            ctx.restore();
         });
      });
   }
});

^{在脚本开头添加此插件。}

ᴡᴏʀᴋɪɴɢᴡᴏʀᴋɪɴɢxᴀᴍᴘʟᴇᴀᴍᴘʟᴇ

Chart.plugins.register({
   afterDatasetsDraw: function(chart) {
      var ctx = chart.ctx;
      chart.data.datasets.forEach(function(dataset, datasetIndex) {
         var datasetMeta = chart.getDatasetMeta(datasetIndex);
         datasetMeta.data.forEach(function(meta) {
            var posX = meta._model.x;
            var posY = meta._model.y;
            var value = chart.data.datasets[meta._datasetIndex].data[meta._index];
            // draw values
            ctx.save();
            ctx.textBaseline = 'bottom';
            ctx.textAlign = 'center';
            ctx.font = '16px Arial';
            ctx.fillStyle = 'black';
            ctx.fillText(value, posX, posY);
            ctx.restore();
         });
      });
   }
});

var ctx = document.getElementById("chartA").getContext("2d");

Chart.defaults.global.animation.duration = 2400;
Chart.defaults.global.animation.easing = "easeInOutQuad";
Chart.defaults.global.elements.point.radius = 4;
Chart.defaults.global.elements.point.hoverRadius = 5;
Chart.defaults.global.elements.point.hitRadius = 1;

var chart = new Chart(ctx, {
   type: "bar",
   data: {
      labels: ["A", "B", "C"],
      datasets: [{
         label: "Test",
         backgroundColor: "rgba(255, 99, 132, 0.2)",
         borderColor: "#CF2748",
         borderWidth: 1,
         data: [10, 20, 30]
      }]
   },
   options: {
      tooltips: {
         mode: 'nearest',
         intersect: false
      },
      layout: {
         padding: {
            left: 20,
            right: 0,
            top: 0,
            bottom: 0
         }
      },
      legend: {
         display: true,
         position: 'top'
      },
      scales: {
         yAxes: [{
            ticks: {
               maxTicksLimit: 9,
               stepSize: 300,
               callback: function(value, index, values) {
                  return value + " €";
               }
            }
         }]
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="chartA"></canvas>

Chart.JS错误：this.scale未定义

1 个答案: