1

Использую в библиотеке react-chartjs-2 3.0.5 с chart.js 3.5.1 Отлаживаю всё в Storybook (сомневаюсь, что это важно).

Моя компонента с графиком bar

import { Props } from 'react-chartjs-2/dist/types';
import { Bar } from 'react-chartjs-2';

export const BarChart = ({
    id,
    data,
    options,
    height,
    width,
    redraw,
    className,
    fallbackContent,
    getDatasetAtEvent,
    getElementAtEvent,
    getElementsAtEvent,
}: Props) => {
    return (
        <div>
            <Bar
                id={id}
                data={data}
                options={options}
                height={height}
                width={width}
                redraw={redraw}
                className={className}
                fallbackContent={fallbackContent}
                getDatasetAtEvent={getDatasetAtEvent}
                getElementAtEvent={getElementAtEvent}
                getElementsAtEvent={getElementsAtEvent}
            />
        </div>
    );
};

когда вызываю её и передаю options всегда ругается на тип. например тут:

const HorizontalChart = () => {
    const data = {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        dпустаatasets: [
            {
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)',
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)',
                ],
                borderWidth: 1,
            },
        ],
    };
    const options = {
        indexAxis: 'y',
        // Elements options apply to all of the options unless overridden in a dataset
        // In this case, we are setting the border of each horizontal bar to be 2px wide
        elements: {
            bar: {
                borderWidth: 2,
            },
        },
        responsive: true,
        plugins: {
            legend: {
                position: 'right',
            },
            title: {
                display: true,
                text: 'Chart.js Horizontal Bar Chart',
            },
        },
    };
    const width = 600;
    const height = 350;

    return <BarChart
        type={'bar'}
        data={data}
        options={options}
        height={height}
        width={width}
    />;
};

ошибку пишет следующую: Типы свойства "indexAxis" несовместимы. Тип "string" не может быть назначен для типа ""x" | "y" | undefined". Ожидаемый тип поступает из свойства "options", объявленного здесь в типе "IntrinsicAttributes & Props"

не могу понять что не так, всё делал как в примере из документации.

1 ответ 1

1

видимо стоило просто задать options тип, как здесь:

const horizontalBarOptions: ChartOptions<'bar'> = {
        indexAxis: 'y',
        elements: {
            bar: {
                borderWidth: 2,
            },
        },
        responsive: true,
    };

не забывая ChartOptions импортировать

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.