javascript - 图表.js : Controller for Scatter chart doesn't work for draw function

Question

关注此link使用 draw() 函数扩展 Scatter 类型以在中心打印“未找到数据”，但使用 Y 轴刻度。

代码如下:

Chart.defaults.derivedScatter = Chart.defaults.scatter;

var ctx = canvas.getContext("2d");

var custom = Chart.controllers.scatter.extend({
    draw: function() {
        Chart.controllers.scatter.prototype.draw.call(this);

        this.chart.chart.ctx.textAlign = "center";
        this.chart.chart.ctx.font = "11px Arial";
        this.chart.chart.ctx.fillText("No data found", 45, 100);
    }
});

Chart.controllers.derivedScatter = custom;

chart = new Chart(ctx, {
    type: "derivedScatter",
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true,
                    max:0.10,
                    stepSize:0.001,
                    callback: function(label, index, labels) {
                        var n = parseFloat(label);
                        return (Math.round(n*1000)/10).toFixed(1);
                    }
                },
                gridLines: {
                    display: false,
                    drawBorder: false
                }
            }],
            xAxes: [{
                display: false,
                gridLines: {
                   display: false
                }
            }]
        },
        legend: {
            display:false
        },
        responsive: false
    }
});

我正在获取 Y 轴刻度，但我没有在图表中央看到文本形式的未找到数据。好像不行。

看了this和 this提出这个解决方案的堆栈溢出答案。

备注:Here它并没有说他们有一个内置的 Scatter 类型。是这个原因吗？

任何其他方法或任何其他帮助将不胜感激。

Answer 1

它 不工作的原因是，您还没有初始化图表的 data 属性。为了使用扩展数据集 Controller ，您必须在构建图表时初始化/设置 data.datasets 属性，如下所示:

...
chart = new Chart(ctx, {
   type: "derivedScatter",
   data: {
      datasets: [{}]
   },
   options: {
...

注意:重要的部分是初始化 datasets 属性，它不一定必须包含任何数据。

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

var ctx = canvas.getContext("2d");

Chart.defaults.derivedScatter = Chart.defaults.scatter;

var custom = Chart.controllers.scatter.extend({
   draw: function() {
      Chart.controllers.scatter.prototype.draw.call(this);

      this.chart.chart.ctx.textAlign = "center";
      this.chart.chart.ctx.font = "11px Arial";
      this.chart.chart.ctx.fillText("No data found", 80, 80);
   }
});

Chart.controllers.derivedScatter = custom;

chart = new Chart(ctx, {
   type: "derivedScatter",
   data: {
      datasets: [{}]
   },
   options: {
      scales: {
         yAxes: [{
            ticks: {
               beginAtZero: true,
               max: 0.10,
               stepSize: 0.001,
               callback: function(label, index, labels) {
                  var n = parseFloat(label);
                  return (Math.round(n * 1000) / 10).toFixed(1);
               }
            },
            gridLines: {
               display: false,
               drawBorder: false
            }
         }],
         xAxes: [{
            display: false,
            gridLines: {
               display: false
            }
         }]
      },
      legend: {
         display: false
      },
      responsive: false
   }
});

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