标签: react-chartjs

我有一个react组件Data，其中包括几个图表组件；BarChart LineChart...等等。

当Data组件开始渲染时，要花一些时间才能从API接收每个图表所需的数据，然后它开始响应并渲染所有图表组件。

我需要的是仅在我向下滚动并到达页面时才开始渲染每个图表。

有什么办法可以帮助我实现这一目标吗？

我做的数据可视化与react,react-chartjs-2和chart.js2.2.1版本.有一种可能是有关这个问题的答案在这里(寻找16年6月17日更新),但我不知道什么Chart.pluginService.register是或者是否是与之反应兼容.到目前为止,它对我没用.

我只是想在甜甜圈中放置一个标签,它是所有data子集的总和.我认为这是嵌套在甜甜圈图表选项中的某个地方,但我还没有找到它.

我想在我的项目中实现图表,我决定使用react-chart.js

我正在尝试在我的组件中添加一个示例,所以我添加了以下代码:

var MyChart = React.createClass({

  render: function() {
    console.log(chartData)
    return <LineChart data={chartData} options={null} width="600" height="250"/>
  }
});

module.exports = MyChart;

chartData是一个对象

我有一个错误:

core.js:64 Uncaught TypeError :(中间值)[chartType]不是函数

我也尝试了其他图表,但没有一个能够正常工作,所以我可能做错了什么,但我找不到什么

使用chartjs 2类型RADAR,如何删除网格线和网格线标签,使雷达图更类似于下面所需的雷达图？

谢谢

当前:

期望:

我正在使用react-chartJs-2库来显示图表。假设，用户点击条形图/甜甜圈图部分，他必须被重定向到特定页面。以下是我为 DoughnutChart 所做的代码：

1. ChartDisplay.jsx

<div className="DonutChartSection" >
   <Doughnut labelArray = {this.state.labelArr} DataArray = {this.state.DoughnutDataArr} colorArray = {this.state.DoughnutColorArr} title={"Employees"} />
</div>

2. Doughnut.jsx

   import React from 'react';
   import {Doughnut} from 'react-chartjs-2';
   
   Chart.defaults.global.defaultFontStyle = 'Bold';  
   Chart.defaults.global.defaultLegendPosition = 'left';
   
   export default class DoughnutChartView extends React.Component{
     constructor(props) {
        super(props);
        this.state = { };
     }
   
     render() {
       let data = {
           labels: this.props.labelArray,
           datasets: [{
               data: this.props.DataArray,
               backgroundColor: this.props.colorArray,
               hoverBackgroundColor: this.props.colorArray,
           }]
       } 
       return (
         <div>
         <span className="titleName" >{this.props.title}</span> 
           <Doughnut data={data}  />
         </div>
       ); …

   Run Code Online (Sandbox Code Playgroud)

我正在使用反应和打字稿。我收到类型错误。我该如何解决？

位置是字符串类型。 http://www.chartjs.org/docs/latest/configuration/legend.html

[反应+ts+react-chartjs-2]

import React from 'react';
import {Pie} from 'react-chartjs-2';

export default class Chart extends React.Component{
  constructor(props) {
     super(props);
     this.state = { };
  }

  render() {
    let options = {
      legend: {
        position:'bottom',
      }
    };

    return (
      <Pie options={options}  />
    );
  }
}

[错误。] 属性“选项”的类型不兼容。

Type '{ legend: { position: string; }; }' is not assignable to type 'ChartOptions'.
Types of property 'legend' are incompatible.
Type '{ position: string; }' is not assignable to type 'ChartLegendOptions'.
Types of …

我正在尝试使用react和gatsbyjs制作一个甜甜圈图。图表工作正常，但我无法使用div的整个宽度。对于保留的区域，它显示的太小。

render (){
    return (

            <Doughnut 
                data={this.state.chartData}
                options={{
                    padding:"0px",
                    responsive:false,
                    maintainAspectRatio:false,
                    defaultFontSize:"14px",
                    width:"400",
                    height:"400",
                    legend:{
                        display:false,
                    },
                    plugins:{
                        datalabels: {
                            color:'#000000',
                            anchor: "start",
                            align:"end",
                            formatter: function(value, context) {
                                    return context.chart.data.labels[context.dataIndex];
            }
                        }
                    } 
                }}
                />


        )

}

我正在使用react-chart-js（https://github.com/reactchartjs/react-chartjs-2/blob/react16/example/src/charts/Horizo ​​ntalBar.js）中的水平条，如下所示，

  const data = {
    label: ["graph"],
    datasets: [
      {
        label: "A",
        backgroundColor: "red",
        data: [50],
      },
      {
        label: "B",
        backgroundColor: "yellow",
        data: [10],
      },
    ],
  };

  const chartOptions = {
    scales: {
      xAxes: [
        {
          stacked: true,
          barPercentage: 0.2,
        },
      ],
      yAxes: [
        {
          stacked: true,
          barPercentage: 0.2,
        },
      ],
    },
  };

和

<div>
  <HorizontalBar data={data} options={chartOptions}/>
</div>

我尝试直接将高度应用于 div 或水平栏以限制画布的放大，但它并不能解决问题。是否可以分别向图表画布提供高度和宽度。

我正在尝试使用带有react-chartjs 圆环图的插件。为了使用该插件（https://www.npmjs.com/package/@scottalan/chartjs-plugin-doughnutlabel），我必须将选项传递给组件。但是当我尝试传递选项时，出现类型错误

Type '{ doughnutlabel: { labels: { text: string; font: { size: string; family: string; style: string; weight: string; }; color: string; }[]; }; }' is not assignable to type '_DeepPartialObject<PluginOptionsByType<keyof ChartTypeRegistry>>'.
  Object literal may only specify known properties, and 'doughnutlabel' does not exist in type '_DeepPartialObject<PluginOptionsByType<keyof ChartTypeRegistry>>'.

我最好的猜测是，这ChartOptions是分配给我的错误类型options，因为我得到了相同的错误事件，而没有尝试将插件与const options: ChartOptions = {}. 我的完整代码如下，感谢任何帮助。

Type '{ doughnutlabel: { labels: { text: string; font: { size: string; family: string; style: string; weight: …

我目前在项目中使用chart.js，不得不说这是一个了不起的库。但是最近我意识到我还需要一个“树形图”，但在他们的网站上找不到。有没有人设法使用chart.js实现树形图示例？