数据转换成柱状图

最新推荐文章于 2025-04-17 13:39:05 发布

原创最新推荐文章于 2025-04-17 13:39:05 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#图表 #柱状图

本文介绍如何在JSP页面上使用Chart.js库绘制基于财务数据的柱状图，包括从后端获取数据并将其转化为图表所需格式的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Chart.js下载地址：https://github.com/chartjs/Chart.js/releases/tag/v2.7.3

JSP页面：

<canvas id="myChart" width="370" height="200"></canvas>


<script type="text/javascript" src='<c:url value="/js/Chart.js"></c:url>'></script>

<script  type="text/javascript">
var mlist = eval('${json}');
	console.log(mlist);
var mouthArry=[];//月份
var moneyNum=[];//金额


	
$.each(mlist,function(idx,obj){
	mouthArry.push(obj.archivesname);
	moneyNum.push(obj.consummoney);
　　});

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: mouthArry,
        datasets: [{
            label: '财务汇总',
            data: moneyNum,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

后台代码：

后台传一个json数组：
//获取当年每个月的消费总额
           List<Consum> mthlist = consumService.getMonthMoney();
           mav.addObject("mthlist", mthlist);
           JSONArray json = JSONArray.fromObject(mthlist);
           mav.addObject("json", json);