我正在做一个任务，我在 ReactJS 应用程序中使用 highcharts。当我如下硬编码“数据”的值时，折线图显示
data : [10,20,30,40]
但是，如果我通过代码创建数据prices.push(value)然后分配data : [this.prices]它不起作用。
请注意，在调试时，我看到所有值都包含在价格中。可能是什么问题呢？
render() {
const options = {
title: {
text: 'Historical Prices Chart',
},
xAxis: {
categories: ['February 1st 2018','January 31st 2018','January 30th 2018','January 29th 2018'],
},
yAxis: {
title: {
text: 'Prices',
},
},
chart: {
type: 'line',
},
series: [
{
name: 'Pulses',
data: this.prices,
}
],
};
console.log(this.prices)给我 -
[10,20,30,40]
完整代码是（它是一个获取加密货币历史价格的 React 组件）-
class History extends Component {
constructor () {
super();
this.state = {
todayprice: {},
yesterdayprice: {},
twodaysprice: {},
threedaysprice: {},
fourdaysprice: {}
};
this.getBTCPrices = this.getBTCPrices.bind(this);
this.getETHPrices = this.getETHPrices.bind(this);
this.getLTCPrices = this.getLTCPrices.bind(this);
this.xAxisdates=[];
this.btcPastPrices=[];
this.ethPastPrices=[];
this.ltcPastPrices=[];
}
// This function gets the ETH price for a specific timestamp/date. The date is passed in as an argument
getETHPrices (date) {
return axios.get('https://min-api.cryptocompare.com/data/pricehistorical?fsym=ETH&tsyms=INR&ts=' + date);
}
// This function gets the BTC price for a specific timestamp/date. The date is passed in as an argument
getBTCPrices (date) {
return axios.get('https://min-api.cryptocompare.com/data/pricehistorical?fsym=BTC&tsyms=INR&ts=' + date);
}
// This function gets the LTC price for a specific timestamp/date. The date is passed in as an argument
getLTCPrices (date) {
return axios.get('https://min-api.cryptocompare.com/data/pricehistorical?fsym=LTC&tsyms=INR&ts=' + date);
}
// This function gets the prices for the current date.
getTodayPrice () {
// Get today's date in timestamp
let t = moment().unix()
// axios.all is used to make concurrent API requests. These requests were the functions we first created and they accept an argument of the date required.
axios.all([this.getETHPrices(t), this.getBTCPrices(t), this.getLTCPrices(t)])
.then(axios.spread((eth, btc, ltc) => {
let f = {
date: moment.unix(t).format("MMMM Do YYYY"),
eth: eth.data.ETH.INR,
btc: btc.data.BTC.INR,
ltc: ltc.data.LTC.INR
}
// Set the state of todayprice to the content of the object f
this.setState({ todayprice: f });
this.xAxisdates.push(f.date);
this.btcPastPrices.push(f.btc);
this.ethPastPrices.push(f.eth);
this.ltcPastPrices.push(f.ltc);
}));
}
// This function gets the prices for the yesterday.
getYesterdayPrice () {
// Get yesterday's date in timestamp
let t = moment().subtract(1, 'days').unix();
// axios.all is used to make concurrent API requests. These requests were the functions we first created and they accept an argument of the date required.
axios.all([this.getETHPrices(t), this.getBTCPrices(t), this.getLTCPrices(t)])
.then(axios.spread((eth, btc, ltc) => {
let f = {
date: moment.unix(t).format("MMMM Do YYYY"),
eth: eth.data.ETH.INR,
btc: btc.data.BTC.INR,
ltc: ltc.data.LTC.INR
}
// Set the state of yesterdayprice to the content of the object f
this.setState({ yesterdayprice: f });
this.xAxisdates.push(f.date);
this.btcPastPrices.push(f.btc);
this.ethPastPrices.push(f.eth);
this.ltcPastPrices.push(f.ltc);
}));
}
// This function gets the prices for the two days ago.
getTwoDaysPrice () {
// Get the date for two days ago in timestamp
let t = moment().subtract(2, 'days').unix();
// axios.all is used to make concurrent API requests. These requests were the functions we first created and they accept an argument of the date required.
axios.all([this.getETHPrices(t), this.getBTCPrices(t), this.getLTCPrices(t)])
.then(axios.spread((eth, btc, ltc) => {
let f = {
date: moment.unix(t).format("MMMM Do YYYY"),
eth: eth.data.ETH.INR,
btc: btc.data.BTC.INR,
ltc: ltc.data.LTC.INR
}
// Set the state of twodaysprice to the content of the object f
this.setState({ twodaysprice: f });
this.xAxisdates.push(f.date);
this.btcPastPrices.push(f.btc);
this.ethPastPrices.push(f.eth);
this.ltcPastPrices.push(f.ltc);
}));
}
// This function gets the prices for the three days ago.
getThreeDaysPrice () {
// Get the date for three days ago in timestamp
let t = moment().subtract(3, 'days').unix();
// axios.all is used to make concurrent API requests. These requests were the functions we first created and they accept an argument of the date required.
axios.all([this.getETHPrices(t), this.getBTCPrices(t), this.getLTCPrices(t)])
.then(axios.spread((eth, btc, ltc) => {
let f = {
date: moment.unix(t).format("MMMM Do YYYY"),
eth: eth.data.ETH.INR,
btc: btc.data.BTC.INR,
ltc: ltc.data.LTC.INR
}
// Set the state of threedaysprice to the content of the object f
this.setState({ threedaysprice: f });
this.xAxisdates.push(f.date);
this.btcPastPrices.push(f.btc);
this.ethPastPrices.push(f.eth);
this.ltcPastPrices.push(f.ltc);
}));
}
// This function gets the prices for the four days ago.
getFourDaysPrice () {
// Get the date for four days ago in timestamp
let t = moment().subtract(4, 'days').unix();
// axios.all is used to make concurrent API requests. These requests were the functions we first created and they accept an argument of the date required.
axios.all([this.getETHPrices(t), this.getBTCPrices(t), this.getLTCPrices(t)])
.then(axios.spread((eth, btc, ltc) => {
let f = {
date: moment.unix(t).format("MMMM Do YYYY"),
eth: eth.data.ETH.INR,
btc: btc.data.BTC.INR,
ltc: ltc.data.LTC.INR
}
// Set the state of fourdaysprice to the content of the object f
this.setState({ fourdaysprice: f });
this.xAxisdates.push(f.date);
this.btcPastPrices.push(f.btc);
this.ethPastPrices.push(f.eth);
this.ltcPastPrices.push(f.ltc);
}));
}
// This is called when an instance of a component is being created and inserted into the DOM.
componentWillMount () {
this.getTodayPrice();
this.getYesterdayPrice();
this.getTwoDaysPrice();
this.getThreeDaysPrice();
this.getFourDaysPrice();
}
render() {
const options = {
title: {
text: 'Historical Prices Chart',
},
xAxis: {
categories: ['February 1st 2018','January 31st 2018','January 30th 2018','January 29th 2018'],
},
yAxis: {
title: {
text: 'Prices',
},
},
chart: {
type: 'line',
},
series: [
{
name: 'BTC',
data: this.btcPastPrices,
},
{
name: 'ETH',
data: [20,10,30,40],
},
{
name: 'LTC',
data: [5,28,10,20],
},
],
};
return (
// JSX Code
<div className="history--section container">
<h2>History (Past 5 days)</h2>
<div className="history--section__box">
<div className="history--section__box__inner">
<h4>{this.state.todayprice.date}</h4>
<div className="columns">
<div className="column">
<p>1 BTC = INR{this.state.todayprice.btc}</p>
</div>
<div className="column">
<p>1 ETH = INR{this.state.todayprice.eth}</p>
</div>
<div className="column">
<p>1 LTC = INR{this.state.todayprice.ltc}</p>
</div>
</div>
</div>
<div className="history--section__box__inner">
<h4>{this.state.yesterdayprice.date}</h4>
<div className="columns">
<div className="column">
<p>1 BTC = INR{this.state.yesterdayprice.btc}</p>
</div>
<div className="column">
<p>1 ETH = INR{this.state.yesterdayprice.eth}</p>
</div>
<div className="column">
<p>1 LTC = INR{this.state.yesterdayprice.ltc}</p>
</div>
</div>
</div>
<div className="history--section__box__inner">
<h4>{this.state.twodaysprice.date}</h4>
<div className="columns">
<div className="column">
<p>1 BTC = INR{this.state.twodaysprice.btc}</p>
</div>
<div className="column">
<p>1 ETH = INR{this.state.twodaysprice.eth}</p>
</div>
<div className="column">
<p>1 LTC = INR{this.state.twodaysprice.ltc}</p>
</div>
</div>
</div>
<div className="history--section__box__inner">
<h4>{this.state.threedaysprice.date}</h4>
<div className="columns">
<div className="column">
<p>1 BTC = INR{this.state.threedaysprice.btc}</p>
</div>
<div className="column">
<p>1 ETH = INR{this.state.threedaysprice.eth}</p>
</div>
<div className="column">
<p>1 LTC = INR{this.state.threedaysprice.ltc}</p>
</div>
</div>
</div>
<div className="history--section__box__inner">
<h4>{this.state.fourdaysprice.date}</h4>
<div className="columns">
<div className="column">
<p>1 BTC = INR{this.state.fourdaysprice.btc}</p>
</div>
<div className="column">
<p>1 ETH = INR{this.state.fourdaysprice.eth}</p>
</div>
<div className="column">
<p>1 LTC = INR{this.state.fourdaysprice.ltc}</p>
</div>
</div>
</div>
</div>
<p>{this.xAxisdates}</p>
<p>{this.btcPastPrices}</p>
<p>{this.ethPastPrices}</p>
<p>{this.ltcPastPrices}</p>
<Chart options={options} />
</div>
);
}
}
export default History;