使用Chart.min.js展示条形图、雷达图等数据

         使用Chart.min.js展示条形图、雷达图等数据

HTML（已测试）：

<div class="new_bottom_title">{$vi['title']}</div>
<div class="new_bottom_content">{$vi['content']}</div>

jQuery：

<script src="__JS__/Chart.min.js"></script>
<script>
   var ctx = document.getElementById('myChart').getContext('2d');
   var dataList = '<?php echo json_encode($list["middle"]);?>';
   var list = JSON.parse(dataList);
   var lab=[];
   var valData=[];
    $.each(list,function(i,val){
        lab[i]=val['title'];
        valData[i]=val['val'];
        });
   var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        // labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        labels: lab,
        datasets: [{
            label: '智能值',
            // data: [12, 19, 3, 5, 2, 3],
            data: valData,
            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)',
                'rgba(85, 109, 64, 0.2)',
                'rgba(0, 255, 0, 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)',
                'rgba(85, 109, 64, 1)',
                'rgba(0, 255, 0, 1)',
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
   window.chartColors = {
            red: 'rgb(255, 99, 132)',
            orange: 'rgb(255, 159, 64)',
            yellow: 'rgb(255, 205, 86)',
            green: 'rgb(75, 192, 192)',
            blue: 'rgb(54, 162, 235)',
            purple: 'rgb(153, 102, 255)',
            grey: 'rgb(201, 203, 207)'
        };
        var color = Chart.helpers.color;
        var radarConfig = {
            type: 'radar',
            data: {
                labels: lab,
                datasets: [{
                    label: "智能值",
                    backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
                    borderColor: window.chartColors.red,
                    pointBackgroundColor: window.chartColors.red,
                    borderWidth: 1,
                    data: valData
                }]
            },
            options: {
                responsive: true,
                // maintainAspectRatio: false,
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: '雷达图'
                },
            }
        };
        window.myRadar = new Chart(document.getElementById("chartjs-radar-chart"), radarConfig);
</script>

js:可以去网上下载，也可以留言给我，

图片：

标题