关注此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 轴刻度,但我没有在图表中央看到文本形式的未找到数据。好像不行。
备注:Here它并没有说他们有一个内置的 Scatter 类型。是这个原因吗?
任何其他方法或任何其他帮助将不胜感激。
最佳答案
它 不工作的原因是,您还没有初始化图表的 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>
关于javascript - 图表.js : Controller for Scatter chart doesn't work for draw function,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46164603/