Javascript 使用chartJS显示带有连接点的折线图
我想用ChartJS画一张这样的图表。但我无法找到连接第一个点和最后一个点并在连接区域内显示单个唯一点的解决方案。我还需要用不同的颜色来设计每个点的样式。我试图浏览ChartJS文档,但找不到解决方案。是否有任何图表绘图库具有这些功能,或者如何使用ChartJS实现这些功能 您可以创建一个代替 以下是:Javascript 使用chartJS显示带有连接点的折线图,javascript,charts,google-visualization,chart.js,Javascript,Charts,Google Visualization,Chart.js,我想用ChartJS画一张这样的图表。但我无法找到连接第一个点和最后一个点并在连接区域内显示单个唯一点的解决方案。我还需要用不同的颜色来设计每个点的样式。我试图浏览ChartJS文档,但找不到解决方案。是否有任何图表绘图库具有这些功能,或者如何使用ChartJS实现这些功能 您可以创建一个代替 以下是:(尝试复制给定的映像amap) var图表=新图表(ctx{ 键入:“散布”, 数据:{ 数据集:[{ 数据:[{ x:1, y:1 }, { x:3, y:7 }, { x:6, y:5 },
(尝试复制给定的映像amap)
var图表=新图表(ctx{
键入:“散布”,
数据:{
数据集:[{
数据:[{
x:1,
y:1
}, {
x:3,
y:7
}, {
x:6,
y:5
},{//添加与第一个相同的数据,以绘制结束线
x:1,
y:1
}],
边框颜色:“黑色”,
边框宽度:1,
pointBackgroundColor:['#000'、'#00bcd6'、'#d300d6'],
pointBorderColor:['#000'、'#00bcd6'、'#d300d6'],
点半径:5,
点半径:5,
填充:假,
张力:0,
秀行:没错
}, {
数据:[{
x:3.5,
y:4.5
}],
pointBackgroundColor:'橙色',
pointBorderColor:“darkorange”,
点半径:10,
点半径:10
}]
},
选项:{
传说:错,
工具提示:false,
比例:{
xAxes:[{
滴答声:{
分:0,,
最多:10
},
网格线:{
颜色:“#888”,
drawOnChartArea:假
}
}],
雅克斯:[{
滴答声:{
分:0,,
最高:8,
填充:10
},
网格线:{
颜色:“#888”,
drawOnChartArea:假
}
}]
}
}
});代码>
可以使用chart.js完成。。不需要其他图表绘图库。@6100ʀᴜɴᴛ,谢谢你能告诉我怎么做吗。我尝试了chartjs,但没有成功。这确实帮助我找到了一个我正在尝试创建的图表!感谢Grunt这么好的回答-从官方文档中不清楚是否可以在chartjs+1中为showLine:true
选项执行此操作,在chart.js的旧版本中不需要它,但在更新之后是必要的。