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元素是必须的
|
1 |
<canvas id="myChart" style="width: 100%;height: 90%;outline: none"></canvas> |
style比较简单，就不写css了
3.创建一个图标，只需要new一个chart对象就可以了
|
1 2 |
this.radarDom = document.getElementById("myChart"); var myNewChart = new Chart(this.radarDom.getContext("2d"), this.radarConfig()); |
需要两个参数，canvas的context，以及config
主要问题在于config，暂时未能完全了解
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
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; } |