Я пытаюсь вставить граф кластерного типа dex.js на одну из моих страниц веб-сайта Wordpress, но, похоже, что-то не так с элементом ui-layout-center в моем html-файле.
Я использую iframe для включения html-файла, но видна только «западная» панель.
На моем локальном сервере он работает отлично.
Если у кого-то есть предложения ...
Спасибо
<!DOCTYPE html>
<html>
<head>
<style>
html,body, #Chart {
height: 100%;
min-height: 100%;
width: 100%;
min-width: 100%;
}
#Chart {
display: inline-block;
}
#redmonest {
font-size: 1.2em !important;
font-weight: normal !important;
color: white;
background-color: #899E8E;
text-align: center;
}
</style>
<title>dex.js : Clustered Force</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.min.css">
<link rel="stylesheet" href="https://dexjs.net/js/dex-jquery.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"/>
<link rel="stylesheet" href="https://dexjs.net/js/dex-bootstrap.css">
<link rel="stylesheet" href="/wp-content/themes/redmonest/css/dex.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://dexjs.net/js/dex-jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://dexjs.net/js/dex-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://dexjs.net/js/dex-libs.js"></script>
<script src="/wp-content/themes/redmonest/js/dex-redmonest-bb.js"></script>
</head>
<body>
<div class="ui-layout-center">
<div id="Chart"></div>
</div>
<div class="ui-layout-west">
<div id="ConfigurationPane"></div>
<br>
<a href="http://redmonest.eu"><div class="redmonest" id="redmonest">Redmonest</div></a>
<br>
</div>
<script>
d3.csv("/wp-content/themes/redmonest/csv/databeton.csv", function (error, data) {
var databeton = new dex.csv(data);
$(document).ready(function () {
$('body').layout({
applyDemoStyles: false,
west: {
size: 335
},
onresize: function () {
chart.resize();
}
});
$('body').layout({
applyDemoStyles: false,
west: {
size: 335
},
onresize: function () {
chart.resize();
}
});
var chart = dex.charts.d3.Sunburst({
'parent': '#Chart',
'csv': databeton.include([0, 1, 2, 3])
}).render();
var configPane = dex.ui.ConfigurationPane({
"parent": "#ConfigurationPane",
"csv": databeton.include([0, 1, 2, 3]),
"components": [chart]
}).render();
});
});
</script>
</body>
</html>
И я получаю это сообщение при загрузке страницы:
/ Ошибка инициализации макета пользовательского интерфейса Элемент центральной панели не
существовать. Центральная панель является обязательным элементом