Я использую plotly для рисования диаграмм / таблиц и обнаружил проблему при рисовании таблицы
Сначала при загрузке страницы таблица выглядит нормально, но после ее скрытия и перерисовки таблицы значения с пробелами не отображаются.
Есть идеи, в чем причина?
нажмите «скрыть», затем «нарисовать» и пример
function hideTable(){
$('#myDiv').hide();
}
function redrawTable(){
var values = [
['Salaries val', 'Office', 'Merchandise val', 'Legal', '<b>TOTAL</b>'],
[1200000, 20000, 80000, 2000, 12120000],
[1300000, 20000, 70000, 2000, 130902000]]
var data = [{
type: 'table',
header: {
values: [["<b>EXPENSES</b>"], ["<b>Q1</b>"], ["<b>Q2</b>"]],
align: "center",
line: {width: 1, color: 'black'},
fill: {color: "grey"},
font: {family: "Arial", size: 12, color: "white"}
},
cells: {
values: values,
align: "center",
line: {color: "black", width: 1},
font: {family: "Arial", size: 11, color: ["black"]}
}
}]
Plotly.plot('myDiv', data);
$('#myDiv').show();
}
$(document).ready(function() {
redrawTable();
});
.btn {
font: bold 14px Arial;
text-decoration: none;
background-color: #EEEEEE;
color: #333333;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body>
<a class="btn" onclick="redrawTable();" >draw</a>
<br/>
<a class="btn" onclick="hideTable();"> hide</a>
<div id="myDiv" style="height: 100%; width: 100%;"></div></div>
</body>
