,可以通过以下步骤来实现:
var data = [
['Name', 'Age', 'Country'],
['John', 25, 'USA'],
['Jane', 30, 'Canada'],
['David', 35, 'UK']
];
这个数组的第一个元素表示表头,后面的元素表示各个数据行。
<div id="header"></div>
<div id="data"></div>
var options = {
chart: {
type: 'bar',
height: 100
},
series: [{
name: 'Header',
data: data[0].slice(1)
}],
xaxis: {
categories: data[0].slice(1)
}
};
var chart = new ApexCharts(document.querySelector("#header"), options);
chart.render();
这里使用了data数组的第一个元素(表头),通过slice方法去掉了第一个元素(表头),然后将剩下的元素作为图表的数据。
var options = {
data: {
rows: data.slice(1)
},
columns: data[0].map(function (value, index) {
return {
title: value,
data: index
};
})
};
var table = new Tabulator(document.querySelector("#data"), options);
table.render();
这里使用了data数组的slice方法去掉了第一个元素(表头),然后将剩下的元素作为数据行传递给Data Table。另外,通过map方法将表头的每个元素转换为列配置对象。
最后,将两个图表分别渲染到之前创建的div元素中。
通过以上步骤,你就可以在两行apexcharts中显示数据表了。注意,这里只是简单示例,你可以根据自己的需求和数据结构进行相应的配置和优化。
领取专属 10元无门槛券
手把手带您无忧上云