javascript - Javascript 从 JSON 伪造数据数组并使用 ApexChart 将它们加载到图表中
问题描述
我将尝试用欧元的比特币价值制作图表。数据从 JSON 下载并转换为伪造 Apexchart 系列数据 (ApexData['xbtToEuro']) 和列出日期的数组。我不明白为什么它不起作用。我的控制台说没关系，但在我的图表中，我只有第一个值。
我做错了什么？
<HTML>
<HEAD>
<TITLE>test</TITLE>
</HEAD>
<BODY>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="myChart"></div>
<script type="text/javascript">
/* PARTIE AJAX */
var dataApex = [];
var list_date = [];
var catalogue = [];
var series_forged = [];
loadData();
function loadData() {
// on vérifie si le catalogue a déjà été chargé pour n'exécuter la requête AJAX
// qu'une seule fois
if (catalogue.length === 0) {
// on récupère un objet XMLHttpRequest
var xhr = new XMLHttpRequest();
// on réagit à l'événement onreadystatechange
xhr.onreadystatechange = function() {
// test du statut de retour de la requête AJAX
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
// on désérialise le catalogue et on le sauvegarde dans une variable
catalogue = JSON.parse(xhr.responseText);
// init sub array
Object.keys(catalogue).forEach(function(date_day){
Object.keys(catalogue[date_day]).forEach(function(hours){
list_date.push(new Date(hours * 1000));
Object.keys(catalogue[date_day][hours]).forEach(function(monneys){
var value = catalogue[date_day][hours][monneys];
if (dataApex.indexOf(monneys) === -1) {
dataApex[monneys] = new Array();
}
})
})
});
moulinette();
}
}
var d = new Date();
var $month = d.getMonth();
var $years = d.getFullYear();
// la requête AJAX : lecture de data.json
xhr.open("GET", "../data/monney_market/" + $years + "_" + ( $month + 1 * 1) + "_monney.json", true);
xhr.send();
} else {
// init sub array
Object.keys(catalogue).forEach(function(date_day){
Object.keys(catalogue[date_day]).forEach(function(hours){
list_date.push(new Date(hours * 1000));
Object.keys(catalogue[date_day][hours]).forEach(function(monneys){
var value = catalogue[date_day][hours][monneys];
if (dataApex.indexOf(monneys) === -1) {
dataApex[monneys] = new Array();
}
})
})
});
moulinette();
}
}
/* FORGE - transform raw JSON in data available by ApexChart */
function moulinette () {
Object.keys(catalogue).forEach(function(date_day){
Object.keys(catalogue[date_day]).forEach(function(hours){
Object.keys(catalogue[date_day][hours]).forEach(function(monneys){
var value = catalogue[date_day][hours][monneys];
dataApex[monneys].push(value);
})
})
});
console.log(dataApex["xbtToEuro"]);
console.log(list_date);
series_forged = new Array;
series_forged.push({
name: "xbtToEuro",
data: dataApex["xbtToEuro"], // i push my array forged with data here
type: "line"
});
loadChart("#myChart");
}
function loadChart ($idCSS){
/* https://apexcharts.com/docs/update-charts-from-json-api-ajax/
*/
let options = {
noData: {
text: 'Loading...'
},
series: series_forged,
chart: {
height: 350,
type: 'line',
},
stroke: {
width: [0, 4],
curve: 'smooth', /* smooth|straight|stepline */
},
title: {
text: 'Xbt in Euro'
},
dataLabels: {
enabled: true,
enabledOnSeries: [1]
},
labels: list_date,
xaxis: {
categories: list_date, // i push my array forged with list of time value
type: 'datetime'
},
yaxis: {
title: {
text: 'euro',
},
}
};
var chart = new ApexCharts(document.querySelector($idCSS), options);
chart.render();
}
</script>
</BODY>
</HTML>
谢谢你的帮助。
解决方案
已解决，例如代码已发布。我认为以前代码中的问题来自日期数组。
<HTML>
<HEAD>
<TITLE>test</TITLE>
</HEAD>
<BODY>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="myChart"></div>
<script type="text/javascript">
/* PARTIE AJAX */
var dataApex = [];
var list_date = [];
var catalogue = [];
var series_forged = [];
loadData();
function loadData() {
// on vérifie si le catalogue a déjà été chargé pour n'exécuter la requête AJAX
// qu'une seule fois
if (catalogue.length === 0) {
// on récupère un objet XMLHttpRequest
var xhr = new XMLHttpRequest();
// on réagit à l'événement onreadystatechange
xhr.onreadystatechange = function() {
// test du statut de retour de la requête AJAX
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
// on désérialise le catalogue et on le sauvegarde dans une variable
catalogue = JSON.parse(xhr.responseText);
// init sub array
Object.keys(catalogue).forEach(function(date_day){
Object.keys(catalogue[date_day]).forEach(function(hours){
tmpDate = new Date(hours * 1000)
list_date.push(tmpDate.getFullYear() + '-' + ( tmpDate.getMonth() + 1 *1 ) + '-' + tmpDate.getDate() + ' @ ' + tmpDate.getHours() + 'H');
Object.keys(catalogue[date_day][hours]).forEach(function(monneys){
var value = catalogue[date_day][hours][monneys];
if (dataApex.indexOf(monneys) === -1) {
dataApex[monneys] = new Array();
}
})
})
});
moulinette();
}
}
var d = new Date();
var $month = d.getMonth();
var $years = d.getFullYear();
// la requête AJAX : lecture de data.json
xhr.open("GET", "../data/monney_market/" + $years + "_" + ( $month + 1 * 1) + "_monney.json", true);
xhr.send();
} else {
// init sub array
Object.keys(catalogue).forEach(function(date_day){
Object.keys(catalogue[date_day]).forEach(function(hours){
tmpDate = new Date(hours * 1000)
list_date.push(tmpDate.getFullYear() + '-' + ( tmpDate.getMonth() + 1 *1 ) + '-' + tmpDate.getDate() + ' @ ' + tmpDate.getHours() + 'H');
Object.keys(catalogue[date_day][hours]).forEach(function(monneys){
var value = catalogue[date_day][hours][monneys];
if (dataApex.indexOf(monneys) === -1) {
dataApex[monneys] = new Array();
}
})
})
});
moulinette();
}
}
/* FORGE - transform raw JSON in data available by ApexChart */
function moulinette () {
Object.keys(catalogue).forEach(function(date_day){
Object.keys(catalogue[date_day]).forEach(function(hours){
Object.keys(catalogue[date_day][hours]).forEach(function(monneys){
var value = catalogue[date_day][hours][monneys];
dataApex[monneys].push(value);
})
})
});
console.log(dataApex["xbtToEuro"]);
console.log(list_date);
series_forged = new Array;
series_forged.push({
name: "xbtToEuro",
data: dataApex["xbtToEuro"], // i push my array forged with data here
type: "line"
});
loadChart("myChart");
}
function loadChart ($idCSS){
/* https://apexcharts.com/docs/update-charts-from-json-api-ajax/
$idCSS => l'identifiant CSS ou générer le graphique
*/
let options = {
noData: {
text: 'Loading...'
},
series: series_forged,
chart: {
height: 350,
},
stroke: {
width: [3, 6],
curve: 'smooth', /* smooth|straight|stepline */
},
title: {
text: 'XBT to Euro'
},
dataLabels: {
enabled: true,
enabledOnSeries: [1]
},
labels: list_date,
xaxis: {
title: {
text: 'date',
},
},
yaxis: {
title: {
text: 'euro',
},
}
};
document.getElementById($idCSS).innerHTML = " ";
var chart = new ApexCharts(document.querySelector("#" + $idCSS), options);
chart.render();
}
</script>
</BODY>
</HTML>
JSON 示例
{"19":{"1595163207":{"cadToEuro":0.6443298969072164,"hkdToEuro":0.11284516514889918,"iskToEuro":0.006242197253433209,"phpToEuro":0.017695669869582913,"dkkToEuro":0.13431292224624933,"hufToEuro":0.0028270948773040823,"czkToEuro":0.0374784498913125,"audToEuro":0.6112469437652812,"ronToEuro":0.20651769856676716,"sekToEuro":0.09677731539727087,"idrToEuro":5.954702577493011e-5,"inrToEuro":0.01167269756040621,"brlToEuro":0.16436825062870855,"rubToEuro":0.012218829460575335,"hrkToEuro":0.13266118333775537,"jpyToEuro":0.008161266628580756,"thbToEuro":0.02759534190628622,"chfToEuro":0.9299730307821074,"sgdToEuro":0.6294454585510165,"plnToEuro":0.22307984027483435,"bgnToEuro":0.5112997238981491,"tryToEuro":0.12752987387295472,"cnyToEuro":0.12503907471084716,"nokToEuro":0.09434407283362423,"nzdToEuro":0.5726392945083891,"zarToEuro":0.052494540567780947,"euroToUsd":1.1428,"mxnToEuro":0.039042368778598534,"ilsToEuro":0.2547575981453647,"gbpToEuro":1.097959990337952,"krwToEuro":0.000726453815698667,"myrToEuro":0.20524187755269585,"usdToEuro":0.8750437521876093,"rubToUsd":0.013938837551685557,"cnyToUsd":0.14288772082940035,"jpyToUsd":0.00933432303293587,"brlToUsd":0.18758248939971353,"cadToUsd":0.7367025195226168,"chfToUsd":0.5097934534098795,"xbtToEuro":7997.5201,"xbtToUsd":9140.7647,"bchToEuro":194.88,"bchToUsd":222.49,"dashToEuro":60.52,"dashToUsd":69.06,"ethToEuro":205.23,"ethToUsd":234.12,"goldToEuro":50.93,"goldToUsd":58.2},"1595164651":{"cadToEuro":0.6443298969072164,"hkdToEuro":0.11284516514889918,"iskToEuro":0.006242197253433209,"phpToEuro":0.017695669869582913,"dkkToEuro":0.13431292224624933,"hufToEuro":0.0028270948773040823,"czkToEuro":0.0374784498913125,"audToEuro":0.6112469437652812,"ronToEuro":0.20651769856676716,"sekToEuro":0.09677731539727087,"idrToEuro":5.954702577493011e-5,"inrToEuro":0.01167269756040621,"brlToEuro":0.16436825062870855,"rubToEuro":0.012218829460575335,"hrkToEuro":0.13266118333775537,"jpyToEuro":0.008161266628580756,"thbToEuro":0.02759534190628622,"chfToEuro":0.9299730307821074,"sgdToEuro":0.6294454585510165,"plnToEuro":0.22307984027483435,"bgnToEuro":0.5112997238981491,"tryToEuro":0.12752987387295472,"cnyToEuro":0.12503907471084716,"nokToEuro":0.09434407283362423,"nzdToEuro":0.5726392945083891,"zarToEuro":0.052494540567780947,"euroToUsd":1.1428,"mxnToEuro":0.039042368778598534,"ilsToEuro":0.2547575981453647,"gbpToEuro":1.097959990337952,"krwToEuro":0.000726453815698667,"myrToEuro":0.20524187755269585,"usdToEuro":0.8750437521876093,"rubToUsd":0.01391271363806554,"cnyToUsd":0.14301642228973868,"jpyToUsd":0.00934186207973765,"brlToUsd":0.18563862471481268,"cadToUsd":0.7367025195226168,"chfToUsd":0.5097934534098795,"xbtToEuro":7990.2143,"xbtToUsd":9132.4145,"bchToEuro":194.74,"bchToUsd":222.2,"dashToEuro":60.47,"dashToUsd":69.07,"ethToEuro":204.91,"ethToUsd":233.74,"goldToEuro":50.93,"goldToUsd":58.2}},"20":{"1595196001":{"cadToEuro":0.6443298969072164,"hkdToEuro":0.11284516514889918,"iskToEuro":0.006242197253433209,"phpToEuro":0.017695669869582913,"dkkToEuro":0.13431292224624933,"hufToEuro":0.0028270948773040823,"czkToEuro":0.0374784498913125,"audToEuro":0.6112469437652812,"ronToEuro":0.20651769856676716,"sekToEuro":0.09677731539727087,"idrToEuro":5.954702577493011e-5,"inrToEuro":0.01167269756040621,"brlToEuro":0.16436825062870855,"rubToEuro":0.012218829460575335,"hrkToEuro":0.13266118333775537,"jpyToEuro":0.008161266628580756,"thbToEuro":0.02759534190628622,"chfToEuro":0.9299730307821074,"sgdToEuro":0.6294454585510165,"plnToEuro":0.22307984027483435,"bgnToEuro":0.5112997238981491,"tryToEuro":0.12752987387295472,"cnyToEuro":0.12503907471084716,"nokToEuro":0.09434407283362423,"nzdToEuro":0.5726392945083891,"zarToEuro":0.052494540567780947,"euroToUsd":1.1428,"mxnToEuro":0.039042368778598534,"ilsToEuro":0.2547575981453647,"gbpToEuro":1.097959990337952,"krwToEuro":0.000726453815698667,"myrToEuro":0.20524187755269585,"usdToEuro":0.8750437521876093,"rubToUsd":0.01391271363806554,"cnyToUsd":0.14301642228973868,"jpyToUsd":0.00934186207973765,"brlToUsd":0.18563862471481268,"cadToUsd":0.7367025195226168,"chfToUsd":0.5097934534098795,"xbtToEuro":8032.1157,"xbtToUsd":9180.3057,"bchToEuro":198.31,"bchToUsd":226.31,"dashToEuro":60.87,"dashToUsd":69.43,"ethToEuro":206.52,"ethToUsd":235.71,"goldToEuro":50.93,"goldToUsd":58.2}}}
结构 ：
- /your_project/data/monney_market/ => 你的 json 文件在这里
- /your_project/folder/demo.html
推荐阅读
- android - 如何从 Firestore 获取子集合数据
- c++ - 为什么命名空间中的函数看不到我的 operator<< 全局定义？
- javascript - 如何对对象内数组属性的长度求和
- html - 如何在文本周围放置边框（在 pesudo 类和填充相关之后的 CSS 之前）
- java - 使用 GSON 检查 JSON 是否适合所需的类
- angular - 如何从 Angular 应用组件中的 ActivatedRoute 快照获取查询参数？
- xcode - 我可以将 USDZ 转换为实体网格，例如 stl
- ruby-on-rails - 如何将选择框值发送到rails中的javascript
- mysql - 如何有效地创建多列索引？
- javascript - 获取 Firefox 插件的唯一客户端 ID