Chart.js实现经典雷达图表（基于canvas）

radar chart with html5 chart lib : chartjs，chartjs是一款优秀的HTML5轻量级开源图表工具。

h5, canvas, chart

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var presets = window.chartColors;
var utils = Samples.utils;
var inputs = {
    min: 8,
    max: 16,
    count: 8,
    decimals: 2,
    continuity: 1
};

function generateData() {
    // radar chart doesn't support stacked values, let's do it manually
    var values = utils.numbers(inputs);
    inputs.from = values;
    return values;
}

function generateLabels() {
    return utils.months({
        count: inputs.count
    });
}

utils.srand(42);

var data = {
    labels: generateLabels(),
    datasets: [{
        backgroundColor: utils.transparentize(presets.red),
        borderColor: presets.red,
        data: generateData(),
        label: 'D0'
    }, {
        backgroundColor: utils.transparentize(presets.orange),
        borderColor: presets.orange,
        data: generateData(),
        hidden: true,
        label: 'D1',
        fill: '-1'
    }, {
        backgroundColor: utils.transparentize(presets.yellow),
        borderColor: presets.yellow,
        data: generateData(),
        label: 'D2',
        fill: 1
    }, {
        backgroundColor: utils.transparentize(presets.green),
        borderColor: presets.green,
        data: generateData(),
        label: 'D3',
        fill: false
    }, {
        backgroundColor: utils.transparentize(presets.blue),
        borderColor: presets.blue,
        data: generateData(),
        label: 'D4',
        fill: '-1'
    }, {
        backgroundColor: utils.transparentize(presets.purple),
        borderColor: presets.purple,
        data: generateData(),
        label: 'D5',
        fill: '-1'
    }]
};

var options = {
    maintainAspectRatio: true,
    spanGaps: false,
    elements: {
        line: {
            tension: 0.000001
        }
    },
    plugins: {
        filler: {
            propagate: false
        },
        'samples-filler-analyser': {
            target: 'chart-analyser'
        }
    }
};

var chart = new Chart('chart-0', {
    type: 'radar',
    data: data,
    options: options
});

// eslint-disable-next-line no-unused-vars
function togglePropagate(btn) {
    var value = btn.classList.toggle('btn-on');
    chart.options.plugins.filler.propagate = value;
    chart.update();
}

// eslint-disable-next-line no-unused-vars
function toggleSmooth(btn) {
    var value = btn.classList.toggle('btn-on');
    chart.options.elements.line.tension = value ? 0.4 : 0.000001;
    chart.update();
}

// eslint-disable-next-line no-unused-vars
function randomize() {
    inputs.from = [];
    chart.data.datasets.forEach(function(dataset) {
        dataset.data = generateData();
    });
    chart.update();
}

编译

CSS

@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900');
body,
html {
    color: #333538;
    font-family: 'Lato', sans-serif;
    line-height: 1.6;
    padding: 0;
    margin: 0;
}
a {
    color: #f27173;
    text-decoration: none;
}
a:hover {
    color: #e25f5f;
    text-decoration: underline;
}
.content {
    max-width: 800px;
    margin: auto;
    padding: 16px 32px;
}
.header {
    text-align: center;
    padding: 32px 0;
}
.wrapper {
    min-height: 400px;
    padding: 16px 0;
    position: relative;
}
.wrapper.col-2 {
    display: inline-block;
    min-height: 256px;
    width: 49%;
}
@media (max-width: 400px) {
    .wrapper.col-2 {
        width: 100%
    }
}
.wrapper canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.toolbar {
    display: flex;
}
.toolbar > * {
    margin: 0 8px 0 0;
}
.btn {
    background-color: #aaa;
    border-radius: 4px;
    color: white;
    padding: 0.25rem 0.75rem;
}
.btn .fa {
    font-size: 1rem;
}
.btn:hover {
    background-color: #888;
    color: white;
    text-decoration: none;
}
.btn-chartjs {
    background-color: #f27173;
}
.btn-chartjs:hover {
    background-color: #e25f5f;
}
.btn-docs:hover {
    background-color: #2793db;
}
.btn-docs {
    background-color: #36A2EB;
}
.btn-docs:hover {
    background-color: #2793db;
}
.btn-gh {
    background-color: #444;
}
.btn-gh:hover {
    background-color: #333;
}
.btn-on {
    border-style: inset;
}
.chartjs-title {
    font-size: 2rem;
    font-weight: 600;
    white-space: nowrap;
}
.chartjs-title::before {
    background-image: url(logo.svg);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 40px;
    content: 'Chart.js | ';
    color: #f27173;
    font-weight: 600;
    padding-left: 48px;
}
.chartjs-caption {
    font-size: 1.2rem;
}
.chartjs-links {
    display: flex;
    justify-content: center;
    padding: 8px 0;
}
.chartjs-links a {
    align-items: center;
    display: flex;
    font-size: 0.9rem;
    margin: 0.2rem;
}
.chartjs-links .fa:before {
    margin-right: 0.5em;
}
.samples-category {
    display: inline-block;
    margin-bottom: 32px;
    vertical-align: top;
    width: 25%;
}
.samples-category > .title {
    color: #aaa;
    font-weight: 300;
    font-size: 1.5rem;
}
.samples-category:hover > .title {
    color: black;
}
.samples-category > .items {
    padding: 8px 0;
}
.samples-entry {
    padding: 0 0 4px 0;
}
.samples-entry > .title {
    font-weight: 700;
}
@media (max-width: 640px) {
    .samples-category {
        width: 33%;
    }
}
@media (max-width: 512px) {
    .samples-category {
        width: 50%;
    }
}
@media (max-width: 420px) {
    .chartjs-caption {
        font-size: 1.05rem;
    }
    .chartjs-title::before {
        content: '';
    }
    .chartjs-links a {
        flex-direction: column;
    }
    .chartjs-links .fa {
        margin: 0
    }
    .samples-category {
        width: 100%;
    }
}
.analyser table {
    color: #333;
    font-size: 0.9rem;
    margin: 8px 0;
    width: 100%
}
.analyser th {
    background-color: #f0f0f0;
    padding: 2px;
}
.analyser td {
    padding: 2px;
    text-align: center;
}

HTML

radar chart with html5 chart lib : chartjs，chartjs是一款优秀的HTML5轻量级开源图表工具。

h5, canvas, chart

编辑器支持Emmet

快捷键

radar chart with html5 chart lib : chartjs，chartjs是一款优秀的HTML5轻量级开源图表工具。

h5, canvas, chart

基于matter.js物理引擎实现的经典弹球小游戏

基于WebGL和ReactMotion实现的一款3D条形图表插件（在线演示）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：