统计图表插件Chart.js（前端常用图表）

官方文档：https://chartjs.bootcss.com/docs/

图表JS：

<script src="Chart.js"></script>

<script src="Chart.bundle.js"></script>

 

兼容浏览器 js：

<script src="jquery.min.js"></script>

<script src="excanvas.js"></script>

 

 后端：

@RequestMapping("getdata")
@ResponseBody
public Map<String,Object> getdata() throws Exception {
List<String> xdata = new ArrayList<>; //x轴数据
List<String> dataList = new ArrayList<>; //显示的数据
Map map = new HashMap;
map.put('xdata',xdata);
map.put('dataList',dataList);
return map;
}

 

HTML：

<div>
	<canvas id="canvas"></canvas>
</div>

JS：

<script>
//图表的结构配置

$.ajax({
type:'',
url:'',
data:{},
success:function(data){
var x = data.xdata; //获取横轴数据
var data = data.dataList; //数据
var config = {
            type: 'line',//图标类型，如网状图是radar，柱状图是bar
            data: {
                labels: '',//X轴显示的标签 
                datasets: [{//数据格式 多少人每个人什么标签 图例 样式是什么json格式
                    label: '',//图例 每个人的曲线名字
                    backgroundColor: window.chartColors.red,//代表这个人的数据颜色
                    borderColor: window.chartColors.red,
                    data: data , //填充的数据
                    fill: false,//是否填充 是否用背景色填充表格
                }, {//第二个数据 更多人数据也可以这样填充
                    label: '',
                    fill: false,
                    backgroundColor: window.chartColors.blue,
                    borderColor: window.chartColors.blue,
                    data: '',
                }]
            },
            options: {//表格样式
                responsive: true,//是否自适应
                title:{
                    display:true,//是否展示标题
                    text:'业绩表'//图表标题
                },
                tooltips: {//工具提示
                    mode: 'index',
                    intersect: false,
                },
                hover: {//鼠标悬停的时候的数据展示
                    mode: 'nearest',
                    intersect: true
                },
                scales: {//刻度设置
                    xAxes: [{//X轴设置
                        display: true,//是否显示
                        scaleLabel: {//刻度标签
                            display: true,
                            labelString: ''//标签名字
                        }
                    }],
                    yAxes: [{//y轴标签                    
                        display: true,
                        scaleLabel: {//同上
                            display: true,
                            labelString: ''
                        }
                    }]
                }
            }
        };
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, config);
}
})；
</script>