标签: react-chartjs

有没有办法在不删除值的情况下从图表中删除初始垂直线？

这是我的选项的样子：

scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true,
                maxTicksLimit: 5,
                suggestedMax: maxValue
            }
        }],
        xAxes : [{
            categoryPercentage: 1.0,
            display : false, // set this to false to hide the labels under the bars
            gridLines: {
                display: false
            }
        }]
    },

我必须使用react-chartjs-2创建堆叠的条形图。

options : {
    maintainAspectRatio: false,
    tooltips: {
      mode: 'x-axis'
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        stacked: true
      }]
    }
  }

在Bar中堆积似乎无效。

我正在使用chartjs@2.4.0

我是本机反应的新手。我需要在我的应用程序中放置图表（条形，多线，多条形）。什么是最好的库，我希望条形图的边缘弯曲而不是常规样式。提前致谢。

我正在尝试使用 chart.js 的 react 包装器，但遇到了问题。当我尝试添加图表时，出现错误（“TypeError：无法读取未定义的属性 'defaults'”）

代码如下：

import React, { useState, useEffect } from 'react';
import api from '../../services/API';
import './Graph.css';
import { Line } from 'react-chartjs-2';

export default function Graph() {
    const [dataChart, setDataChart] = useState({ });

    useEffect(() => {
        const abortController = new AbortController();
        const signal = abortController.signal;
        const getData = async() => {
            let confirmedCases = [];
            let dateOfCases = [];
            await api.get('btt-prices', {signal: signal})
            .then ( resp => {
                for (const dataObj of resp.data ) { …

使用相应的代码沙箱代码 https://codesandbox.io/s/competent-jepsen-r7n3d?file=/src/Guage.js，我能够调出圆环图。

我需要一些帮助，将其制作为半圆形甜甜圈，并将文本放置在中心以及颜色内部，如下所示。

更新:: 添加了周长: 90 * Math.PI ，旋转: 69.9 * Math.PI 使其成为半圆。仍在尝试将文本放置在图表上并将文本放置在中心

提前致谢。

我正在制作一个饼图，并且正在努力显示每个切片的饼图数据值。因为我的应用程序是用React.js编写的，所以我使用react-chartjs-2。

我找到了针对chart.js的解决方案并尝试实现，但是不适用于react-chartjs-2。

如何在chart.js中显示每个切片的饼图数据值

如何为每个环节增加价值？任何帮助表示赞赏。

这是饼图的当前视图。

根据建议，我实施了chart.piecelabel.js。它还行不通..

我的密码

import {Pie} from 'react-chartjs-2';
import {pieceLabel} from 'chart.piecelabel.js';

export default class Categories extends React.Component{
constructor(props){
    super(props);
    this.state = {
        slideOpen : false,
        piData : piData
      }

this.handleClick = this.handleClick.bind(this);
this.update = this.update.bind(this);
this.doParentToggle = this.doParentToggle.bind(this);
}

doParentToggle(){


this.setState({
    piData : piData
  })
  console.log('-------')
  console.log('parentToggle' + piData )
  console.log('parentToggle' + piData2 )
  console.log('parentToggle' + piData3 )
  console.log('-------')
  this.update();
 }

handleClick(){
    this.setState({
        slideOpen : !this.state.slideOpen
    })
}

update() {
  var piData;
  this.setState({
    piData …

我发现这个有用的链接https://jsfiddle.net/5rz5r9ag/12/它展示了如何使用常规图表 js 获取 onclick 事件。将其与 React Chart JS 一起使用的问题是，我无法像该示例中那样访问 myLineChart 对象，因为这不是在 React 中制作折线图的方式。相反，我的反应目前在渲染函数中看起来更像这样：

return (
      <Line
      data={this.state.chartData}
      options={{
        onClick: function(evt) {
          var element = myLineChart.getElementAtEvent(evt);
          if(element.length > 0)
          {
            var ind = element[0]._index;
            if(confirm('Do you want to remove this point?')){
              data.datasets[0].data.splice(ind, 1);
              data.labels.splice(ind, 1);
              myLineChart.update(data);
              }
            }
        },
        ....
      />
);

我无法像在 jsfiddle 中那样访问 myLineChart，因此无法弄清楚如何为我的折线图中的点创建 onClickevent。

我想知道对于 react 类组件，我们有componentWillMount()生命周期方法，我们可以在加载组件之前执行任务。诸如调用后端并使用响应来显示该前端中的数据之类的任务。如果我想在功能组件中使用相同的东西怎么办？就像我使用了 react chartJS 一样，为此我想从后端响应中检索数据值，然后图表将根据这些数据填充。

我希望我能很好地解释问题陈述，如果没有，请询​​问任何信息。

我无法将标签的位置更改为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: …