ChartJSを使用してこのようなグラフを描画します。しかし、私は最初と最後のドットを接続するための解決策を見つけることができず、その接続された領域内に単一の一意のドットを表示することができませんでした。また、私はそれぞれのドットを異なる色でスタイルする必要があります。 ChartJSのドキュメントを調べてみましたが、解決策が見つかりませんでした。これらの機能を持つチャート描画ライブラリはありますか、ChartJSでこれを行う方法はありますか？chartJSを使用して接続ドット付き線グラフを表示
代わりlineのscatter chartを作成することができます。ここで
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