株価のデータをAPIでとってきて描画するプログラムです。
ひとつのグラフ内に2つ以上折れ線データを表示したいです。
let StockSymbol = 'FB';で現在facebookのデータが表示されており、
もう一つのせるにはどのように変更すればよろしいでしょうか。
申し訳ありませんがご教授願います。
import React from 'react';
import Plot from 'react-plotly.js';
class Stock extends React.Component {
constructor(props) {
super(props);
this.state = {
stockChartXValues: [],
stockChartYValues: []
}
}
componentDidMount() {
this.fetchStock();
}
fetchStock() {
const pointerToThis = this;
console.log(pointerToThis);
const API_KEY = 'HGJWFG4N8AQ66ICD';
let StockSymbol = 'FB';
let API_Call = https://www.alphavantage.co/query?function=TIME_SERIES_DAILY_ADJUSTED&symbol=${StockSymbol}&outputsize=compact&apikey=${API_KEY}
;
let stockChartXValuesFunction = [];
let stockChartYValuesFunction = [];
fetch(API_Call) .then( function(response) { return response.json(); } ) .then( function(data) { console.log(data); for (var key in data['Time Series (Daily)']) { stockChartXValuesFunction.push(key); stockChartYValuesFunction.push(data['Time Series (Daily)'][key]['1. open']); } // console.log(stockChartXValuesFunction); pointerToThis.setState({ stockChartXValues: stockChartXValuesFunction, stockChartYValues: stockChartYValuesFunction }); } )
}
render() {
return (
<div>
<h1>Stock Market</h1>
<Plot
data={[
{
x: this.state.stockChartXValues,
y: this.state.stockChartYValues,
type: 'scatter',
mode: 'lines+markers',
marker: {color: 'red'},
}
]}
layout={{width: 720, height: 440, title: 'A Fancy Plot'}}
/>
</div>
)
}
}
あなたの回答
tips
プレビュー