亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Chartjs 附加組件

Chartjs 附加組件

喵喔喔 2023-09-18 10:27:11
我正在使用 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 回答

?
縹緲止盈

TA貢獻2041條經驗 獲得超4個贊

有一些不錯的即用型插件可用于在圖表頂部繪制矩形。也許這個可以幫助你:

代碼筆示例

請參閱圖表選項中的注釋部分:

annotation?{?annotations:?[?...?]?{
查看完整回答
反對 回復 2023-09-18
  • 1 回答
  • 0 關注
  • 119 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號