前端表格嵌套横向柱状图：使用Highcharts和DataTables

可以使用柱状图库（如Highcharts、ECharts等）和表格库（如DataTables、Handsontable等）来实现在前端表格中嵌套一个横向的柱状图。

具体实现步骤如下：

1. 使用表格库创建表格，并将表格数据传递给柱状图库。

2. 在表格中添加一个列，用于显示柱状图。该列可以是任何类型的列，例如HTML列或自定义列。

3. 使用柱状图库创建一个横向柱状图，并将其绑定到表格的柱状图列中。

4. 将柱状图的数据与表格数据中的相应行关联起来，以便柱状图可以正确显示数据。

5. 根据需要，可以对柱状图进行样式和布局的调整，以使其与表格的外观和风格相匹配。

示例代码（使用Highcharts和DataTables）：

HTML代码：

JavaScript代码：

// 使用DataTables创建表格 var table = $('#myTable').DataTable({ paging: false, // 禁用分页 ordering: false // 禁用排序 });

// 将表格数据转换为柱状图数据 var chartData = table.rows().data().map(function(row) { return { name: row[0], y: parseInt(row[1]) }; });

// 创建横向柱状图 Highcharts.chart('chart-container', { chart: { type: 'bar', height: 40, // 设置图表高度 margin: [0, 0, 0, 0] // 设置图表边距 }, title: { text: null }, xAxis: { categories: chartData.map(function(data) { return data.name; }), visible: false // 隐藏X轴 }, yAxis: { visible: false // 隐藏Y轴 }, legend: { enabled: false // 隐藏图例 }, series: [{ data: chartData, colorByPoint: true, tooltip: { enabled: false // 禁用工具提示 } }] });

// 将柱状图插入到表格中 table.rows().every(function(rowIdx, tableLoop, rowLoop) { var $chartCell = $(this.node()).find('.chart'); $chartCell.highcharts().series[0].setData([chartData[rowIdx]]); });

// 调整表格列宽和柱状图高度 table.columns.adjust(); $('.chart').css('height', '40px');