我正在使用 ChartJS 顯示散點圖,雖然我已經創建了基本的散點圖,但我在向圖表添加特定功能時遇到了問題。我想在 Y 軸上突出顯示可接受的范圍,并將文本添加到突出顯示的范圍,如下所示。這是我試圖重新創建的示例:這是我到目前為止所擁有的:<!doctype html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Getting Started with Chart JS</title> </head> <body> <canvas id="scatter-chart"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js"></script> <script> var xLabels=['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; var myChart= new Chart(document.getElementById("scatter-chart"), { type: 'scatter', data: { datasets: [{ backgroundColor: "#399cff", pointStyle: 'rect', radius:15, pointHoverRadius: 15, // dummy values: enter user-data here for caloric intake. // x=1: Monday // x=2: Tuesday // x=3: Wednesday // x=4: Thursday // x=5: Friday // x=6: Saturday // x=7: Sunday data: [ {x: 1,y: 1200}, {x: 2,y: 1000}, {x: 3,y: 1500}, {x: 4,y:1850}, {x: 5,y:1600}, {x:6,y:1750}, {x:7,y:1400} ], fill: true } ] }, options: { scales: { xAxes: [{ ticks: { userCallback: function(label, index, labels) { return xLabels[label-1]; } }, }] }, legend:{ display:false }, title: { display: true, fontSize: 30, text: 'Calories' } } }); </script> </body></html>我是 Javascript(以及 StackOverflow)的新手,所以任何建議將不勝感激。
- 1 回答
- 0 關注
- 119 瀏覽
添加回答
舉報
0/150
提交
取消