如何解决Chartjs 图表只有一个轴
Chartjs 一种没有网格、轴和刻度标签的折线图。
我想绘制类似上面的图表。
我不想要轴标签、刻度标签和网格线,只有一条线会随着数据(X 值)添加到图表而在右侧进行。我想在添加到图表的点上显示标签。我们可以在图表中只有一个轴 (X) 吗?
我确实尝试过:
https://jsfiddle.net/Lxya0u98/2/
我的数据集如下:
{
data: [{x:1,y:0},{x:2,{x:3,y:0}],showLine: true,borderWidth: 1.5,borderColor: "blue",pointBackgroundColor: "blue",pointBorderColor: "blue",poinTradius: 5,}
解决方法
如果您在两个轴上同时定义选项 ticks.display: false
和 gridLines.display: false
,它应该可以正常工作。
请看下面的示例代码,看看它是如何工作的。
new Chart('line-chart',{
type: "line",data: {
labels: [1,2,3,4,5,6,7],datasets: [{
data: [0,0],backgroundColor: "#0168FF",borderColor: "#0168FF",pointBackgroundColor: "white",pointBorderWidth: 1,lineTension: 0,pointBorderColor: "blue",pointRadius: 4,pointHoverRadius: 4,}],},options: {
plugins: {
datalabels: {
align: 'top',formatter: function(value,context) {
return context.dataIndex + 1;
}
}
},layout: {
padding: {
right: 10
}
},legend: {
display: false
},tooltips: {
enabled: false
},scales: {
yAxes: [{
ticks: {
display: false
},gridLines: {
display: false,}
}],xAxes: [{
ticks: {
display: false
},gridLines: {
display: false
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<canvas id="line-chart" height="30"></canvas>
根据 User7723337 的评论,插件 chartjs-plugin-datalabels
不适用于 Chart.js 版本 3.0.0-beta.7。
作为替代方案,您可以使用 Plugin Core API 直接在 canvas
上绘制数据标签。 API 提供了许多可用于执行自定义代码的钩子。在您的情况下,您可以将 afterDraw
钩子与 CanvasRenderingContext2D
一起使用。
请注意,我将 Plugin Core API 与 Chart.js v2.x 文档联系起来,因为我找不到 v3.x 的相应部分。显然,这仍然适用于 v3.x。
请看下面使用 Chart.js 版本 3.0.0-beta.7 的代码。
new Chart('line-chart',plugins: [{
afterDraw: chart => {
var ctx = chart.ctx;
ctx.save();
var xAxis = chart.scales['x'];
var yAxis = chart.scales['y'];
chart.data.labels.forEach((l,i) => {
var x = xAxis.getPixelForTick(i);
var y = yAxis.getPixelForValue(0);
ctx.textAlign = 'center';
ctx.font = '12px Arial';
ctx.fillText(l,x,y - 14);
});
ctx.restore();
}
}],options: {
layout: {
padding: {
left: 10,right: 10
}
},plugins: {
legend: {
display: false
},tooltip: {
enabled: false
}
},scales: {
y: {
display: false,x: {
display: false,}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta.7/chart.min.js"></script>
<canvas id="line-chart" height="30"></canvas>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。