标签: react-chartjs-2

我使用react-chartjs-2并尝试在y轴上创建虚线网格线

我尝试查看图表配置网站：https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

但找不到窍门

这是我的代码：

import { Chart } from 'react-chartjs-2';

import {Chart as ChartJS, registerables} from 'chart.js';
ChartJS.register(...registerables);

const data = {
    labels: ["Label1", "Label2", "Label3"],
    datasets: [{
        label: 'legend1',
        data: [12, 19, 3],
    },{
        label: 'legend2',
        data: [22, 9, 13],
      
    }]
};

const options = {
    scales: {
        y: {
            grid: {
                tickBorderDash: [4, 4],
                tickColor: '#000',
                tickWidth: 2,
                offset: true,
                drawTicks: true,
                drawOnChartArea: true
            },

            beginAtZero: true,
        },
        x: {
            display: false
        }
    },
};


const BarChart …

我正在尝试使用 创建一个简单的折线图react-chartjs-2，当我尝试设置 x 轴和 y 轴的最小/最大值时，这些值将不适用。

我已经尝试了以下所有方法options，但没有一个执行我指定的最小值和最大值：

第一次尝试：

{
    scales: {
        x: {
            max: 1000,
            min: 0
        },
        y: {
            max: 8,
            min: -3
        }
    }
}

第二次尝试：

{
    scales: {
        x: {
            ticks: {
                max: 1000,
                min: 0
            }
        },
        y: {
            ticks: {
                max: 8,
                min: -3
            }
        }
    }
}

第三次尝试：

{
    scales: {
        x: {
            suggestedMax: 1000,
            suggestedMin: 0
        },
        y: {
            suggestedMax: 8,
            suggestedMin: -3
        }
    }
}

但这些似乎都不起作用。我做错了什么/错过了什么？谢谢。

顺便说一句，我发现 Chart.js …

我无法将标签的位置更改为react-chart-js3 中的底部。它现在显示在图表的顶部。

import React, { useState, useEffect } from "react";
import { Doughnut, Line, Pie } from "react-chartjs-3";

export default function UserDashboard() {
  const DoughData = {
    labels: ["Red", "Green", "Yellow"],
    datasets: [
      {
        data: [300, 50, 100],
        backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
        hoverBackgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
      },
    ],
  };

  return (
    <div>
      <Doughnut data={DoughData} />
    </div>
  );
}

我正在尝试使用 Chart-js 和 React-chartjs-2 但显示以下错误：

编译失败。

./node_modules/react-chartjs-2/dist/index.modern.js
Module not found: Can't resolve 'chart.js/auto' in 'C:\Users\An\chart-react\project-folder\client\node_modules\react-chartjs-2\dist'

我的代码：

import React from "react";
import { Bar } from "react-chartjs-2";

function ChartData() {
  const data = {
    labels: ["1", "2", "3", "4", "5", "6"],
    datasets: [
      {
        label: "# of Votes",
        data: [12, 19, 3, 5, 2, 3],
        fill: false,
        backgroundColor: "rgb(255, 99, 132)",
        borderColor: "rgba(255, 99, 132, 0.2)",
      },
    ],
  };

  const options = {
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: …

我有一个使用“react-chartjs-2”库来显示一些数据的反应组件。带有数据的图表工作正常。我不能做的是使图表与“chartjs-plugin-zoom”插件一起使用。我不确定配置有什么问题。我在用：

“react-chartjs-2”：“^3.0.3”

“chartjs-plugin-zoom”：“^1.0.1”

import { Line } from 'react-chartjs-2'
import * as zoom from 'chartjs-plugin-zoom'

import classes from './Chart.module.css'

interface Chart {
  title: string
  labels: string[]
  datasets: any
}

const Chart: React.FC<Chart> = props => {
  const data = {
    title: props.title,
    labels: props.labels,
    datasets: props.datasets,
  }

  const options = {
    maintainAspectRatio: false,
    responsive: true,
    elements: {
      point: {
        radius: 0,
      },
      line: {
        borderWidth: 1.5,
      },
    },
    scales: {
      x: {
        ticks: {
          color: 'rgba( 0, 0, 1)',
        }, …

你好，

我按照这篇文章（Movingverticallinewhenhoveroverthechartusingchart.js）在我的图表上绘制了一条垂直线。

对于单个数据集，它工作得很好。

但对于多个数据集显示（y 轴上有堆叠选项），垂直线绘制在图表的工具提示上。

设置图表工具提示的 z 索引和垂直线都无法解决我的问题。因为我找不到任何财产可以做到这一点。

您有任何想法/建议来解决这个问题吗？

我使用react-chart-js 2 和chart-js ^2.9.4 作为对等依赖项。

我正在使用 React JS 构建一个 Web 应用程序。我的应用程序需要在仪表板上显示一些图表小部件。我正在使用 React JS Chart 2 包，https://www.npmjs.com/package/react-chartjs-2。我可以显示图表，但样式有问题。我试图隐藏背景中的网格线。现在看起来像这样。

这是我的代码。

const data = {
    labels: ['1', '2', '3', '4', '5', '6'],
    datasets: [
        {
            label: '# of Red Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: '#6886b4',
        },
        {
            label: '# of Blue Votes',
            data: [2, 3, 20, 5, 1, 4],
            backgroundColor: '#9db8d7',
        },
        {
            label: '# of Green Votes',
            data: [3, 10, 13, 15, 22, 30],
            backgroundColor: '#112c61',
        },
    ],
};

const options = …

将我的 react es6 comp 转换为打字稿时，我在第 16 行（<Line ...）的 IDE 中遇到了这个奇怪的打字稿错误。它是我使用 react-chartjs-2 的图表组件。

类型 '{ 数据：{ 标签：字符串 []; 中缺少属性 '类型' 数据集：{标签：字符串；数据：字符串[]；}[]; }; 高度：数量；宽度：数量；选项：{maintainAspectRatio：布尔值；比例：{ yAxes：{ 刻度：{ beginAtZero：布尔值；}; }[]; }; 传奇： { ...; }; }; }' 但在'Props'类型中是必需的。

import React from "react";
import { Line, defaults } from "react-chartjs-2";

defaults.plugins.tooltip.enabled = true;
defaults.plugins.legend.position = "bottom";

interface Props {
  currencyValues: string[],
  dateList: string[],
}

const LineGraph = ({ currencyValues, dateList }: Props) => {
  return (
    <div className="graphContainer">
      {currencyValues.length ? (
        <Line
          data={{
            labels: [...dateList], …

我正在使用react-chartjs-2，我希望标签是圆形的。我还希望带有标签的图表本身显示内联块，以便我得到类似这张照片的内容：[

但我实际得到的是这样的：

我的代码在这里：

  let _data = data;
                let _backgroundColor = [];
                let _borderColor = [];
                setDataShareholder(res);
                res.value.forEach(item => {
                    let rgb = `${random(0, 255)}, ${random(0, 255)}, ${random(0, 255)}`;
                    _backgroundColor.push(`rgba(${rgb}, 0.5)`)
                    _borderColor.push(`rgba(${rgb}, 1)`)
                });
                _data.labels = res.value.map(item => item.name)
                _data.datasets = [{
                    data: res.value.map(item => Number(item.violationsCount)),
                    backgroundColor: _backgroundColor,
                    borderColor: _borderColor,
                    borderWidth: 1
                }];
                setData(_data);

用法 ：

  import { Doughnut } from 'react-chartjs-2';

  <Doughnut data={data} />

如果可以，请你帮助我。谢谢

我已经安装了 React Chart JS 2 但仍然有这种错误

./node_modules/react-chartjs-2/dist/index.modern.js 找不到模块：无法解析“chart.js”

这是我的 package.json 文件

条形图.js

import React from "react";
import { Bar } from "react-chartjs-2";

const state = {
  labels: ["Nausea", "Fever", "Muscle Pain"],
  datasets: [
    {
      label: "1st Dose",
      backgroundColor: "rgba(75,192,192,1)",
      borderColor: "rgba(0,0,0,1)",
      borderWidth: 2,
      data: [65, 59, 80],
    },
    {
      label: "2st Dose",
      backgroundColor: "red",
      borderColor: "rgba(0,0,0,1)",
      borderWidth: 2,
      data: [30, 20, 10],
    },
  ],
};

export default class Barchart extends React.Component {
  render() {
    return (
      <div>
        <Bar
          data={state}
          options={{ …