时间戳

首页 > 解决方案 > 如何将 react-chartjs-2 与 chartjs-plugin-datasource 集成以在 s3 url 处使用数据源

javascript - 如何将 react-chartjs-2 与 chartjs-plugin-datasource 集成以在 s3 url 处使用数据源

问题描述

这是我在 stackoverflow 上的第一篇文章，如果可以提供任何帮助，我将不胜感激！

背景

我是一名新手 Web 开发人员，但有为数据管道和 ML 开发 Python 应用程序的经验。

我已经使用 react 创建了一个 AWS 放大应用程序，并试图在其中创建一个仪表板来显示一些处理数据的结果。我试图检索的数据文件是一个 .csv 文件。

我选择使用 chartjs-2 进行可视化，因此我使用react-chartjs-2包装器，以使我能够从使用chartjs-plugin-datasource插件的 url 加载 csv 数据。

仪表板组件代码

下面是我当前的仪表板组件代码。

import React from "react";
import Amplify, { Storage } from "aws-amplify";
import awsmobile from "./aws-exports";
import { Doughnut, Chart } from "react-chartjs-2";
import ChartDataSource from "chartjs-plugin-datasource";
// TODO create a dashboard app with a chartjs set of views and a pivot table component
// TODO create a storage.get method that goes and retrieves the file
Amplify.configure(awsmobile);
Storage.configure({ level: "private" });
Chart.plugins.register(ChartDataSource);

export default function Dashboard() {
  const getFileURL = async e => {
    Storage.get("test.csv", { level: "private" })
      .then(result => console.log(result))
      .catch(err => console.log(err));
  };

  const fileURL = getFileURL();

  return (
    <Doughnut
      data={{url : fileURL}}
      options={{
        datasource: {
          url: fileURL,
          rowMapping: "index",
          datasetLabels: "some cell range",
          indexLabels: "some cell range",
          data: "the data to be displayed as a cell range"
        }
      }}
    />
  );
}

调试

getFileURL 方法按预期工作，我在 chrome 的开发人员选项中查看了结果。

我在开发人员控制台中收到两个错误：

  1. 未捕获的错误：“未定义”不是数据源类型。

我相信这里的问题是它没有识别 url 数据源并下载对象。我认为这可能是因为插件没有正确启用，或者它只是在读取 url 而不是拉文件。

  1. 未捕获的类型错误：无法读取未定义的属性“配置”。

坦率地说，我不知道这在这种情况下意味着什么。

如何解决这些问题，以便将我的 csv 文件放入我的圆环图中？

标签： javascriptreactjs

解决方案

您应该指定ChartDataSource为插件选项。

     <Doughnut
      data={{ url: fileURL }}
      plugins={[ChartDataSource]}
      options={{
        plugins: {
          datasource: {
            type: 'csv',
            url: fileURL,
            rowMapping: 'index',
            datasetLabels: "some cell range",
            indexLabels: "some cell range",
          }
        }
      }}
    />

推荐阅读