reactjs中的饼图

Question

我正在尝试在我的 Web 应用程序中实现饼图，我发现这是一个很好的来源。

https://github.com/reactjs/react-chartjs

但它没有提供给 chartData 和 chartOptions 以使其工作的方法。我该怎么做？

我的代码

import React, {Component} from 'react';
var LineChart = require("react-chartjs").Line;

class PieChart extends Component {
    constructor() {
        super();
    }

    render() {
        return (
            <div className="">
                <LineChart data={chartData} options={chartOptions} width="600" height="250"/>
            </div>
        );
    }
}
export default PieChart;

我收到这些错误

12:34  error    'chartData' is not defined     no-undef
12:54  error    'chartOptions' is not defined  no-undef

Answer 1

您需要初始化 chatData 和 chartOptions，并且 react-chartjs 依赖于 chartjs，因此您也需要安装它

npm install --save chart.js@^1.1.1

代码

import React, {Component} from 'react';
import Chartjs from 'chart.js'
var LineChart = require("react-chartjs").Line;

class PieChart extends Component {
    constructor() {
        super();
    }

    render() {
       var chartOptions: {


     // Boolean - If we should show the scale at all


    showScale: true,
    // Boolean - Whether to show a dot for each point
    pointDot: true,
    showLines: false,
    title: {
        display: true,
        text: 'Chart.js Line Chart'
    },
    legend: {
        display: true,
        labels: {
           boxWidth: 50,
           fontSize: 10,
           fontColor: '#bbb',
           padding: 5,

        }
    }
    }

    var chartData= {
        labels: ['1', '2', '3', '4'],
        datasets: [
            {
                label: 'Current lag',
                fill: false,
                lineTension: 0.1,
                backgroundColor: "rgba(75,192,192,0.4)",
                borderColor: "rgba(75,192,192,1)",
                borderCapStyle: 'butt',
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                data: [50, 35, 60, 67]
            }
        ]
    }


        return (
            <div className="">
                <LineChart data={chartData} options={chartOptions} width="600" height="250"/>
            </div>
        );
    }
}
export default PieChart;

Answer 2

我在我的项目中使用了 chart.js，而且效果非常好。你需要通过 npm

安装 chart.js 模块

npm install chart.js --save

然后导入到你的组件文件

import Chart from 'chart.js'

并且它在其函数中提供了 'data' 字段供您填充数据。

let myDoughnutChart = new Chart(document.getElementById('my_chart'), {
  type: 'pie',
  data: {
    datasets: [{
      data: [percentage, 100 - percentage],
      backgroundColor: ['rgba(82,199,197,1)', '#E5E5E5'],
      borderWidth: 1
    }]
  },
  options: {
    tooltips: {
      enabled: false
    }
  }
});

有关详细信息，请查看他们的文档 (http://www.chartjs.org/docs/)

Answer 3

// 开发商：Geet Colony

npm install chart.js --save
----------------------------------------------------------------
import React,{Component} from 'react';
import Chart from "chart.js";


class GraphChart extends Component {
    constructor(props) {
        super(props);
        this.myRef = React.createRef();

      }

      componentDidMount() {
        const ctx = this.ctx;

        new Chart(ctx, {
          type: "bar",
          data: {
            labels: ["Red", "Blue", "Yellow"],
            datasets: [
              {
                label: "# of Likes",
                data: [12, 19, 3],
                backgroundColor: [
                  "rgba(255, 99, 132, 0.2)",
                  "rgba(54, 162, 235, 0.2)",
                  "rgba(255, 206, 86, 0.2)"
                ]
              },
              {
                label: "# of Likes",
                data: [-12, -19, -3],
                backgroundColor: [
                  "rgba(255, 99, 132, 0.2)",
                  "rgba(54, 162, 235, 0.2)",
                  "rgba(255, 206, 86, 0.2)"
                ]
              }
            ]
          }
        });
      }

      render() {

        return (
            <div>
                <canvas width='800' height='300' ref={ctx => (this.ctx = ctx)}/>
            </div>
        )
    }
}
export default GraphChart;

reactjs中的饼图

Pie charts in reactjs

charts

pie-chart

reactjs