This commit is contained in:
Jérôme Delacotte
2025-05-08 11:20:39 +02:00
parent 4d7c8d4ee9
commit e3e8c691f8
3 changed files with 63 additions and 27 deletions

View File

@@ -90,7 +90,14 @@ function renderChart(data, filename, create_columns) {
// }
const cols = Object.keys(data[0])
if (create_columns === true) {
string = "<ul class='indicators'>" + Object.keys(data[0]).map(cols => `<li><label><input id="${cols}" type="checkbox" value="${cols}" onchange="toggleIndicator(this)">${cols}</label></li>`).join('') + "</ul>"
// string = "<ul class='indicators'>" + Object.keys(data[0]).map(cols => `<li><label><input id="${cols}" type="checkbox" value="${cols}" onchange="toggleIndicator(this)">${cols}</label></li>`).join('') + "</ul>"
string = "<ul class='indicators'>" +
Object.keys(data[0])
.filter(key => !['date', 'open', 'close', 'volume', 'high', 'low'].includes(key))
.map(cols => `<li><label><input id="${cols}" type="checkbox" value="${cols}" onchange="toggleIndicator(this)">${cols}</label></li>`)
.join('') +
"</ul>";
const indicators = document.getElementById('indicators');
indicators.innerHTML = string
}
@@ -130,21 +137,36 @@ function renderChart(data, filename, create_columns) {
// df_ohlc = data
// df_ohlc['date'] = pd.to_datetime(data['date']).dt.strftime('%Y-%m-%d')
// df_ohlc = data[['date', 'open', 'close', 'low', 'high']]
// series.push({
// type: 'candlestick',
// data: {
// 'dates': df_ohlc['date'].tolist(),
// 'ohlc': df_ohlc[['open', 'close', 'low', 'high']].values.tolist()
// },
// itemStyle: {
// color: '#ec0000', // bougie haussière (fermée plus haut que ouverte)
// color0: '#00da3c', // bougie baissière
// borderColor: '#8A0000',
// borderColor0: '#008F28'
// }
// }
// )
const result = data.map(({ open, close, low, high }) => [open, close, low, high]);
series.push({
type: 'candlestick',
data: result,
itemStyle: {
color: '#ec0000', // bougie haussière (fermée plus haut que ouverte)
color0: '#00da3c', // bougie baissière
borderColor: '#8A0000',
borderColor0: '#008F28'
}
}
)
// console.log(result)
series.push({
name: 'Volume',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
itemStyle: {
color: '#7fbe9e'
},
emphasis: {
itemStyle: {
color: '#140'
}
},
data: data.map(d => d.volume)
})
for (var key in cols) {
var value = cols[key];
element=document.getElementById(value)
@@ -201,18 +223,37 @@ function renderChart(data, filename, create_columns) {
legend: {
data: cols, // Affiche les noms de chaque série avec leur couleur
},
xAxis: {
xAxis: [{
type: 'category',
data: data.map(d => {
const date = new Date(d.date);
return date.toLocaleDateString('fr-FR'); // ex : 07/05/2025
})
},
yAxis: {
type: 'value',
min: 'dataMin', // <-- commence à la plus petite valeur
max: 'dataMax' // <-- adapte aussi le maximum
},
{
type: 'category',
data: data.map(d => {
const date = new Date(d.date);
return date.toLocaleDateString('fr-FR'); // ex : 07/05/2025
}),
gridIndex: 1
}
],
yAxis: [{
type: 'value',
min: 'dataMin', // <-- commence à la plus petite valeur
max: 'dataMax' // <-- adapte aussi le maximum
},
{
gridIndex: 1,
min: 'dataMin', // <-- commence à la plus petite valeur
max: 'dataMax' // <-- adapte aussi le maximum
}
],
grid: [
{ left: '10%', right: '8%', height: '70%' },
{ left: '10%', right: '8%', top: '80%', height: '10%' }
],
series: series
}