Chart.js：散点图控制器不适用于绘图功能答案

【问题标题】：Chart.js : Controller for Scatter chart doesn't work for draw functionChart.js：散点图控制器不适用于绘图功能
【发布时间】：2017-09-11 21:26:29
【问题描述】：

按照link 扩展 Scatter 类型，使用 draw() 函数在中心打印“未找到数据”，但使用 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 轴刻度，但我没有在图表的中心看到 No data found 作为文本。它似乎不起作用。

查看了this 和this stack-overflow 的答案以提出这个解决方案。

注意：Here 并没有说他们有 Scatter 的内置类型。是这个原因吗？

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

【问题讨论】：

标签： javascript charts chart.js chartjs-2.6.0

【解决方案1】：

它不起作用的原因是，您还没有初始化图表的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>

【讨论】：