reactjs - 如何在 react 图表的两个轴上显示文本？

Question

我刚开始 react ，我想创建一个图表来显示技能水平。我想在 X 轴和 Y 轴上显示文本的地方。我使用 React.js 创建了条形图/折线图和饼图。目前我能够在 X 轴上显示数字和文本。但是，有没有办法在两个轴上显示字符串(文本)？

我想显示 [“专家”、“高级”、“中级”、“初学者”] 在 Y 轴和 X 轴上，我想显示 - [“HTML”、“CSS”、“React JS”、“Javascript”、“SQL”、“德鲁巴”] 。

我正在使用“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'
      }
    }],
  }     
}