使用Chart.js构建的个人能力图表

基于canvas绘制, 用类似蜘蛛网样式（或雷达图）的图表显示个人技能评分。

canvas, js, chart

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3572
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var ctx = document.getElementById("myChart").getContext("2d");
var data = {
    labels: ["Website Design", "UX Design", "Marketing", "Javascript", "HTML & CSS", "Ruby on Rails", "Tech Demos", "Leading Teams"],
    datasets: [{
        label: "Percieved Interest",
        fillColor: "rgba(43,176,212,.4)",
        strokeColor: "rgba(43,176,212,1)",
        pointColor: "rgba(43,176,212,1)",
        pointHighlightStroke: "rgba(43,176,212,1)",
        data: [100, 70, 85, 90, 95, 75, 90, 100]
    }, {
        label: "Relative Skill",
        fillColor: "rgba(140,200,50,.4)",
        strokeColor: "rgba(140,200,50,1)",
        pointColor: "rgba(140,200,50,1)",
        pointHighlightStroke: "rgba(140,200,50,1)",
        data: [85, 75, 70, 80, 85, 60, 75, 50]
    }]
};
new Chart(ctx).Radar(data, {
    animationSteps: 30,
    animationEasing: "easeInOutExpo",
    responsive: true,
    showTooltips: true,
    scaleOverride: true,
    scaleSteps: 5,
    scaleStepWidth: 20,
    scaleStartValue: 0,
    scaleLineColor: "rgba(200,200,200,.15)",

angleShowLineOut: true,
    angleLineWidth: 1,
    angleLineColor: "rgba(200,200,250,.15)",
    pointLabelFontFamily: "'freight-sans-pro', Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif",
    pointLabelFontSize: 14,
    pointLabelFontColor: "#99b",
    pointDot: false,
    datasetStrokeWidth: 1
});

编译

CSS

HTML

基于canvas绘制, 用类似蜘蛛网样式（或雷达图）的图表显示个人技能评分。

canvas, js, chart

编辑器支持Emmet

快捷键

基于canvas绘制, 用类似蜘蛛网样式（或雷达图）的图表显示个人技能评分。

canvas, js, chart

使用Matter.js构建带引力的网格化图片

使用React.js构建的阶梯线图表

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：