Reactjs 过滤/更新react.js中已呈现的chart.js

我是新来的，因为我决定潜心于编程，这样我就可以在医院治疗的间隙腾出空闲时间。我是编程领域的新手，以前没有编码背景

摘要：

我正在一个简单的页面上工作，在这里我从一个Postgre数据库获取数据，该数据库使用chart.js可视化。该页面是一个内置的cube.js游乐场，使用Reactjs模板。目前，我可以根据自己的条件显示各种图表。比如在澳大利亚展示某一产品的月度销售额。或者，我可以显示第二张图表，上面有我选择的国家的每日销售额。或者忽略以某种货币进行的所有销售。现在，每一个新标准都意味着我必须使用cube.js并在页面上生成一个新图表。 我想要实现的是能够过滤已经呈现的图表（通过图表外部或图表内部的下拉按钮，这并不重要），并更新图表。比如图片，OP可以根据日期、工厂等过滤图表

我试过了，还有很多其他的。但我似乎无法在代码中实现这些解决方案中的任何一个

这是我目前的代码：

ChartRenderer.js

import React from "react";
import PropTypes from "prop-types";
import { useCubeQuery } from "@cubejs-client/react";
import Row from "react-bootstrap/Row";
import Spin from "react-bootstrap/Spinner";
import Col from "react-bootstrap/Col";
import { Statistic, Table } from "antd";
import { Line, Bar, Pie } from "react-chartjs-2";
const COLORS_SERIES = [
    "#931F1D",
    "#141446",
    "#7A77FF",
];
const commonOptions = {
    maintainAspectRatio: true,
};
const TypeToChartComponent = {
    line: ({ resultSet }) => {
        const data = {
            labels: resultSet.categories().map((c) => c.category),
            datasets: resultSet.series().map((s, index) => ({
                label: s.title,
                data: s.series.map((r) => r.value),
                borderColor: COLORS_SERIES[index],
                backgroundColor: COLORS_SERIES[index],
                fill: false,
                tension: 0.4,
            })),
        };
        const options = { ...commonOptions };
        return <Line data={data} options={options} />;
    },
    bar: ({ resultSet }) => {
        const data = {
            labels: resultSet.categories().map((c) => c.category),
            datasets: resultSet.series().map((s, index) => ({
                label: s.title,
                data: s.series.map((r) => r.value),
                backgroundColor: COLORS_SERIES[index],
                fill: false,
            })),
        };
        const options = {
            ...commonOptions,
            scales: {
                xAxes: [
                    {
                        stacked: true,
                    },
                ],
            },
        };
        return <Bar data={data} options={options} />;
    },
    area: ({ resultSet }) => {
        const data = {
            labels: resultSet.categories().map((c) => c.category),
            datasets: resultSet.series().map((s, index) => ({
                label: s.title,
                data: s.series.map((r) => r.value),
                backgroundColor: COLORS_SERIES[index],
                fill: true,
            })),
        };
        const options = {
            ...commonOptions,
            scales: {
                yAxes: [
                    {
                        stacked: true,
                    },
                ],
            },
        };
        return <Line data={data} options={options} />;
    },
    pie: ({ resultSet }) => {
        const data = {
            labels: resultSet.categories().map((c) => c.category),
            datasets: resultSet.series().map((s) => ({
                label: s.title,
                data: s.series.map((r) => r.value),
                backgroundColor: COLORS_SERIES,
                hoverBackgroundColor: COLORS_SERIES,
                borderColor: COLORS_SERIES,
                hoverBorderColor: "white",
                hoverOffset: 10,
            })),
        };
        const options = { ...commonOptions };
        return <Pie data={data} options={options} />;
    },
    number: ({ resultSet }) => {
        return (
            <Row
                type="flex"
                justify="space-around"
                align="middle"
                style={{ height: "100%" }}
            >
                <Col align="left">
                    {resultSet.seriesNames().map((s) => (
                        <Statistic value={resultSet.totalRow()[s.key]} />
                    ))}
                </Col>
            </Row>
        );
    },
    table: ({ resultSet, pivotConfig }) => {
        return (
            <Table
                pagination={false}
                columns={resultSet.tableColumns(pivotConfig)}
                dataSource={resultSet.tablePivot(pivotConfig)}
            />
        );
    },
};


const TypeToMemoChartComponent = Object.keys(TypeToChartComponent)
    .map((key) => ({
        [key]: React.memo(TypeToChartComponent[key]),
    }))
    .reduce((a, b) => ({ ...a, ...b }));

const renderChart =
    (Component) =>
    ({ resultSet, error }) =>
        (resultSet && <Component resultSet={resultSet} />) ||
        (error && error.toString()) || <Spin animation="grow text-primary" />;

const ChartRenderer = ({ vizState }) => {
    const { query, chartType } = vizState;
    const component = TypeToMemoChartComponent[chartType];
    const renderProps = useCubeQuery(query);
    return component && renderChart(component)(renderProps);
};

ChartRenderer.propTypes = {
    vizState: PropTypes.object,
    cubejsApi: PropTypes.object,
};

ChartRenderer.defaultProps = {
    vizState: {},
    cubejsApi: null,
};

export default ChartRenderer;

从“React”导入React；
从“道具类型”导入道具类型；
从“@cubejs-client/react”导入{useCubeQuery}”；
从“反应引导/行”导入行；
从“react bootstrap/Spinner”导入自旋；
从“反应引导/Col”导入Col；
从“antd”导入{统计，表}；
从“react-chartjs-2”导入{Line，Bar，Pie}；
常量颜色\u系列=[
“931F1D”，
"#141446",
“#7A77FF”，
];
常量公共选项={
维护Aspectratio：是的，
};
常量TypeToChartComponent={
行：（{resultSet}）=>{
常数数据={
标签：resultSet.categories（）.map（（c）=>c.categories），
数据集：resultSet.series（）.map（（s，索引）=>({
标签：s.title，
数据：s.series.map（（r）=>r.value），
borderColor:COLORS_系列[索引]，
背景颜色：颜色系列[索引]，
填充：假，
张力：0.4，
})),
};
const options={…commonOptions}；
返回；
},
条：（{resultSet}）=>{
常数数据={
标签：resultSet.categories（）.map（（c）=>c.categories），
数据集：resultSet.series（）.map（（s，索引）=>({
标签：s.title，
数据：s.series.map（（r）=>r.value），
背景颜色：颜色系列[索引]，
填充：假，
})),
};
常量选项={
…公共选择，
比例：{
xAxes：[
{
对,，
},
],
},
};
返回；
},
区域：（{resultSet}）=>{
常数数据={
标签：resultSet.categories（）.map（（c）=>c.categories），
数据集：resultSet.series（）.map（（s，索引）=>({
标签：s.title，
数据：s.series.map（（r）=>r.value），
背景颜色：颜色系列[索引]，
填充：是的，
})),
};
常量选项={
…公共选择，
比例：{
雅克斯：[
{
对,，
},
],
},
};
返回；
},
饼图：（{resultSet}）=>{
常数数据={
标签：resultSet.categories（）.map（（c）=>c.categories），
数据集：resultSet.series（）.map（（s）=>({
标签：s.title，
数据：s.series.map（（r）=>r.value），
背景颜色：颜色系列，
hoverBackgroundColor:COLORS\u系列，
borderColor:COLORS\u系列，
悬停边框颜色：“白色”，
偏移量：10，
})),
};
const options={…commonOptions}；
返回；
},
编号：（{resultSet}）=>{
返回(
{resultSet.seriesNames（）.map（（s）=>(
))}
);
},
表：（{resultSet，pivotConfig}）=>{
返回(
);
},
};
常量TypeToChartComponent=Object.keys（TypeToChartComponent）
.map（（键）=>({
[键]：React.memo（TypeToChartComponent[键]），
}))
.reduce（（a，b）=>（{…a，…b}））；
康斯特伦德哈特酒店=
（组成部分）=>
（{resultSet，error}）=>
（结果集&）||
（error&&error.toString（））||；
常量图表渲染器=（{vizState}）=>{
const{query，chartType}=vizState；
const component=TypeToMemoChartComponent[chartType]；
const renderProps=usecubequiry（查询）；
返回组件和renderChart（组件）（RenderOps）；
};
ChartRenderer.propTypes={
vizState:PropTypes.object，
cubejsApi:PropTypes.object，
};
ChartRenderer.defaultProps={
vizState:{}，
cubejsApi:null，
};
导出默认图表渲染器；

DashBoardPage.js

import React from "react";
import Col from "react-bootstrap/Col";
import DateRangePicker from 'react-bootstrap-daterangepicker';
import ChartRenderer from "../components/ChartRenderer";
import Dashboard from "../components/Dashboard";
import DashboardItem from "../components/DashboardItem";

const DashboardItems = [
    {
        id: 0,
        name: "Sold by customers today",
        vizState: {
            query: {
                measures: ["PostgreSqlTable.amount"],
                timeDimensions: [
                    {
                        dimension: "PostgreSqlTable.added",
                        granularity: "day",
                        dateRange: "Today",
                    },
                ],
                order: {},
                dimensions: [],
                filters: [
                    {
                        member: "PostgreSqlTable.operation",
                        operator: "contains",
                        values: ["Sell"],
                    },
                ],
            },
            chartType: "number",
        },
    },
    {
        id: 1,
        name: "Bought by customers today",
        vizState: {
            query: {
                measures: ["PostgreSqlTable.amount"],
                timeDimensions: [
                    {
                        dimension: "PostgreSqlTable.added",
                        dateRange: "Today",
                    },
                ],
                order: {},
                filters: [
                    {
                        member: "PostgreSqlTable.operation",
                        operator: "contains",
                        values: ["Buy"],
                    },
                ],
            },
            chartType: "number",
        },
    },
    {
        id: 2,
        name: "Money in the wallet",
        vizState: {
            query: {
                measures: ["PostgreSqlTable.amount"],
                timeDimensions: [
                    {
                        dimension: "PostgreSqlTable.added",
                    },
                ],
                order: {
                    "PostgreSqlTable.amount": "desc",
                },
                dimensions: ["PostgreSqlTable.currency"],
                filters: [
                    {
                        member: "PostgreSqlTable.currency",
                        operator: "equals",
                        values: ["EUR"],
                    },
                ],
            },
            chartType: "number",
        },
    },
    {
        id: 3,
        name: "Monthly sales filtered by week",
        vizState: {
            query: {
                measures: ["PostgreSqlTable.amount"],
                timeDimensions: [
                    {
                        dimension: "PostgreSqlTable.added",
                        granularity: "week",
                        dateRange: "This month",
                    },
                ],
                order: {
                    "PostgreSqlTable.amount": "desc",
                },
                dimensions: ["PostgreSqlTable.operation"],
                filters: [
                    {
                        member: "PostgreSqlTable.operation",
                        operator: "notContains",
                        values: ["Register"],
                    },
                ],
                limit: 5000,
            },
            chartType: "line",
        },
    },
    {
        id: 4,
        name: "Countries with most customers",
        vizState: {
            query: {
                measures: ["PostgreSqlTable.count"],
                timeDimensions: [
                    {
                        dimension: "PostgreSqlTable.added",
                    },
                ],
                order: {
                    "PostgreSqlTable.count": "desc",
                },
                dimensions: ["PostgreSqlTable.country"],
                limit: 5,
            },
            chartType: "pie",
        },
    },
];


const DashboardPage = () => {
    const dashboardItem = (item) => (
        <Col className="col-4">
            <DashboardItem title={item.name}>
                <ChartRenderer vizState={item.vizState} />
                
            </DashboardItem>
        </Col>
    );

    const Empty = () => (
        <div
            style={{
                textAlign: "center",
                padding: 12,
            }}
        >
            <h2>
                No items added
            </h2>
        </div>
    );

    return DashboardItems.length ? (
        <Dashboard dashboardItems={DashboardItems}>
            {DashboardItems.map(dashboardItem)}
        </Dashboard>
    ) : (
        <Empty />
    );
};

export default DashboardPage;

从“React”导入React；
从“反应引导/Col”导入Col；
从“react bootstrap DateRangePicker”导入DateRangePicker；
从“./组件/ChartRenderer”导入ChartRenderer；
从“./组件/仪表板”导入仪表板；
从“./components/DashboardItem”导入仪表板项；
常量仪表板项=[
{
id:0，
名称：“今日客户销售”，
维兹州：{
查询：{
度量值：[“PostgreSqlTable.amount”]，
时间维度：[
{
维度：“PostgreSqlTable.added”，
粒度：“天”，
日期范围：“今天”，