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绘制折线图。