Javascript Chartjs附加组件_Javascript_Html_Chart.js

Javascript Chartjs附加组件

javascript html chart.js

Javascript Chartjs附加组件,javascript,html,chart.js,Javascript,Html,Chart.js,我正在使用ChartJS显示散点图，虽然我已经创建了一个基本散点图，但在向图形中添加特定功能时遇到了问题。我想在Y轴上突出显示一个可接受的范围，并向突出显示的范围添加文本，如下所示。以下是我尝试重新创建的示例：以下是我到目前为止的情况： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content=

我正在使用ChartJS显示散点图，虽然我已经创建了一个基本散点图，但在向图形中添加特定功能时遇到了问题。我想在Y轴上突出显示一个可接受的范围，并向突出显示的范围添加文本，如下所示。以下是我尝试重新创建的示例：

以下是我到目前为止的情况：

<!doctype html>
<html lang="en">
  <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的新手，所以如果您有任何建议，我将不胜感激。

有一些很好的插件，可用于在图表顶部绘制矩形。也许这个可以帮助你：

请参见图表选项中的注释零件：

annotation { annotations: [ ... ] {

GitHub来源：

这对你有帮助吗？清楚吗？如果答案是肯定的，请接受。谢谢，这很有帮助。这是自述文件中“框注释”下的注释？正确。这将绘制出所需的框/区域。