Chart.js-线形图分析（参数分析+例图）

Chart.js线形图实战

最新推荐文章于 2021-06-28 05:52:50 发布

原创最新推荐文章于 2021-06-28 05:52:50 发布 · 6.7k 阅读

1 ·

CC 4.0 BY-SA版权

原创博客归本人所有，禁止任何人、组织、公司转载或采集！

文章标签：

#Chart.js #线形图 #Chart.js线形图

ChartJS 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍使用Chart.js绘制各种线形图的方法，包括普通线形图、线面图、步进线、点状线及线形叠加图。通过实例展示如何调整线形图样式，如直线、曲线、虚线等，并解析关键参数，如backgroundColor、borderColor、borderDash等。

线形图样式总览

在这里插入图片描述

基本写法

首先在< script >标签里面引入chart.js：

<script src="chart.js/Chart.js"></script>

然后创建一个画布：

<canvas id="myChart" width="400" height="400"></canvas>

最后写js代码：

var ctx = $('#myChart');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'],
        datasets: [{
            label: '# of 战力',
            data: [10, 11, 12, 14, 7, 1],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)'
            ],
            borderColor: 'rgba(0, 0, 0, 0.2)',
            borderWidth: 1, 
        }]
    },
    options: {
        title: {
                display: true,
                text: '线形图2 - 普通线面图'
            }
    }
});

画出的柱状图如下图：
在这里插入图片描述

参数解析

【注意】以下都是写入在datasets中的参数：

参数名	类型	说明	默认值
`backgroundColor`	`Color`	背景色。如果值为Array，只取Array[0]	`'rgba(0, 0, 0, 0.1)'`
`borderColor`	`Color`	边框色。可取Array类型的Color	`'rgba(0, 0, 0, 0.1)'`
`borderDash`	`number[]`	设置虚线。若设为[1,3],代表以1和3作为缺失绘制虚线	`[]`
`borderWidth`	`number`	略	`3`
`cubicInterpolationMode`	`string`	绘制曲线的方法。可选值为`default`和`monotone`。两个参数绘制曲线的算法不同	`'default'`
`fill`	`boolean\|string`	是否填充曲线底部	`true`
`hoverBackgroundColor`	`Color`	略	`undefined`
`hoverBorderCapStyle`	`string`	略	`undefined`
`hoverBorderColor`	`Color`	略	`undefined`
`hoverBorderDash`	`number[]`	略	`undefined`
`hoverBorderDashOffset`	`number`	略	`undefined`
`hoverBorderJoinStyle`	`string`	略	`undefined`
`hoverBorderWidth`	`number`	略	`undefined`
`label`	`string`	标签，图例和工具提示中的数据集标签。	`''`
`lineTension`	`number`	曲线的平滑度。为0时，绘制直线	`0.4`
`pointBackgroundColor`	`Color`	略	`'rgba(0, 0, 0, 0.1)'`
`pointBorderColor`	`Color`	略	`'rgba(0, 0, 0, 0.1)'`
`pointBorderWidth`	`number`	略	`1`
`pointHitRadius`	`number`	略	`1`
`pointHoverBackgroundColor`	`Color`	略	`undefined`
`pointHoverBorderColor`	`Color`	略	`undefined`
`pointHoverBorderWidth`	`number`	略	`1`
`pointHoverRadius`	`number`	略	`4`
`pointRadius`	`number`	略	`3`
`pointRotation`	`number`	略	`0`
`pointStyle`	`string\|Image`	点的类型。可选值有：'circle'、 'cross'、 'crossRot'、 'dash'、 'line'、 'rect'、 'rectRounded'、 'rectRot'、 'star'、 'triangle'	`'circle'`
`showLine`	`boolean`	是否显示曲线。否则仅显示点	`undefined`
`spanGaps`	`boolean`	如果有缺失的点，是否选择中断画图	`undefined`
`steppedLine`	`boolean\|string`	步进线。可选值有：false、 true、 'before'、 'after'、 'middle'	`false`

线形图1 - 普通线形图（直线、曲线、虚线）

var ctx1 = $('#myChart1');
var myChart = new Chart(ctx1, {
    type: 'line',
    data: {
        labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'],
        datasets: [{
            label: '# of 战力',
            data: [100, 110, 120, 70, 140, 10],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor:'rgba(153, 102, 255, 0.5)',
            borderWidth: 2,
            fill:false
        },{
            label: '# of 年龄',
            data: [24, 38, 55, 93, 82, 23],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor:'red',
            borderWidth: 2,
            lineTension:0,
            fill:false
        },{
            label: '# of 相貌',
            data: [100, 10, 80, 3, 5, 4],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor:'rgba(255, 206, 86, 0.9)',
            borderWidth: 2,
            fill:false,
            borderDash:[5]
        }]
    },
    options: {
        title: {
                display: true,
                text: '线形图1 - 普通线形图（直线、曲线、虚线）'
            }
    }
});

线形图2 - 普通线面图

var ctx2 = $('#myChart2');
var myChart = new Chart(ctx2, {
    type: 'line',
    data: {
        labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'],
        datasets: [{
            label: '# of 战力',
            data: [10, 11, 12, 14, 7, 1],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)'
            ],
            borderColor: 'rgba(0, 0, 0, 0.2)',
            borderWidth: 1, 
        }]
    },
    options: {
        title: {
                display: true,
                text: '线形图2 - 普通线面图'
            }
    }
});

线形图3 - 步进线（像极了哈夫曼编码）

var ctx3 = $('#myChart3');
var myChart = new Chart(ctx3, {
    type: 'line',
    data: {
        labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'],
        datasets: [{
            label: '# of 战力',
            data: [10, 11, 12, 14, 7, 1],
            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)'
            ],
            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)'
            ],
            borderWidth: 1, 
            steppedLine:'true'
        },{
            label: '# of 才华',
            data: [2, 4, 2, 4, 2, 4],
            type:'line',
            backgroundColor:'rgba(0, 0, 0, 0.1)',
            borderColor:'rgba(0, 99, 132, 1)',
            steppedLine:'middle'
        }]
    },
    options: {
        title: {
                display: true,
                text: '线形图3 - 步进线（像极了哈夫曼编码）'
            }
    }
});

线形图4 - 点状线

var ctx4 = $('#myChart4');
var myChart = new Chart(ctx4, {
    type: 'line',
    data: {
        labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'],
        datasets: [{
            label: '# of 战力',
            data: [10, 11, 12, 14, 7, 1],
            borderColor: 'green',
            borderWidth: 1, 
            showLine:false
        },{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            type:'line',
            backgroundColor:'rgba(0, 0, 0, 0.1)',
            borderColor:'rgba(255, 99, 132, 1)',
            showLine:false,
            pointStyle:'rect'
        }]
    },
    options: {
        title: {
                display: true,
                text: '线形图4 - 点状线'
            }
        }
});

线形图5 - 线形叠加图

var ctx5 = $('#myChart5');
var myChart = new Chart(ctx5, {
    type: 'line',
    data: {
        labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'],
        datasets: [{
            label: '# of 战力',
            data: [10, 11, 12, 14, 7, 1],
            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)'
            ],
            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)'
            ]
        },{
            label: '# of Votes',
            data: [12, 1, 3, 5, 2, 3],
            type:'line',
            backgroundColor:'rgba(54, 162, 235, 0.2)',
            borderColor:'rgba(75, 192, 192, 1)',
        }]
    },
    options: {
        title: {
                display: true,
                text: '线形图5 - 线形叠加图'
            },
        scales: {
                    xAxes: [{
                        stacked: true,
                    }],
                    yAxes: [{
                        stacked: true
                    }]
                }
    }
});