Javascript 只有一个轴的图表

Chartjs不带网格、轴和记号标签的单线图

我想画上面的图表

我不想要轴标签、勾号标签和网格线，只有一条线会随着数据（X值）添加到图表中而在右侧前进。我想在添加到图表的点上显示标签。图表中只能有一个轴（X）吗

我确实尝试了以下内容：

我的数据集如下：

{
  data: [{x:1, y:0}, {x:2, y:0}, {x:3, y:0}],
  showLine: true,  
  borderWidth: 1.5,
  borderColor: "blue",
  pointBackgroundColor: "blue",
  pointBorderColor: "blue",
  pointRadius: 5,
}

---

如果在两个轴上同时定义选项

ticks.display:false

和

gridLines.display:false

，它应该可以正常工作

请看下面的示例代码，看看它是如何工作的

新图表（“折线图”{
键入：“行”，
数据：{
标签：[1,2,3,4,5,6,7]，
数据集：[{
数据：[0,0,0,0,0,0,0,0,0]，
背景色：“0168FF”，
边框颜色：“0168FF”，
pointBackgroundColor:“白色”，
点边界宽度：1，
线张力：0，
pointBorderColor:“蓝色”，
点半径：4，
点半径：4，
}],
},
选项：{
插件：{
数据标签：{
对齐：“顶部”，
格式化程序：函数（值、上下文）{
返回context.dataIndex+1；
}
}
},
布局：{
填充：{
右：10
}
},
图例：{
显示：假
},
工具提示：{
已启用：false
},
比例：{
雅克斯：[{
滴答声：{
显示：假
},
网格线：{
显示：假，
}
}],
xAxes：[{
滴答声：{
显示：假
},
网格线：{
显示：假
}
}]
}
}
});
如果在两个轴上定义选项
ticks.display:false
和
gridLines.display:false
，它应该可以正常工作

请看下面的示例代码，看看它是如何工作的


新图表（“折线图”{
键入：“行”，
数据：{
标签：[1,2,3,4,5,6,7]，
数据集：[{
数据：[0,0,0,0,0,0,0,0,0]，
背景色：“0168FF”，
边框颜色：“0168FF”，
pointBackgroundColor:“白色”，
点边界宽度：1，
线张力：0，
pointBorderColor:“蓝色”，
点半径：4，
点半径：4，
}],
},
选项：{
插件：{
数据标签：{
对齐：“顶部”，
格式化程序：函数（值、上下文）{
返回context.dataIndex+1；
}
}
},
布局：{
填充：{
右：10
}
},
图例：{
显示：假
},
工具提示：{
已启用：false
},
比例：{
雅克斯：[{
滴答声：{
显示：假
},
网格线：{
显示：假，
}
}],
xAxes：[{
滴答声：{
显示：假
},
网格线：{
显示：假
}
}]
}
}
});
根据来自的评论，插件
chartjs插件数据标签
不适用于Chart.js版本3.0.0-beta.7

或者，您可以使用直接在
画布上绘制数据标签。API提供了许多钩子，可用于执行自定义代码。在您的情况下，您可以将
afterDraw
挂钩与一起使用

注意，我链接了Chart.js v2.x文档，因为我找不到v3.x对应的部分。显然，这仍然适用于v3.x

请看下面使用Chart.js版本3.0.0-beta.7的代码


新图表（“折线图”{
键入：“行”，
插件：[{
后置绘图：图表=>{
var ctx=chart.ctx；
ctx.save（）；
var xAxis=图表刻度['x']；
var yAxis=图表刻度['y']；
图表.数据.标签.forEach（（l，i）=>{
var x=xAxis.getPixelForTick（i）；
变量y=yAxis.getPixelForValue（0）；
ctx.textAlign='中心'；
ctx.font='12px Arial'；
ctx.fillText（l，x，y-14）；
});
ctx.restore（）；
}
}],
数据：{
标签：[1,2,3,4,5,6,7]，
数据集：[{
数据：[0,0,0,0,0,0,0,0,0]，
背景色：“0168FF”，
边框颜色：“0168FF”，
pointBackgroundColor:“白色”，
点边界宽度：1，
线张力：0，
pointBorderColor:“蓝色”，
点半径：4，
点半径：4，
}],
},
选项：{
布局：{
填充：{
左:10,，
右：10
}
},
插件：{
图例：{
显示：假
},
工具提示：{
已启用：false
}
},    
比例：{
y:{
显示：假，
},
x:{
显示：假，
}
}
}
});
根据来自的评论，插件
chartjs插件数据标签
不适用于Chart.js版本3.0.0-beta.7

或者，您可以使用直接在
画布上绘制数据标签。API提供了许多钩子，可用于执行自定义代码。在您的情况下，您可以将
afterDraw
挂钩与一起使用

注意，我链接了Chart.js v2.x文档，因为我找不到v3.x对应的部分。显然，这仍然适用于v3.x

请看下面使用Chart.js版本3.0.0-beta.7的代码


新图表（“折线图”{
键入：“行”，
插件：[{
后置绘图：图表=>{
var ctx=chart.ctx；
ctx.save（）；
var xAxis=图表刻度['x']；
var yAxis=图表刻度['y']；
图表.数据.标签.forEach（（l，i）=>{
var x=xAxis.getPixelForTick（i）；
变量y=yAxis.getPixelForValue（0）；
ctx.textAlign='中心'；
ctx.font='12px Arial'；
ctx.fillText（l，x，y-14）；
});
ctx.restore（）；
}
}]