我正在使用 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 关注
- 74 浏览
添加回答
举报
0/150
提交
取消