如何解决APEXCHARTS 不会绘制从 API 检索的数据
我正在使用 fetch 函数从 API (JSON) 检索数据。轴的数据以数组形式推送。我正在使用 APEXCHARTS 库。如果我以 options.series.data = [1,2,3,4,5,6] 的形式输入数据，它会绘图，但如果我将新形成的数组作为数据，它不会绘图。
我猜数组中的数据格式错误？不过它与 Chart.js 完美配合
/** getting data from API */
const SpectralURL = "https://spectralworkbench.org/spectrums/11111.json";
const Xlabel = [];
const Ylabel = [];
async function GetSpectrum() {
let rawSpectrum = await fetch(SpectralURL);
let spectrum = await rawSpectrum.json();
let spectralData = spectrum.data.lines;
let XlimitCount = 0;
let length = spectralData.length;
for (let i = 0; i < spectralData.length - XlimitCount; i++) {
Xlabel.push(spectralData[i].wavelength );
Ylabel.push(spectralData[i].average );
}for (let i = length - 1; i > 0; i --) {
if (spectralData[i].average < 1){
XlimitCount += 1;
}
else {
break
}
}
console.log(XlimitCount);
}
console.log(Xlabel,Ylabel);
GetSpectrum();
/** JS code for a chart */
var options = {
chart: {
type: 'line'
},series: [{
name: 'sales',data: Ylabel,}],xaxis: {
categories: Xlabel,},stroke: {
curve: 'smooth',width: 1
}
}
var chart = new ApexCharts(document.getElementById("chart"),options);
chart.render();
这里是 HTML：
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body>
<div id="chart"></div>
<div class="button" id="startButton" style="margin-top: 10px ;" onclick="getHolidayData()">start</div>
<script src="main.js"></script>
</body>
我先谢谢大家！
域
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。