estou fazendo um grafico de barras porem por alguma incompatibilidade ou algo do tipo nao consigo usar nenhuma lib de graficos, tentei o chart.js, o google chats entre uns outros 10 kkk e não posso alterar isso kkk só tenho permissão de implantar, mas sem alterar nada, dai desenvolvi um “arranjo” com table e to com problemas pra estilizar, alguem pode me ajudar?
<div id='sl' style='border:1px solid #EDEDED;width: 500px;height:300px;position: relative;left:120px; top:20px'>
<span style="padding:0;margin:0 auto;text-align: center;width:100%;">Porcentagem de avaliações</span>
<table id="chart" style="border-collapse: collapse;"></table>
</div>
<script>
var data = <?php echo json_encode($grbar) ?>;
function details(column){
var coluna = column.split("-");
var linha = data[coluna[1]]['porcent'];
$("#ch"+coluna[1]).append("<span class='porc' style='position:absolute;top:30px;min-width:60px; left:25%;border-radius:5px;background:#333;padding:5px 10px;margin:0 auto;fot-size:25px;z-index:9999;position: absolute;color:#ededed; text-align:center;'>"+data[coluna[1]]['porcent']+"%</span>");
}
function limp(column){
var coluna = column.split("-");
var linha = data[coluna[1]]['porcent'];
$(".porc").remove();
}
var wid = 100 / <?php echo count($grbar) ?>;
var qtc = (<?php echo count($grbar) ?>*2);
for (var i = 100; i >= 0; i--) {
var cols = "";
for (var x = 0; x <<?php echo count($grbar) ?>; x++) {
cols += '<td onmouseOver="details(\'ch-' + x + '\')" onmouseout="limp(\'ch-' + x + '\')" style="margin:0 10px !important;widht:'+wid+'%;position:relative;" class="cel" id="ch' + x + '"></td>';
}
$("#chart").append('<tr id="line' + i + '">' + cols + '</tr>');
}
$("#chart").append("<tr><?php for ($x = 0; $x < count($grbar); $x++) {
echo "<td style='transform:rotate(-45deg); widht:100px;'>" . $grbar[$x]['avaliacao'] . "</td>";
} ?></tr>");
$("#chart").css({"width": "100%", "height": "100%", "position": "absolute", "top": "20px"});
const cor = ["red", "blue", "green", "orange", "black", "yellow"];
console.log(data);
for (var j = 0; j <<?php echo count($grbar) ?>; j++) {
for (var i = 0; i <= data[j]['porcent']; i++) {
for (var x = 0; x <<?php echo count($grbar) ?>; x++) {
if (data[x]['porcent'] != 0) {
$("#line" + i + " #ch" + x).css("background", cor[x]);
}
}
}
}
</script>
ta mais ou menos como deve ser, mas não consigo alterar espaço entre as tds