如何在反应图表的两个轴上显示文本？

Question

我是 React 新手，我想创建一个图表来显示技能水平。我想在 X 轴和 Y 轴上显示文本的位置。我使用 React.js 创建了 bar/line 和饼图。目前我能够在 - 轴上显示数字，在 X 轴上显示文本。但是，有没有办法在两个轴上显示字符串（文本）？

我想在 Y 轴上显示 ["Expert"、"Advanced"、"Intermediate"、"Beginner"] 和在 X 轴上，我想显示 - ["HTML", "CSS", "React JS", "Javascript", "SQL","Drupa] .

我正在使用 'react-chartjs-2' 模块 (https://gor181.github.io/react-chartjs-2/)。

我创建了名为 'Chart.jsx' 的组件，其代码是：

import React, { Component } from "react";
import { Bar, Line, Pie } from "react-chartjs-2";
import "./Chart.css";

class Chart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      chartData: props.chartData

    };
  }

  static defaultProps = {
    displayTitle: true,
    DisplayLegend: true,
    LegendPosition: 'right',
    level:'Skills'
  };

  render() {
    return (
      <div className="chart">
        <Bar
          data={this.state.chartData}
          options={{
            title: {
              display: this.props.displayTitle,
              text: 'Skills I am proficient with '+this.props.level,
            },
            legend: {
              display: this.props.DisplayLegend,
              position: this.props.LegendPosition
            }
          }}
        />

        <Line
          data={this.state.chartData}
          options={{
            title: {
              display: this.props.displayTitle,
              text: 'Skills I am proficient with '+this.props.level,
            },
            legend: {
              display: this.props.DisplayLegend,
              position: this.props.LegendPosition
            }
          }}
        />

        <Pie
          data={this.state.chartData}
          options={{
            title: {
              display: this.props.displayTitle,
              text: 'Skills I am proficient with '+this.props.level,
            },
            legend: {
              display: this.props.DisplayLegend,
              position: this.props.LegendPosition
            }
          }}
        />
      </div>
    );
  }
}

export default Chart;

我创建了一个名为 'Skills.jsx' 的页面，其代码是：

import React, { Component } from "react";
import Navbar from "../components/Navbar.jsx";
import Footer from "../components/Footer.jsx";
import Jumbotron from "../components/Jumbotron.jsx";
import Chart from "../components/Chart.jsx";

class Skills extends Component {
  constructor() {
    super();
    this.state = {
      chartData: {}
    };
  }

  componentWillMount() {
    this.getChartData();
  }

  getChartData() {
    //Ajax calls here
    this.setState({
      chartData: {
        labels: [
          "HTML",
          "CSS",
          "React JS",
          "Javascript",
          "SQL",
          "Drupal"
        ],
        datasets: [
          {
           // labels: "Level",
           labels: ["Expert", "Advanced", "Intermediate", "Beginner"],
           data: [100, 90, 90, 70, 60, 50, 40, 30, 20, 10, 0],
            //labels: ["Expert", "Advanced", "Intermediate", "Beginner"],
            displays: ["Expert", "Advanced", "Intermediate", "Beginner"],
            backgroundColor: [
              "rgba(255, 99, 132, 0.6)",
              "rgba(54, 162, 235, 0.6)",
              "rgba(255, 206, 86, 0.6)",
              "rgba(75, 192, 192, 0.6)",
              "rgba(153, 102, 235, 0.6)",
              "rgba(255, 159, 132, 0.6)",
              "rgba(255, 99, 132, 0.6)"
            ]
          }
        ]
      }
    });
  }

  render() {
    return (
      <div>
        <Navbar />
        <Jumbotron title="welcome" subtitle="put something" />
        <div className="container">
          <h2>My Skills</h2>
          <p>Look, what I can do ..</p>
</div>
<div>
          <Chart chartData={this.state.chartData} lavel="HTML" LegendPosition="bottom" />
        </div>
        <Footer />
      </div>
    );
  }
}
export default Skills;

提前致谢！

Answer 1

您需要在选项

中使用scales title

options = {
  scales: {
    yAxes: [{
      scaleLabel: {
        display: true,
        labelString: 'Y text'
      }
    }],
    xAxes: [{
      scaleLabel: {
        display: true,
        labelString: 'X text'
      }
    }],
  }     
}

Answer 2

这里是我使用 'scales title' 和 'ticks' 在 React 图表的两个轴上显示文本的代码。希望能帮到别人！

在 'Chart.jsx' 文件上：

import React, { Component } from "react";
import { Bar, Line, Pie } from "react-chartjs-2";
import "./Chart.css";

class Chart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      chartData: props.data,
      chartOptions: props.options
    };
  }

  static defaultProps = {
    displayTitle: true,
    DisplayLegend: true,
    LegendPosition: "right",
    level: "Skills",

    data: {
      labels: ["HTML", "CSS", "Javascript", "Drupal", "ReactJS", "SQL"],
      datasets: [
        {
          data: [90, 90, 60, 70, 25, 65, 100, 55, 80, 40, 30, 40, 10, 0],
          backgroundColor: [
            "rgba(255, 99, 132, 0.6)",
            "rgba(54, 162, 235, 0.6)",
            "rgba(255, 206, 86, 0.6)",
            "rgba(75, 192, 192, 0.6)",
            "rgba(153, 102, 235, 0.6)",
            "rgba(255, 159, 132, 0.6)",
            "rgba(255, 99, 132, 0.6)"
          ]
          //     label: 2015
        }
        /* {
          data: [90, 90, 60, 70, 60, 70, 100, 55, 80, 40, 30, 20, 10, 0],
          backgroundColor: "#FF7",
          label: 2016
      }*/
      ]
    },

    options: {
      scales: {
        yAxes: [
          {
            ticks: {
              callback: function(label, index, labels) {
                console.log("label is: " + label);
                if (label > 75) {
                  return "Expert: " + label;
                } else if (label > 50) {
                  return "Advanced: " + label;
                } else if (label > 25) {
                  return "Intermediate: " + label;
                } else {
                  return "Beginner: " + label;
                }
                //                         return '$' + label;
              }
            }
          }
        ]
      }
    }
  };
  render() {
    return (
      <Bar data={this.state.chartData} options={this.state.chartOptions} />
    );
  }
}

export default Chart;

在 skills.jsx 页上-

import React, { Component } from "react";
import Navbar from "../components/Navbar.jsx";
import Footer from "../components/Footer.jsx";
import Jumbotron from "../components/Jumbotron.jsx";
import Chart from "../components/Chart.jsx";

class Skills extends Component {
  constructor() {
    super();
    this.state = {
      chartData: {}
    };
  }

  componentWillMount() {
    this.getChartData();
  }

  getChartData() {
    //Ajax calls here
    this.setState({
      chartData: {
        labels: [
          "HTML",
          "CSS",
          "React JS",
          "Javascript",
          "SQL",
          "Drupal"
        ],
        datasets: [
          {
           // labels: "Level",
           labels: ["Expert", "Advanced", "Intermediate", "Beginner"],
           data: [90, 90, 40, 40, 60, 80, 40, 30, 20, 10, 0, 100],
            //labels: ["Expert", "Advanced", "Intermediate", "Beginner"],
            displays: ["Expert", "Advanced", "Intermediate", "Beginner"],
            backgroundColor: [
              "rgba(255, 99, 132, 0.6)",
              "rgba(54, 162, 235, 0.6)",
              "rgba(255, 206, 86, 0.6)",
              "rgba(75, 192, 192, 0.6)",
              "rgba(153, 102, 235, 0.6)",
              "rgba(255, 159, 132, 0.6)",
              "rgba(255, 99, 132, 0.6)"
            ]
          }
        ]
      }
    });
  }

  render() {
    return (
      <div>
        <Navbar />
        <Jumbotron title="welcome" subtitle="put something" />
        <div className="container">
          <h2>My Skills</h2>
          <p>Look, what I can do ..</p>
</div>
<div>
          <Chart chartData={this.state.chartData} lavel="HTML" LegendPosition="bottom" />
        </div>
        <Footer />
      </div>
    );
  }
}
export default Skills;

如何在反应图表的两个轴上显示文本？

How to display text on both axis in react chart?

charts

linechart

bar-chart

pie-chart

reactjs