apexcharts - 如何让 APEXChart 从 JSON AJAX 响应中呈现
问题描述
使用 APEXCharts JS,我制作了一个应该从另一个文档的 AJAX JSON 响应更新的图表,但我无法让它从外部源呈现或更新图表。我查看了https://apexcharts.com/docs和https://github.com/apexcharts/apexcharts.js上的文档以了解我错过的函数或调用,但除了chart.updateSeries
我已经使用的之外,没有其他任何内容出现..我做错了什么?
我的 JSON 响应:
{ name: 'Intern', data: [0,8,0,0,4,1] }, { name: 'Ekstern', data: [0,0,0,0,0,2] }, { name: 'Fratr', data: [0,0,0,0,0,0] }
我的 APEXChart 代码:
$(document).ready(function() {
console.log("ready!");
var options = {
series: [],
chart: {
type: 'bar',
height: 300,
stacked: true,
toolbar: {
show: true
},
zoom: {
enabled: true
}
},
responsive: [{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0
}
}
}],
plotOptions: {
bar: {
horizontal: false,
borderRadius: 10
},
},
xaxis: {
type: 'category',
categories: ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni'],
},
legend: {
position: 'top',
offsetY: 10
},
fill: {
opacity: 1
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
setInterval(function() {
console.log("JSON Kaldt")
$.getJSON('employee_stats_main_page.asp', function(response) {
chart.updateSeries([{
name: 'Intern',
data: response
},
{
name: 'Ekstern',
data: response
},
{
name: 'Fratr',
data: response
}
])
});
}, 10000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
解决方案
推荐阅读
- python - 为 ML 算法组合文本和数字列
- python - 将文本中的单词替换为其他文件列中包含的单词
- redirect - CakePHP 3如何在重新登录后重定向到请求的页面
- python - zgeev() LAPACK 的结果不正确/不一致
- java - Java Eclipse 控制台输出字符串变量方向错误
- machine-learning - Gans中生成器的损失函数
- c# - 解决数据库竞争条件的最佳方法
- python - os.path 和 dataframe.to_csv 找不到 Python 路径字符串
- google-app-engine - 将 Google Cloud Storage 存储桶连接到 App Engine 中的 Docker 映像
- sharepoint - Sharepoint 列表查找列未正确显示标题