简体   繁体   English

如何使用 react-chartjs-2 强制 Chart.js 轴的最小值和最大值?

[英]How do I force Chart.js axes min and max with react-chartjs-2?

I'm trying to create a simple line chart with react-chartjs-2 , and when I try to set the min/max values for the x- and y-axes, the values won't take.我正在尝试使用react-chartjs-2创建一个简单的折线图,并且当我尝试设置 x 轴和 y 轴的最小/最大值时,这些值不会采用。

I've tried all the following for options , and none of them are enforcing my specified mins and maxes:我已经为options尝试了以下所有方法,但它们都没有强制执行我指定的最小值和最大值:

1st attempt:第一次尝试:

{
    scales: {
        x: {
            max: 1000,
            min: 0
        },
        y: {
            max: 8,
            min: -3
        }
    }
}

2nd attempt:第二次尝试:

{
    scales: {
        x: {
            ticks: {
                max: 1000,
                min: 0
            }
        },
        y: {
            ticks: {
                max: 8,
                min: -3
            }
        }
    }
}

3rd attempt:第三次尝试:

{
    scales: {
        x: {
            suggestedMax: 1000,
            suggestedMin: 0
        },
        y: {
            suggestedMax: 8,
            suggestedMin: -3
        }
    }
}

None of those seem to work though.但这些似乎都不起作用。 What am I doing wrong / missing?我做错了什么/错过了什么? Thank you.谢谢你。

As a side note, I find the Chart.js docs very confusing, and it's really hard to find valid examples online, especially since v1 and v2 of Chart.js seem to be fundamentally different.作为旁注,我发现 Chart.js 文档非常混乱,而且在网上很难找到有效的示例,尤其是因为 Chart.js 的 v1 和 v2 似乎根本不同。

Ugh, So frustrating.呃,太令人沮丧了。 but I finally found the answer: The following worked for me:但我终于找到了答案:以下对我有用:

{
    scales: {
        xAxes: [{
            ticks: {
                beginAtZero: true,
                max: 1000,
                min: 0
            }
        }],
        yAxes: [{
            ticks: {
                beginAtZero: false,
                max: 8,
                min: -3
            }
        }]
    }
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM