Question

这是我对stackoverflow的第一篇文章，如果能给予任何帮助，我将不胜感激！

背景

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

我已经使用react创建了一个AWS Amplify应用程序，并试图在其中创建一个仪表板以显示某些已处理数据的结果。我要检索的数据文件是.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开发人员选项中查看了结果。

在开发人员控制台中出现两个错误：

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

我相信这里的问题是它无法识别url数据源并没有下载对象。我认为这可能是因为未正确启用插件，或者仅仅是读取了网址而不是提取了文件。

未捕获的TypeError：无法读取未定义的属性'config'。

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

如何解决这些问题，以便将csv文件放入甜甜圈图？

Answer 1

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

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

我如何将react-chartjs-2与chartjs-plugin-datasource集成以在s3网址上使用数据源

1 个答案: