Chart.js: контроллер для точечной диаграммы не работает для функции рисования

Question

Chart.js: контроллер для точечной диаграммы не работает для функции рисования

1

Следуя этой ссылке, вы можете расширить тип 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, но я не вижу. Нет данных, найденных в виде текста в центре диаграммы. Кажется, это не работает.

Посмотрите на это, и это ответы, чтобы найти это решение.

Примечание. Здесь он не говорит, что у них есть встроенный тип для Scatter. Это причина?

Будет оценен любой другой подход или любая другая помощь.

Chirag Sejpal 12 сен. 2017, в 00:00

Источник

Теги:

javascript

chart.js

charts

chartjs-2.6.0

1 ответ

Ещё вопросы

ɢʀᴜɴᴛ · Accepted Answer · 2017-09-11T19-30-00.000Z

Причина, почему это не работает, потому что, вы не инициализированы 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>