chart.js 绘制雷达图

chart.js是一个很newblity的图标库，支持各种图（柱状、曲线、饼图、雷达图等等），使用起来也很简单，这里先奉上官方文档一份 http://www.bootcss.com/p/chart.js/docs/。

chart.js使用canvas绘制，缺点就是移动端性能有点差（或者是我入门太浅）。

官方文档介绍的不甚详细，这里给一个可以成功的example。

雷达图

1.引入chart.js

1）.<script>标签引入    逼格太低

2）.npm install chart.js 后，var Chart = require('chart.js')    逼格一般

3）.npm install chart.js，使用gulp,import Chart from 'chart.js'  逼格目前最高

2.html文件中，一个canvas元素是必须的

<canvas id="myChart" style="width: 100%;height: 90%;outline: none"></canvas>

style比较简单，就不写css了

3.创建一个图标，只需要new一个chart对象就可以了

this.radarDom = document.getElementById("myChart");
var myNewChart = new Chart(this.radarDom.getContext("2d"), this.radarConfig());

需要两个参数，canvas的context，以及config

主要问题在于config，暂时未能完全了解

radarConfig() {
    var 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(231,233,237)'
    };

    var color = Chart.helpers.color;
    var config = {
        // 图标类型
        type: 'radar',
        data: {
            // 雷达图的角
            labels: ["0:00", "3:00", "6:00", "9:00", "12:00", "15:00", "18:00", "21:00"],
            color: '#fff',
            datasets: [{
                // 雷达图颜色
                backgroundColor: color(chartColors.red).alpha(0.3).rgbString(),
                borderColor: chartColors.blue,
                pointBackgroundColor: chartColors.red,
                // 数据 如[1, 2, 3, 4, 5, 6, 7, 8]
                data: this.radarData
            }]
        },
        options: {
            fontColor:'#fff',
            custom: {
                fontColor: "#fff",
                color: "#fff"
            },
            legend: {
                display: false,
                position: 'left',
            },
            title: {
                display: true,
                text: '我的观影时段',
                fontColor: '#fff',
                fontSize: 24
            },
            scale: {
                // ticks 0 10 20等标签
                fontColor: '#ffffff',
                ticks: {
                    display: false,
                    beginAtZero: true,
                    fontColor: "#000",
                    maxTicksLimit: undefined,
                },
                //scaleLabel: {
                //    fontColor: "#000",
                //}
                // 线条
                gridLines: {
                    color: '#fff',
                    //zeroLineColor: '#fff'
                }
            }
        }
    };

    return config;
}