首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何设置Y轴的最大值和最小值

如何设置Y轴的最大值和最小值
EN

Stack Overflow用户
提问于 2015-03-11 23:26:35
回答 17查看 357.3K关注 0票数 220

我使用的是http://www.chartjs.org/的折线图

正如你所看到的,Y轴的最大值(130)和最小值(60)是自动选择的,我希望最大值= 500,最小value=0。这个是可能的吗?

EN

回答 17

Stack Overflow用户

回答已采纳

发布于 2015-03-11 23:51:46

你必须重写这个比例,试试这个:(applies to ChartJS v1.x)

window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
        scaleOverride : true,
        scaleSteps : 10,
        scaleStepWidth : 50,
        scaleStartValue : 0 
    });
}
票数 76
EN

Stack Overflow用户

发布于 2016-02-22 20:30:34

对于chart.js V2 (测试版),请使用:

var options = {
    scales: {
        yAxes: [{
            display: true,
            ticks: {
                suggestedMin: 0,    // minimum will be 0, unless there is a lower value.
                // OR //
                beginAtZero: true   // minimum value will be 0.
            }
        }]
    }
};

有关更多详细信息,请参阅chart.js documentation on linear axes configuration

票数 316
EN

Stack Overflow用户

发布于 2016-08-11 21:18:17

var config = {
            type: 'line',
            data: {
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: [{
                        label: "My First dataset",
                        data: [10, 80, 56, 60, 6, 45, 15],
                        fill: false,
                        backgroundColor: "#eebcde ",
                        borderColor: "#eebcde",
                        borderCapStyle: 'butt',
                        borderDash: [5, 5],
                    }]
            },
            options: {
                responsive: true,
                legend: {
                    position: 'bottom',
                },
                hover: {
                    mode: 'label'
                },
                scales: {
                    xAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Month'
                            }
                        }],
                    yAxes: [{
                            display: true,
                            ticks: {
                                beginAtZero: true,
                                steps: 10,
                                stepValue: 5,
                                max: 100
                            }
                        }]
                },
                title: {
                    display: true,
                    text: 'Chart.js Line Chart - Legend'
                }
            }
        };

        var ctx = document.getElementById("canvas").getContext("2d");
       new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <canvas id="canvas"></canvas>
</body>

票数 75
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/28990708

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档