javascript - 如何在前端渲染 Apexchart(JS 库)?
问题描述
我想为我的仪表板使用 Apexcharts 库。现在我已经被他们文档中的一个非常简单的例子所困扰(根据文档)。
我使用了他们的示例并尝试通过 ID 将其链接到我的画布容器,但是当我加载站点时它根本不显示。
我在最底部的 index.html 中包含了 cdn 链接,并且在我的控制台中没有任何错误。
根据开发人员工具,至少发生了一些事情:
这是我的 JS:
var options = {
chart: {
type: 'line'
},
series: [{
name: 'sales',
data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
}],
xaxis: {
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
}
};
var chart = new ApexCharts(document.querySelector("#myChart"), options);
chart.render();
这是画布容器:
<div class="column">
<div class="wrapperDoughnut">
<canvas width="220px" height="280px" id="myChart"></canvas>
</div>
</div>
解决方案
那是运气......我得到了解决方案。似乎 Apexcharts 库在呈现图表时自己创建了一个画布,而不是例如需要预定义画布容器的 ChartJS。所以我只是删除了画布容器并链接到父级。
Apex文档很差...
不过,我应该再次删除这个帖子吗?
工作解决方案:
HTML:
<div class="column">
<div class="wrapperDoughnut" id="myChart">
</div>
</div>
JS:
var options = {
chart: {
type: 'line'
},
series: [{
name: 'sales',
data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
}],
xaxis: {
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
}
};
var chart = new ApexCharts(document.querySelector("#myChart"), options);
chart.render();
推荐阅读
- python - Python拆分字符串并在解析发生的任何地方添加字符
- node.js - 在 linux 中运行 node 或 npm 命令的问题
- python - 如何实现具有大量分类列的随机森林?
- terraform - 转换字符串 = 列表
Terraform 中的地图 - javascript - Material UI - 动态覆盖样式
- javascript - 仅在新会话上显示元素并刷新
- facebook - 如何将级别编号或 ID 添加到 Facebook 分析“细分”中的参数
- java - 如何在冒泡排序算法中应用 Swing 动画?
- aws-cdk - Aws-CDK 修改 CfnMicrosoftAD 生成的安全组
- python - 计算列中的特定值并列出结果 Pandas Python