javascript - Chart.js:散点图的 Controller 不适用于绘制功能

在此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的内置类型。那是原因吗？

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

最佳答案

它不起作用的原因是，您尚未初始化图表的data属性。为了使用扩展的数据集控制器，在构造图表时必须初始化/设置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>

关于javascript - Chart.js:散点图的 Controller 不适用于绘制功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46164603/