Char图表的使用

详情可见

https://chartjs.bootcss.com/docs/

使用Ajax调用API填充图表数据

Html代码

   //图表控件
  <canvas id="tongji"></canvas>     

需要引入的类库

    //chart.js脚本
   	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
   	
   	//Jquery脚本
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>

Js代码

   var cha = document.getElementById("tongji").getContext('2d');  //绑定canvas控件中
   var Jsondata = $.ajax({
        url: "/api/Deom",      //API的地址路径
        dataType: "json"	   //传输格式
    }).done(function (si) {
        var zhi = [];      
        var leixing = [];  
        //$.each(si, function (key, val) {
            //zhi.push(val.homeChaox);      //使用for循环作用差不多
            //leixing.push(val.HomePrice);
        //});
        for (var items in si) {
            zhi.push(si[items].homeChaox);
            leixing.push(parseFloat(si[items].HomePrice));   //这里的HomePrice是字段名
        }
        var char = new Chart(cha, {
            type: 'bar',    //图表的类型 （柱状图）     
            data: {
                labels: zhi,     //显示数据的名称
                datasets: [{
                    label: "我的第一个图表",   //标题
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',   //背景颜色
                        'rgba(54, 162, 235, 0.2)'     
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',   //边框颜色
                        'rgba(54, 162, 235, 1)'
                    ],
                    data: leixing   //数据的价格
                }]
            },
            options: {

            }
        });
    })
    

API代码

	public class DeomController : ApiController
	    {
	        private DBHepler db = new DBHepler();
	        // GET: api/Deom
	        public IEnumerable<home> Get()
	        {
	            return db.Db.Queryable<home>().ToList();
	        }
	    }