Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit82e52f8

Browse files
committed
add data-parsing demos for column and candlestick
1 parent1bd5a34 commit82e52f8

17 files changed

+1424
-2126
lines changed
Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
<!DOCTYPE html>
2+
<htmllang="en">
3+
<head>
4+
<metacharset="UTF-8"/>
5+
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
6+
<metahttp-equiv="X-UA-Compatible"content="ie=edge"/>
7+
<title>Candlestick - Parsing Data</title>
8+
9+
<linkhref="../../assets/styles.css"rel="stylesheet"/>
10+
11+
<style>
12+
13+
#chart {
14+
max-width:650px;
15+
margin:35px auto;
16+
}
17+
18+
</style>
19+
20+
<script>
21+
window.Promise||
22+
document.write(
23+
'<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
24+
)
25+
window.Promise||
26+
document.write(
27+
'<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
28+
)
29+
window.Promise||
30+
document.write(
31+
'<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
32+
)
33+
</script>
34+
35+
36+
<scriptsrc="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js"></script>
37+
<scriptsrc="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
38+
<scriptsrc="https://cdn.jsdelivr.net/npm/prop-types@15.8.1/prop-types.min.js"></script>
39+
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
40+
<scriptsrc="../../../dist/apexcharts.js"></script>
41+
<scriptsrc="https://cdn.jsdelivr.net/npm/react-apexcharts@1.7.0/dist/react-apexcharts.iife.min.js"></script>
42+
43+
44+
<script>
45+
// Replace Math.random() with a pseudo-random number generator to get reproducible results in e2e tests
46+
// Based on https://gist.github.com/blixt/f17b47c62508be59987b
47+
var_seed=42;
48+
Math.random=function(){
49+
_seed=_seed*16807%2147483647;
50+
return(_seed-1)/2147483646;
51+
};
52+
</script>
53+
54+
<script>
55+
functiongenerateDateRange(days,startDate=newDate()){
56+
constdates=[];
57+
constcurrentDate=newDate(startDate);
58+
59+
currentDate.setDate(currentDate.getDate()-days+1);
60+
61+
for(leti=0;i<days;i++){
62+
dates.push(newDate(currentDate).toISOString());
63+
currentDate.setDate(currentDate.getDate()+1);
64+
}
65+
66+
returndates;
67+
}
68+
69+
functiongetRandomRecentDate(){
70+
conststart2025=newDate('2025-01-01');
71+
constnow=newDate();
72+
consttimeDiff=now.getTime()-start2025.getTime();
73+
constrandomTime=Math.random()*timeDiff;
74+
75+
returnnewDate(start2025.getTime()+randomTime);
76+
}
77+
78+
functiongeneratePriceChange(currentPrice,minPrice,maxPrice,volatility=0.03){
79+
constchangePercent=(Math.random()-0.5)*2*volatility;
80+
letnewPrice=currentPrice*(1+changePercent);
81+
82+
newPrice=Math.max(minPrice,Math.min(maxPrice,newPrice));
83+
84+
returnMath.round(newPrice*100)/100;
85+
}
86+
87+
functiongenerateHighLow(open,close,minPrice,maxPrice){
88+
constmin=Math.min(open,close);
89+
constmax=Math.max(open,close);
90+
91+
constvolatilityRange=Math.max(1,(max-min)*2);
92+
93+
constlow=Math.max(
94+
minPrice,
95+
min-Math.random()*volatilityRange*0.5
96+
);
97+
98+
consthigh=Math.min(
99+
maxPrice,
100+
max+Math.random()*volatilityRange*0.5
101+
);
102+
103+
return{
104+
high:Math.round(high*100)/100,
105+
low:Math.round(low*100)/100
106+
};
107+
}
108+
109+
functiongenerateSingleCandlestick(date,previousClose,minPrice=120,maxPrice=180){
110+
constgapPercent=(Math.random()-0.5)*0.02;
111+
letopen=previousClose*(1+gapPercent);
112+
open=Math.max(minPrice,Math.min(maxPrice,open));
113+
open=Math.round(open*100)/100;
114+
115+
constclose=generatePriceChange(open,minPrice,maxPrice,0.04);
116+
const{ high, low}=generateHighLow(open,close,minPrice,maxPrice);
117+
118+
return{
119+
date:date,
120+
open:open,
121+
high:high,
122+
low:low,
123+
close:close
124+
};
125+
}
126+
127+
functiongenerateCandlestickData(days,options={}){
128+
const{
129+
startingPrice=150,
130+
minPrice=120,
131+
maxPrice=180,
132+
startDate=getRandomRecentDate()
133+
}=options;
134+
135+
if(!Number.isInteger(days)||days<=0){
136+
thrownewError('Days must be a positive integer');
137+
}
138+
139+
if(startingPrice<minPrice||startingPrice>maxPrice){
140+
thrownewError('Starting price must be within min and max price range');
141+
}
142+
143+
constdates=generateDateRange(days,startDate);
144+
constcandlesticks=[];
145+
letpreviousClose=startingPrice;
146+
147+
for(constdateofdates){
148+
constcandlestick=generateSingleCandlestick(date,previousClose,minPrice,maxPrice);
149+
candlesticks.push(candlestick);
150+
previousClose=candlestick.close;
151+
}
152+
153+
returncandlesticks;
154+
}
155+
156+
conststockData=generateCandlestickData(30);
157+
</script>
158+
</head>
159+
160+
<body>
161+
162+
<divid="app"></div>
163+
164+
<divid="html">
165+
&lt;div id=&quot;chart&quot;&gt;
166+
&lt;ReactApexChart options={state.options} series={state.series} type=&quot;candlestick&quot; height={350} /&gt;
167+
&lt;/div&gt;
168+
</div>
169+
170+
<scripttype="text/babel">
171+
constApexChart=()=>{
172+
const[state,setState]=React.useState({
173+
174+
series:[{
175+
data:stockData,
176+
parsing:{
177+
x:"date",
178+
y:["open","high","low","close"]
179+
}
180+
}],
181+
options:{
182+
chart:{
183+
type:'candlestick',
184+
height:350
185+
},
186+
xaxis:{
187+
type:"datetime"
188+
},
189+
},
190+
191+
192+
});
193+
194+
195+
196+
return(
197+
<div>
198+
<divid="chart">
199+
<ReactApexChartoptions={state.options}series={state.series}type="candlestick"height={350}/>
200+
</div>
201+
<divid="html-dist"></div>
202+
</div>
203+
);
204+
}
205+
206+
constdomContainer=document.querySelector('#app');
207+
ReactDOM.render(<ApexChart/>,domContainer);
208+
</script>
209+
210+
211+
</body>
212+
</html>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp