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

标签 javascript chart.js react-chartjs-2

我正在尝试使用 react-chartjs-2 创建一个简单的折线图,当我尝试为 x 轴和 y 轴设置最小/最大值时,这些值会接受。

我已经为选项尝试了以下所有方法,但没有一个能强制执行我指定的最小值和最大值:

第一次尝试:

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

第二次尝试:

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

第三次尝试:

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

虽然这些似乎都不起作用。我做错了什么/错过了什么?谢谢。

附带说明一下,我发现 Chart.js 文档非常困惑,而且很难在网上找到有效的示例,尤其是因为 Chart.js 的 v1 和 v2 似乎根本不同。

最佳答案

呃!如此令人沮丧,但我终于找到了答案。以下对我有用:

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

关于javascript - 如何使用 react-chartjs-2 强制使用 Chart.js 轴的最小值和最大值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67077436/

相关文章:

Javascript 正则表达式替换 URL 中的获取参数

javascript - 使用 Chartjs 在数据中创建数据

javascript - Chart.js 2.0 向数据集添加新属性

javascript - React-chartjs-2 不显示曲线

reactjs - 在 ReactJS 中的图表内添加数据标签不起作用?

javascript - 使用css3 和Jquery 为图像制作3d 效果?

javascript - 使用 AdBlocker 为用户显示替代内容

javascript - 正则表达式部分匹配几个不同的组

chart.js - 图表JS数据从零开始

chart.js - 自定义插件和 afterDraw 回调 Chart.js 和 React-chartjs-2 的 TypeScript 问题