chartjs 图表的使用=笛卡尔轴

最新推荐文章于 2023-03-03 15:29:03 发布

wjp@001

最新推荐文章于 2023-03-03 15:29:03 发布

阅读量274

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_29058883/article/details/106786580

版权

前端专栏收录该内容

27 篇文章 1 订阅

订阅专栏

chartjs

中文文档

下载

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

    </style>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<!--    <script src="./js/Chart.js"></script>-->
</head>
<body>
<canvas id="myChart"></canvas>
</body>
<script>
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            datasets: [{
                data: [20, 50, 100, 75, 25, 0],
                label: 'Left dataset',
                backgroundColor:'rgba(255, 99, 132, 0)',
                borderColor:'#ED0000',
                borderWidth:2,
                // 将数据集绑定到左侧的y轴
                yAxisID: 'left-y-axis'
            }, {
                data: [0.1, 0.5, 1.0, 2.0, 1.5, 0],
                label: 'Right dataset',
                backgroundColor:'rgba(255, 99, 132, 0)',
                borderColor:'#588DD6',
                borderWidth:2,
                // 将数据及绑定到右侧的y轴
                yAxisID: 'right-y-axis',
            }],
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
        },
        options: {
            title: {
                display: true,
                text: "title",
                fontColor:'#DA291C',
            },
            scales: {
                yAxes: [{
                    id: 'left-y-axis',
                    type: 'linear',
                    position: 'left'
                }, {
                    id: 'right-y-axis',
                    type: 'linear',
                    position: 'right'
                }]
            }
        }
    });
</script>
</html>