jQuery是一種廣泛使用的JavaScript庫,可以簡化HTML文檔操作、事件處理、動畫、AJAX等常見任務,同時也可以和很多插件結合使用實現各種功能。其中,畫趨勢圖是jQuery的一個常用功能之一,可以通過jQuery和其他畫圖插件實現。
//引入jQuery和畫圖插件 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script> //定義數據 var data = { labels: ["2017年", "2018年", "2019年", "2020年", "2021年"], datasets: [ { label: "銷售量", data: [100, 150, 200, 250, 300], backgroundColor: "rgba(255, 99, 132, 0.2)", borderColor: "rgba(255,99,132,1)", borderWidth: 1 }, { label: "利潤", data: [50, 75, 100, 125, 150], backgroundColor: "rgba(54, 162, 235, 0.2)", borderColor: "rgba(54, 162, 235, 1)", borderWidth: 1 } ] }; //定義選項 var options = { responsive: true, title: { display: true, text: '銷售量與利潤趨勢圖' }, scales: { yAxes: [{ ticks: { beginAtZero:true } }] } }; //畫圖 var ctx = $("#myChart"); var myChart = new Chart(ctx, { type: 'line', data: data, options: options });
上述代碼使用了Chart.js插件,定義了兩個數據集:銷售量和利潤,并畫出了折線圖。同時,可以調整選項,如設置響應式、添加標題和坐標軸等。最后,將畫圖的結果賦值給canvas元素,并定義id為“myChart”,通過jQuery獲取元素并使用Chart.js繪制折線圖。