1
私はリアクションチャートを使用しています。折れ線グラフがあり、2セットのデータを切り替えることができるようにしたいと考えています。 タグを使用してドロップダウンを行いました。実際の例を見てみましょう： Reactでselectタグを使用し、状態と連携してReact Chartでデータセットを切り替える
https://codesandbox.io/s/mm2vnz6869
がドロップダウンに移動し、「収益」に切り替えます。必要に応じて他のデータセットに切り替わります。しかし今、 "支出"に戻ってみてください。それは動作しないことに注意してください。 なぜですか？誰かが私の論理を見て、私が間違っていることを教えてもらえますか？ありがとう。import React, { Component } from 'react';
import { render } from 'react-dom';
import { Line } from 'react-chartjs-2';
let lineData;
const lineDataSpend = {
labels: ['March', 'April', 'May', 'June', 'July', 'August', 'September'],
datasets: [
{
label: 'Spend - Account 1',
fill: false,
lineTension: 0.1,
backgroundColor: 'green',
borderColor: 'green',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'green',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: 'Spend - Account 2',
fill: false,
lineTension: 0.1,
backgroundColor: 'blue',
borderColor: 'blue',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'blue',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [25, 5, 8, 53, 96, 35, 20]
}
]
};
const lineDataRev = {
labels: ['March', 'April', 'May', 'June', 'July', 'August', 'September'],
datasets: [
{
label: 'Revenue - Account 1',
fill: false,
lineTension: 0.1,
backgroundColor: 'red',
borderColor: 'red',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'red',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [27, 9, 37, 31, 102, 42, 19]
},
{
label: 'Revenue - Account 2',
fill: false,
lineTension: 0.1,
backgroundColor: 'yellow',
borderColor: 'yellow',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'yellow',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [1, 29, 4, 112, 26, 49, 81]
}
]
};
lineData = lineDataSpend; //init the graph data to 'Spend'
class App extends Component {
constructor(props) {
super(props);
this.changeMetric = this.changeMetric.bind(this);
this.state = {
selectedMetric: 'Spend'
};
}
changeMetric(event) {
this.setState({
selectedMetric: event.target.value
});
switch (event.target.value) {
case 'Spend':
lineData = lineDataSpend;
break;
case 'Revenue':
lineData = lineDataRev;
break;
default:
}
}
render() {
const lineOptions = {
title: {
display: true,
text: 'Account 1 vs Account 2'
},
tooltips: {
enabled: true,
callbacks: {
label: function (value, data) {
console.log('data', data)
const currentLabel = data.datasets[value.datasetIndex].label;
return currentLabel + ': ' + '$' + value.yLabel;
}
}
},
legend: {
display: true
},
maintainAspectRatio: true,
scales: {
yAxes: [{
ticks: {
callback: function (value) {
return '$' + parseFloat(value.toFixed(2));
}
},
stacked: false,
gridLines: {
display: true,
color: "rgba(255,99,132,0.2)"
}
}],
xAxes: [{
gridLines: {
display: false
}
}]
}
};
return (
<div>
<select onChange={this.changeMetric} value={this.state.selectedMetric}>
<option value="Spend">Spend</option>
<option value="Revenue">Revenue</option>
</select>
<div className="row">
<div className="col-xl-10">
<div className="card">
<div className="card-header">
<i className="fa fa-align-justify" />
</div>
<div className="card-block">
<Line data={lineData} options={lineOptions} />
</div>
</div>
</div>
</div>
</div>
)
}
}
render(<App />, document.body);