使用chartJS显示连接点的折线图js
问题描述：
我想用ChartJS绘制这样的图表。但是我找不到连接第一个和最后一个点并在连接区域内显示单个唯一点的解决方案。而且我需要用不同的颜色来设计每个点。我试图探索ChartJS文档，但找不到解决方案。是否有任何图表绘图库具有这些功能或如何使用ChartJS来完成此功能？使用chartJS显示连接点的折线图js
答
您可以创建一个scatter chart代替line。
这里是一个example：
（试图复制你给定的图像AMAP）
var chart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
data: [{
x: 1,
y: 1
}, {
x: 3,
y: 7
}, {
x: 6,
y: 5
}, { // add same data as the first one, to draw the closing line
x: 1,
y: 1
}],
borderColor: 'black',
borderWidth: 1,
pointBackgroundColor: ['#000', '#00bcd6', '#d300d6'],
pointBorderColor: ['#000', '#00bcd6', '#d300d6'],
pointRadius: 5,
pointHoverRadius: 5,
fill: false,
tension: 0,
showLine: true
}, {
data: [{
x: 3.5,
y: 4.5
}],
pointBackgroundColor: 'orange',
pointBorderColor: 'darkorange',
pointRadius: 10,
pointHoverRadius: 10
}]
},
options: {
legend: false,
tooltips: false,
scales: {
xAxes: [{
ticks: {
min: 0,
max: 10
},
gridLines: {
color: '#888',
drawOnChartArea: false
}
}],
yAxes: [{
ticks: {
min: 0,
max: 8,
padding: 10
},
gridLines: {
color: '#888',
drawOnChartArea: false
}
}]
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>注：这只是一个例子，你可以自定义进一步满足您的需求，继official documentation。
可以使用chart.js ..不需要其他图表绘图库.. –
@ɢʀᴜɴᴛ，谢谢。你能告诉我该怎么做。我试图用chartjs，但没有成功。 – Randika