我很反应，我想创建一个图表来显示技能水平。我想在X轴和Y轴上显示文字的地方。我使用React.js创建了条形图/折线图和饼图。目前，我能够在X轴上显示轴上的数字和文本。但是，有没有办法在两个轴上显示字符串（文本）？
我想在Y轴和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;
提前谢谢！
答案 0 :(得分：2)
您需要在选项
中使用scales titleoptions = {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Y text'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'X text'
}
}],
}
}
答案 1 :(得分：0)
这里，我的代码是使用'scale title'和'ticks'在反应图表的两个轴上显示文本。希望能帮到别人！
在'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;
和技巧.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;