2019-11-15

Chart.js

前言

Chart.js 是为设计和开发人员准备的简单、灵活的 JavaScript 图表工具。
Chart.js 官网
Chart.js 中文网
Chart.js 快速入门

1、Chart.js

Chart.js 是可以画各种图表的一款前端工具。

<script src="https://repo.qianchia.com/chart.js/3.7.1/chart.min.js"></script>

<div style="width:400px;margin:0px auto">
    <canvas id="myChart"></canvas>
</div>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
            datasets: [{
                label: '示例',
                data: [12, 19, 3, 5, 2, 3],
                borderColor: 'blue',
                borderWidth: 1,
                fill: false,
            }]
        },
        options: {
            tooltips: {
                intersect: false,
                mode: 'index'
            }
        }
    });
</script>

2、柱状图

柱状图

垂直

<script src="https://repo.qianchia.com/chart.js/3.7.1/chart.min.js"></script>

<div style="width:400px;margin:0px auto">
    <canvas id="myChart"></canvas>
</div>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
            datasets: [{
                label: '示例',
                data: [12, 19, 3, 5, 0, 3],
                borderColor: 'blue',
                backgroundColor: 'skyBlue',
                borderWidth: 1,
            }]
        }
    });
</script>

水平

<script src="https://repo.qianchia.com/chart.js/3.7.1/chart.min.js"></script>

<div style="width:400px;margin:0px auto">
    <canvas id="myChart"></canvas>
</div>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'horizontalBar',
        data: {
            labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
            datasets: [{
                label: '示例',
                data: [12, 19, 3, 5, 0, 3],
                borderColor: 'blue',
                backgroundColor: 'skyBlue',
                borderWidth: 1,
            }]
        }
    });
</script>

多数据

<script src="https://repo.qianchia.com/chart.js/3.7.1/chart.min.js"></script>

<div style="width:400px;margin:0px auto">
    <canvas id="myChart"></canvas>
</div>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
            datasets: [
                {
                    label: '示例1',
                    data: [12, 19, 3, 5, 0, 3],
                    borderColor: 'blue',
                    backgroundColor: 'skyBlue',
                    borderWidth: 1,
                },
                {
                    label: '示例2',
                    data: [182, 51, 133, 54, 105, 96],
                    borderColor: 'red',
                    backgroundColor: 'pink',
                    borderWidth: 1,
                },

            ]
        }
    });
</script>

多轴

<script src="https://repo.qianchia.com/chart.js/3.7.1/chart.min.js"></script>

<div style="width:400px;margin:0px auto">
    <canvas id="myChart"></canvas>
</div>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
            datasets: [
                {
                    label: '示例1',
                    data: [12, 19, 3, 5, 0, 3],
                    borderColor: 'blue',
                    backgroundColor: 'skyBlue',
                    borderWidth: 1,
                    yAxisID: 'y-axis-1',
                },
                {
                    label: '示例2',
                    data: [182, 51, 133, 54, 105, 96],
                    borderColor: 'red',
                    backgroundColor: 'pink',
                    borderWidth: 1,
                    yAxisID: 'y-axis-2',
                },

            ]
        },
        options: {
            scales: {
                yAxes: [{
                    type: 'linear',
                    display: true,
                    position: 'left',
                    id: 'y-axis-1',
                }, {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    id: 'y-axis-2',
                    gridLines: {
                        drawOnChartArea: false
                    }
                }],

            }
        }
    });
</script>

3、曲线图

曲线图

单曲线

<script src="https://repo.qianchia.com/chart.js/3.7.1/chart.min.js"></script>

<div style="width:400px;margin:0px auto">
    <canvas id="myChart"></canvas>
</div>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
            datasets: [{
                label: '示例',
                data: [12, 19, 3, 5, 0, 3],
                borderColor: 'blue',
                backgroundColor: 'skyBlue',
                borderWidth: 1,
                fill: false,
            }]
        }
    });
</script>

多曲线

<script src="https://repo.qianchia.com/chart.js/3.7.1/chart.min.js"></script>

<div style="width:400px;margin:0px auto">
    <canvas id="myChart"></canvas>
</div>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
            datasets: [
                {
                    label: '示例1',
                    data: [12, 19, 3, 5, 0, 3],
                    borderColor: 'blue',
                    backgroundColor: 'skyBlue',
                    borderWidth: 1,
                    fill: false,

                },
                {
                    label: '示例2',
                    data: [182, 51, 133, 54, 105, 96],
                    borderColor: 'red',
                    backgroundColor: 'pink',
                    borderWidth: 1,
                    fill: false,
                },

            ]
        }
    });
</script>

多轴

<script src="https://repo.qianchia.com/chart.js/3.7.1/chart.min.js"></script>

<div style="width:400px;margin:0px auto">
    <canvas id="myChart"></canvas>
</div>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
            datasets: [
                {
                    label: '示例1',
                    data: [12, 19, 3, 5, 0, 3],
                    borderColor: 'blue',
                    backgroundColor: 'skyBlue',
                    borderWidth: 1,
                    fill: false,
                    yAxisID: 'y-axis-1',
                },
                {
                    label: '示例2',
                    data: [182, 51, 133, 54, 105, 96],
                    borderColor: 'red',
                    backgroundColor: 'pink',
                    borderWidth: 1,
                    fill: false,
                    yAxisID: 'y-axis-2',

                },

            ]
        },
        options: {
            scales: {
                yAxes: [{
                    type: 'linear',
                    display: true,
                    position: 'left',
                    id: 'y-axis-1',
                }, {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    id: 'y-axis-2',
                    gridLines: {
                        drawOnChartArea: false
                    }
                }],

            }
        }
    });
</script>

虚线

<script src="https://repo.qianchia.com/chart.js/3.7.1/chart.min.js"></script>

<div style="width:400px;margin:0px auto">
    <canvas id="myChart"></canvas>
</div>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
            datasets: [
                {
                    label: '示例1',
                    data: [12, 19, 3, 5, 0, 3],
                    borderColor: 'blue',
                    backgroundColor: 'skyBlue',
                    borderWidth: 1,
                    fill: false,
                    yAxisID: 'y-axis-1',
                },
                {
                    label: '示例2',
                    data: [182, 51, 133, 54, 105, 96],
                    borderColor: 'red',
                    backgroundColor: 'pink',
                    borderWidth: 1,
                    fill: false,
                    yAxisID: 'y-axis-2',
                    borderDash: [5, 5],
                },

            ]
        },
        options: {
            scales: {
                yAxes: [{
                    type: 'linear',
                    display: true,
                    position: 'left',
                    id: 'y-axis-1',
                }, {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    id: 'y-axis-2',
                    gridLines: {
                        drawOnChartArea: false
                    }
                }],

            }
        }
    });
</script>

4、饼状图

饼状图

<script src="https://repo.qianchia.com/chart.js/3.7.1/chart.min.js"></script>

<div style="width:400px;margin:0px auto">
    <canvas id="myChart"></canvas>
</div>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
            datasets: [{
                label: '示例',
                data: [12, 19, 3, 5, 0, 3],
                borderColor: 'lightGray',
                backgroundColor: ['pink', 'skyblue', 'LightYellow', 'LawnGreen', 'MediumPurple', 'orange'],
                borderWidth: 1
            }]
        }
    });
</script>

5、甜甜圈

甜甜圈

<script src="https://repo.qianchia.com/chart.js/3.7.1/chart.min.js"></script>

<div style="width:400px;margin:0px auto">
    <canvas id="myChart"></canvas>
</div>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
            datasets: [{
                label: '示例',
                data: [12, 19, 3, 5, 0, 3],
                borderColor: 'lightGray',
                backgroundColor: ['pink', 'skyblue', 'LightYellow', 'LawnGreen', 'MediumPurple', 'orange'],
                borderWidth: 1
            }]
        }
    });
</script>

6、提示信息

提示信息

交叉点，默认就是这样，需要把鼠标放在交叉点上才会显示提示信息。

<script src="https://repo.qianchia.com/chart.js/3.7.1/chart.min.js"></script>

<div style="width:400px;margin:0px auto">
    <canvas id="myChart"></canvas>
</div>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
            datasets: [
                {
                    label: '示例1',
                    data: [12, 19, 3, 5, 0, 3],
                    borderColor: 'blue',
                    backgroundColor: 'skyBlue',
                    borderWidth: 1,
                    fill: false,
                    yAxisID: 'y-axis-1',
                },
                {
                    label: '示例2',
                    data: [182, 51, 133, 54, 105, 96],
                    borderColor: 'red',
                    backgroundColor: 'pink',
                    borderWidth: 1,
                    fill: false,
                    yAxisID: 'y-axis-2',

                },

            ]
        },
        options: {
            scales: {
                yAxes: [{
                    type: 'linear',
                    display: true,
                    position: 'left',
                    id: 'y-axis-1',
                }, {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    id: 'y-axis-2',
                    gridLines: {
                        drawOnChartArea: false
                    }
                }],

            },
            tooltips: {
                intersect: true,
            },
        }
    });
</script>

非交叉点，intersect 修改成 false, 就表示鼠标移动到图表就会出现提示信息了。nearest 表示显示最近的一根线的信息。

<script src="https://repo.qianchia.com/chart.js/3.7.1/chart.min.js"></script>

<div style="width:400px;margin:0px auto">
    <canvas id="myChart"></canvas>
</div>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
            datasets: [
                {
                    label: '示例1',
                    data: [12, 19, 3, 5, 0, 3],
                    borderColor: 'blue',
                    backgroundColor: 'skyBlue',
                    borderWidth: 1,
                    fill: false,
                    yAxisID: 'y-axis-1',
                },
                {
                    label: '示例2',
                    data: [182, 51, 133, 54, 105, 96],
                    borderColor: 'red',
                    backgroundColor: 'pink',
                    borderWidth: 1,
                    fill: false,
                    yAxisID: 'y-axis-2',

                },

            ]
        },
        options: {
            scales: {
                yAxes: [{
                    type: 'linear',
                    display: true,
                    position: 'left',
                    id: 'y-axis-1',
                }, {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    id: 'y-axis-2',
                    gridLines: {
                        drawOnChartArea: false
                    }
                }],

            },
            tooltips: {
                mode: 'nearest',
                intersect: false,
            },
        }
    });
</script>

出现位置中间，有时候要显示多根线的信息，并且出现在中间位置，那么就可以使用 index。

<script src="https://repo.qianchia.com/chart.js/3.7.1/chart.min.js"></script>

<div style="width:400px;margin:0px auto">
    <canvas id="myChart"></canvas>
</div>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
            datasets: [
                {
                    label: '示例1',
                    data: [12, 19, 3, 5, 0, 3],
                    borderColor: 'blue',
                    backgroundColor: 'skyBlue',
                    borderWidth: 1,
                    fill: false,
                    yAxisID: 'y-axis-1',
                },
                {
                    label: '示例2',
                    data: [182, 51, 133, 54, 105, 96],
                    borderColor: 'red',
                    backgroundColor: 'pink',
                    borderWidth: 1,
                    fill: false,
                    yAxisID: 'y-axis-2',

                },

            ]
        },
        options: {
            scales: {
                yAxes: [{
                    type: 'linear',
                    display: true,
                    position: 'left',
                    id: 'y-axis-1',
                }, {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    id: 'y-axis-2',
                    gridLines: {
                        drawOnChartArea: false
                    }
                }],

            },
            tooltips: {
                mode: 'index',
                intersect: false,
            },
        }
    });
</script>

回调函数，通过 callbacks 函数可以自定义提示文字里的显示信息。

<script src="https://repo.qianchia.com/chart.js/3.7.1/chart.min.js"></script>

<div style="width:400px;margin:0px auto">
    <canvas id="myChart"></canvas>
</div>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
            datasets: [
                {
                    label: '示例1',
                    data: [12, 19, 3, 5, 0, 3],
                    borderColor: 'blue',
                    backgroundColor: 'skyBlue',
                    borderWidth: 1,
                    fill: false,
                    yAxisID: 'y-axis-1',
                },
                {
                    label: '示例2',
                    data: [182, 51, 133, 54, 105, 96],
                    borderColor: 'red',
                    backgroundColor: 'pink',
                    borderWidth: 1,
                    fill: false,
                    yAxisID: 'y-axis-2',

                },

            ]
        },
        options: {
            scales: {
                yAxes: [{
                    type: 'linear',
                    display: true,
                    position: 'left',
                    id: 'y-axis-1',
                }, {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    id: 'y-axis-2',
                    gridLines: {
                        drawOnChartArea: false
                    }
                }],

            },
            tooltips: {
                mode: 'index',
                intersect: false,
                callbacks: {
                    label: function (tooltipItem, myData) {
                        var label = myData.datasets[tooltipItem.datasetIndex].label || '';
                        if (label) {
                            label += '的数值是: ';
                        }
                        label += parseFloat(tooltipItem.value).toFixed(2);
                        return label;
                    }
                },
            },
        }
    });
</script>

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-15 20:03

Qian Chia's Blog

赞助

搜索

分类

标签