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

【问题标题】：How can I integrate react-chartjs-2 with chartjs-plugin-datasource to use a datasource at an s3 url如何将 react-chartjs-2 与 chartjs-plugin-datasource 集成以在 s3 url 处使用数据源
【发布时间】：2019-12-30 17:24:05
【问题描述】：

这是我在 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 的开发者选项中查看了结果。

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

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

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

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

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

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

【问题讨论】：

标签： javascript reactjs

【解决方案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",
          }
        }
      }}
    />

【讨论】：