ChartJS v4 y轴从零开始

esbemjvw 于 2023-10-18 发布在 Chart.js

关注(0)|答案(1)|浏览(148)

我有一个问题，让我的y轴从0开始。
我导入ChartJS v4如下：
<script src="https://cdn.jsdelivr.net/npm/ [[email protected]](https://stackoverflow.com/cdn-cgi/l/email-protection) /dist/chart.umd.min.js"></script>
下面是我的图表脚本：

<script>
new Chart(document.getElementById("line-chart"), {
    type : 'line',
    data : {
        labels : ['22:08', '22:08', '17:27', '19:39', '19:45', '19:49', '19:49', '19:49', '19:50', '19:54'],
        datasets : [
                {
                    data : [23.5, 23.5, 23.5, 23.5, 23.5, 25.8125, 25.8125, 25.8125, 25.8125, 25.875],
                    label : "Temperature",
                    borderColor : "#3cba9f",
                    fill : false
                }]
    },
    options : {
        scales: {
                y: { 
                    min: 0,
                    max: 100
                } 
            },    
        title : {
            display : true,
            text : 'Elderberry Brew Temperature Over Time'
        }
    }
});</script>

文档显示了选项的这种定位以及缩放选项的相同语法。：
https://www.chartjs.org/docs/latest/axes/
我见过许多类似的问题，但都是针对较旧的ChartJS库版本
任何帮助非常感谢！
您可以在以下位置查看该图表：
http://mattluka.co.uk/brew

chart.js

来源：https://stackoverflow.com/questions/77103016/chartjs-v4-y-axis-start-from-zero

1条答案

按热度按时间

8hhllhi21#

我测试了这个代码。我希望这会有所帮助：

<!DOCTYPE html>
<html>
<head>
    <title>Chart.js Example</title>
    <!-- Include Chart.js library -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
</head>
<body>
    <div style="width: 80%; margin: 0 auto;">
        <canvas id="line-chart"></canvas>
    </div>

    <script>
        // Data and Chart Configuration
        new Chart(document.getElementById("line-chart"), {
            type: 'line',
            data: {
                labels: ['22:08', '22:08', '17:27', '19:39', '19:45', '19:49', '19:49', '19:49', '19:50', '19:54'],
                datasets: [
                    {
                        data: [23.5, 23.5, 23.5, 23.5, 23.5, 25.8125, 25.8125, 25.8125, 25.8125, 25.875],
                        label: "Temperature",
                        borderColor: "#3cba9f",
                        fill: false
                    }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true, // Set this to true to start the Y-axis at 0
                        max: 100
                    },
                    x: {
                        // If you want to configure the X-axis, you can do it here
                    }
                },
                title: {
                    display: true,
                    text: 'Elderberry Brew Temperature Over Time'
                }
            }
        });
    </script>
</body>
</html>

赞(0）回复(0）举报 2023-10-18

我来回答

ChartJS v4 y轴从零开始

1条答案

相关问题

热门标签

最新问答