标签: react-chartjs-2

我正在开发一个 React 应用程序，我想在其中显示图表。我尝试使用react-chartjs-2，但我找不到让它工作的方法。当我尝试使用 Pie 组件时，出现错误：Error: "arc" is not a registered element.

我做了一个非常简单的反应应用程序：

• npx 创建反应应用程序我的应用程序
• npm install--保存react-chartjs-2图表.js

这是我的 package.json：

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "chart.js": "^3.6.0",
    "cra-template": "1.1.2",
    "react": "^17.0.2",
    "react-chartjs-2": "^4.0.0",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari …

我目前正在尝试通过react-chartjs-2 构建折线图。为此，我使用 TypeScript。我在实施时没有遇到任何错误。webiste 呈现正常，但是当我尝试打开呈现 LineChart 的组件时，我在浏览器中收到以下错误：

我的 LineChart 组件如下所示：

import { Line } from "react-chartjs-2";
import {ChartData, ScatterDataPoint} from "chart.js"

type LineChartProps = {
    options: object,
    data: ChartData<"line", (number | ScatterDataPoint | null)[], unknown>,
}

export default function LineChart({options, data}:LineChartProps) {
  return ( 
    <Line data={data} options={options} />
  );
}

由于我希望能够处理来自不同来源的数据，我的处理程序如下所示（到目前为止非常基本）：

import LineChart from "./LineChart";

const colors = ["#f7813e", "#547db4", "lightgreen", "lightcoral", "darkorchid"]

type LineChartHandlerProps = {
    labels: Array<string>,
    datasets:Array<Array<number>>,
    labelDatasets:Array<string>,
    title: string,
}


const LineChartHandler = ({labels, labelDatasets, datasets, title}:LineChartHandlerProps) …

假设我有一个圆环图，其中包含 5 个项目的数据，如下所示

const data = {
  labels: ['E-commerce', 'Enterprise', 'Green', 'Grey', 'Purple'],
  datasets: [
    {
      label: '# of Votes',
      data: [12, 19, 3, 5, 3],
      backgroundColor: ['#C07CC3', '#9C3848', '#9DDBAD', '#ADA8B6', '#606EDA'],
      borderWidth: 1,
    },
  ],
} 

我不希望它显示所有图例，因为我没有空间或任何原因

如何隐藏此示例中的绿色和紫色？

我的意思是仅来自传说而不是图表

R/python 用户，javascript 新手。我正在尝试做一些我认为很简单的事情，即在 React 中使用 Chart-js 制作一个基本的时间序列图表。

我似乎无法让轴正常工作，这可能是一个非常基本的错误，但我似乎找不到任何有关如何在反应中执行此操作的文档。我的示例通常在 html/js 中运行，但在 React 中不起作用？React-chartjs-2 的文档是很简单的。

我想要一个折线图，其中 X 轴按日期缩放（我的数据是间隔不均匀的时间序列数据）。我认为你需要时间来做到这一点，但我得到的只是堆积到 1 个点上的数据（正确的 y 值，但所有值的 x 值均为零）。

我在codesandbox中包含了一个最小示例的链接，它基于react-chart-js 中的Line 示例中的示例。

应用程序.tsx

import React from "react";
import "chartjs-adapter-moment";
import { Line } from "react-chartjs-2";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
} from "chart.js";
import { Chart } from "react-chartjs-2";

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

export const options = {
  response: true,
  scales: { …

下面的代码，

有没有办法通过滚动的二十分钟视图获得“实时”？似乎无法在启用此功能的选项中找到任何内容。

ChartJS 版本 2.9.4

import 'chartjs-plugin-zoom';
import { Line } from 'react-chartjs-2';
import 'chartjs-plugin-streaming';

export default () => {
    const data = {
        datasets: [
            {
                label: 'MWC',
                borderColor: 'rgb(255, 99, 132)',
                backgroundColor: 'rgba(255, 99, 132, 0.5)',
                steppedLine: true,
                lineTension: 0,
                borderDash: [8, 4],
                data: new Array(1000).fill(null).map((_, i) => {
                    return {
                        x: new Date(new Date().setTime(new Date().getTime() + (i + 1) * 1000)),
                        y: random(500, 1000),
                    };
                }), // REPLACE THIS WITH REALTIME FEED
            },
        ],
    };

    const options …

我在react-chartjs-2中制作了条形图。我想在条形顶部显示每个条形的数据值。为此，我使用了名为Chartjs-plugin-datalabels 的插件，但它没有显示任何内容。

是否可以显示条形图的每个值？

我想展示这样的数据价值。

这是我的代码。

import React, { Component } from "react";
import "chartjs-plugin-datalabels";
import { Bar } from "react-chartjs-2";

export default class Button extends Component {
  render() {
    const dataBar = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [
        {
          label: "My First dataset",
          backgroundColor: "#EC932F",
          borderColor: "rgba(255,99,132,1)",
          borderWidth: 1,
          hoverBackgroundColor: "rgba(255,99,132,0.4)",
          hoverBorderColor: "rgba(255,99,132,1)",
          data: [65, 59, 80, 81, 56, 55, 40]
        }
      ]
    };

    const options = {
      plugins: {
        datalabels: {
          display: …

例子How to display data on top of line chart

实施过程中遇到的问题：

Chartjs 插件“chartjs-plugin-datalabels:1.0.0”导入抛出以下错误

类型错误：无法读取未定义的属性“扩展”。

通过将标签插件包更改为测试版本解决了上述错误2.0.0-rc.1

链接到codesandbox可以在这里找到

这里提出了类似的问题，但解决方案无法解决我的问题。

任何形式的帮助将不胜感激。

import React, { Fragment } from "react";
import { Line } from "react-chartjs-2";
import "chartjs-plugin-datalabels";

const styles = {
  dangerColor: {
    color: "red"
  },
  geen: {
    color: "green"
  }
};

const data = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May"],
  datasets: [
    {
      label: "Avg interest by month",
      data: [0.7, 0.81, 0.71, 0.87, 0.9],
      fill: false,
      backgroundColor: "transparent",
      borderColor: "#06a1e1", …

我正在尝试这个reactjs流图表的例子 https://nagix.github.io/chartjs-plugin-streaming/latest/tutorials/react/app.html

但我似乎无法让它工作，它编译没有问题，但在浏览器中不显示任何内容，当我检查浏览器控制台时，它有错误消息：

App.js:7 Uncaught TypeError: react_chartjs_2__WEBPACK_IMPORTED_MODULE_5__.Chart.register is not a function
    at Module../src/App.js (App.js:7:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Module../src/index.js (App.js:46:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at startup:7:1
    at startup:7:1
./src/App.js    @   App.js:7
options.factory @   react refresh:6
__webpack_require__ @   bootstrap:24
fn  @   hot module replacement:61
./src/index.js  @   App.js:46
options.factory @   react refresh:6
__webpack_require__ @   bootstrap:24
(anonymous) @   startup:7
(anonymous) @   startup:7

我尝试了Chart.plugins.register(StreamingPlugin)，然后错误消息是：

App.js:7 Uncaught TypeError: Cannot read properties of undefined …

我尝试将时间适配器导入到我的 ReactJS 项目中，但看起来不起作用。我无法将 Chart.js 配置为与“chartjs-adapter-date-fns”一起使用。我的代码如下。

我像这样导入它们：

import {
  Chart as ChartJS,
  LinearScale,
  PointElement,
  Tooltip,
  Legend,
} from "chart.js";
import "chartjs-adapter-date-fns";
import { Bubble } from "react-chartjs-2";

ChartJS.register(LinearScale, PointElement, Tooltip, Legend);

图表的配置：

  const data = {
    datasets: [
      {
        label: "TheDataset1",
        data: theDataArray1,
        backgroundColor: "#782D2D",
      },
    ],

const options = {
    scales: {
      x: {
        type: "time",
      },
      y: {
        beginAtZero: true,
      },
    },
  };

这就是我部署到 ReactDOM 的方式：

<Bubble options={options} data={data} />

当我从选项中删除时间类型时，错误消失，我在 X 轴上看到毫秒纪元。当我添加时间类型console.log 时会出现此错误，并且我的内容不会自行呈现。

>Error …

我正在尝试在reactjs 中显示条形图。我还下载了条形图chart.js和react-chartjs-2的依赖项

   "chart.js": "^3.6.0",
    "react": "^17.0.2",
    "react-chartjs-2": "^4.0.0",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",

但条形图未显示内容，我仍然收到错误

Reactjs

import React from "react";
import { Bar } from "react-chartjs-2";
const BarComponent = () => {
  return (
    <>
      <Bar
        width={600}
        height={400}
        data={{
          labels: ["January", "February", "March", "April", "May", "June"],
          datasets: [
            {
              label: "months",
              data: [12, 19, 3, 5, 2, 3],
              backgroundColor: "red",
            },
          ],
        }}
      />
    </>
  );
};
export default BarComponent;

我在这里可能会缺少什么？