javascript - 如何在chartJs中隐藏两条轴线（选项不起作用）

Question

我正在使用条形图并想隐藏两条轴线。我尝试了以下方法，但它不起作用。

=>> 实际上，我正在使用 ChartJS 制作图表。一切都很顺利，除了一个例外：虽然 X 轴线（沿图表底部水平延伸的线）正在绘制，但 Y 轴线（沿左侧垂直延伸的线）没有，甚至虽然我应用了几乎相同的配置。

我已经广泛使用了这个，并且无法弄清楚我做错了什么。

/** @type {import("@theme-ui/css").Theme} */
import { Box, Container } from '@theme-ui/components'
import React from 'react'
import { Bar } from 'react-chartjs-2'

const data = {
    labels: ['Mon', 'Tue', 'Wed', 'Fri', 'Sat'],
    datasets: [
        {
            label: 'Fully Rounded',
            data: [6, 2, 3, 5, 2],
            borderWidth: 0,
            borderRadius: 9,
            borderSkipped: false,
            display: false,
            borderColor: 'transparent',
            backgroundColor: "#FF8D1E",
        },
        {
            label: 'Small Radius',
            data: [3, 2, 6, 4, 5],
            borderWidth: 0,
            borderRadius: 9,
            borderSkipped: false,
            display: false,
            borderColor: 'transparent',
            backgroundColor: '#6AC1FF',
            color: 'rgba(0, 0, 0, 0.1)',
        }
    ]
};

const option = {
    scales: {
        x: [{
            grid: {
                drawBorder: false,
                drawOnChartArea: false
            },
        }],
        y: [{
            grid: {
                drawBorder: false,
                drawOnChartArea: false
            },
        }]
    },
    maintainAspectRatio: true
}

function Charts() {

    return (
        <Container sx={styles.container}>
            <h2>Number of Patients</h2>
            <Box sx={styles.chart}>
                <Bar
                    data={data}
                    width={40}
                    height={20}
                    options={option}
                />
            </Box>
        </Container>
    )
}

export default Charts;

const styles = {
    container: {
        p: "12px"
    },
    chart: {
        bg: "#605BFF",
        borderRadius: "27px",
        p: ["20px"],
        color: "red"
    }
}

实际上我想删除图片的轴线

请帮帮我。

我正在使用 ChartJS 制作图表。一切都很顺利，除了一个例外：虽然 X 轴线（沿图表底部水平延伸的线）正在绘制，但 Y 轴线（沿左侧垂直延伸的线）没有，甚至虽然我应用了几乎相同的配置。

我已经广泛使用了这个，并且无法弄清楚我做错了什么。

标签： javascriptreactjsnext.jstheme-uichatjs