ChartJs的实际运用_chart.js 计划实际-CSDN博客

本文链接：https://blog.csdn.net/weixin_39433171/article/details/90054094

此次demo的背景是在angularjs作为前端框架的项目中使用，
1、新建jsp(html)页面，
2、引入cdn,因为我懒得下载js,注意版本

<head>
    <title>ChartJs</title>
    <%@include file="/commons/include/list.jsp"%>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
</head>

3、写展示图表的div，当然写在body里面了

<body id="content">
		<canvas id="myChart"  width="100" height="100" ></canvas>
</body>

4、写js，页面加载时触发js，很多种写法，自己挑，我只写最简单的这种，这个js只能写在定义的div之后，也就是必须先加载了div，才能执行下面方法，不然就报错了，我是写在了html标签外面最下边

<script type="text/javascript">

    $(function() {
        $.ajax({
            url: __ctx + "/ms/ms/msMaterialsBill/listJson",
            success: function (result) {

                /**
                 * angular.forEach(obj, function(value, index, arrayObj){}, context) 函数接受三个参数
                 * 1.需要变量的数组对象
                 * 2.回调函数,接受三个参数(当前值,下标, 数组对象)
                 * 3.context this指定的上下文
                 */
                var labels = [], data=[];
                angular.forEach(result.rows, function (value) {
                    console.log(result);
                     labels.push(value.materialClassify);
                     data.push(value.inventoryUnitPrice);
                });
                // 设置图表的数据
                var tempData = {
                    labels: labels,//底部标签栏
                    datasets : [
                        //每一个底部标签所显示的柱状数据，一个{}里是一条数据，即一个柱状
                        {
                            label: "材料价格",
                            backgroundColor: "rgba(75,192,192,0.4)", //颜色设置
                            borderColor: "rgba(75,192,192,1)",//颜色设置
                            borderCapStyle: 'butt',
                            strokeColor: "rgba(75,192,192,1)",
                            highlightFill: "rgba(75,192,192,1)",
                            highlightStroke: "rgba(75,192,192,1)",
                            pointBorderWidth: 1,
                            data: data
                        }/*,
                        {
                            label: "My Second dataset",
                            fillColor: "rgba(151,187,205,0.5)",
                            strokeColor: "rgba(151,187,205,0.8)",
                            highlightFill: "rgba(151,187,205,0.75)",
                            highlightStroke: "rgba(151,187,205,1)",
                            data: [28, 48, 40, 19, 86, 27, 90]
                        }*/
                    ]
                };

                // 获取所选canvas元素的内容
                var ctx = document.getElementById("myChart");
                //设置图表高度与宽度
                ctx.height=100;
                ctx.width=150;
                // 初始化一个新的柱状图
                var myLineChart = new Chart(ctx, {
                    type: 'bar', //想要什么图就在这里改,甜甜圈、折线图、圆之类的可以参照官网
                    data: tempData,
                    options: {
                        maintainAspectRatio: true,
                    }
                });

            }
        });
    });
</script>

5、柱状图颜色设置，这里说明下2.x和1.x版本的颜色设置是不一样的关键字，第四步种看注释，这里扔俩地址
1.x版本文档：http://www.bootcss.com/p/chart.js/docs/ 即bootstrap里的文档
2.x版本文档：http://www.chartjs.org/docs/#scales-category-scale
实际图太大了，还是将就的看下吧
在这里插入图片描述