主页
JavaScript
Chart.js
trychartjs_scatter
运行 ❯
×
更改方向
保存代码
更改主题
<!DOCTYPE html> <html> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.0"></script> <body> <canvas id="myChart" style="width:100%;max-width:700px"></canvas> <script> const xyValues = [ {x:50, y:7}, {x:60, y:8}, {x:70, y:8}, {x:80, y:9}, {x:90, y:9}, {x:100, y:9}, {x:110, y:10}, {x:120, y:11}, {x:130, y:14}, {x:140, y:14}, {x:150, y:15} ]; const ctx = document.getElementById('myChart'); new Chart(ctx, { type: "scatter", data: { datasets: [{ pointRadius: 4, pointBackgroundColor: "rgb(0,0,255)", data: xyValues }] }, options: { plugins: { legend: {display:false}, title: { display: true, text: "House Prices vs. Size", font: {size:16} } } } }); </script> </body> </html>