Я использую библиотеку "GoJS".
Я хотел бы сделать мульти диаграмму с вкладкой.
введите описание изображения здесь
Я сделал следующее
введите описание изображения здесь
Нарисуйте диаграмму, перетаскивая фигуру из палитры слева.Можно одновременно управлять несколькими диаграммами, переключая вкладки.
введите описание изображения здесь
Каждый раз, когда я менял вкладку, используемая в «Go JS» изменяется.
Кажется, работает нормально.Кроме того, даже при переключении вкладки существующая диаграмма не может исчезнуть и может быть нарисована позже.Кажется, я выполнил то, что хотел.Однако, если вы проверите его в режиме отладки, вы увидите следующую ошибку:
введите описание изображения здесь
Invalid div id;У div уже есть диаграмма, связанная с ним.go-debug.js (32,15)
Это мой код.
<div class="row">
<div class="col-md-12">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<!-- <li class="active"><a href="#mainProcedure" data-toggle="tab" onclick="switchTab('mainProcedure')">Main Procedure</a></li> -->
<li class="dropdown"><a href="#" data-toggle="dropdown">Main Procedure<span class="caret"></span></a>
<ul class="dropdown-menu" role="main">
<li><a class='switchTab' href="#mainProcedure" data-toggle="tab" onclick="switchTab('mainProcedure')">main_default</a></li>
<li><a class='switchTab' href="#main01" data-toggle="tab" onclick="switchTab('main01')">main_01</a></li>
<li><a class='switchTab' href="#main02" data-toggle="tab" onclick="switchTab('main02')">main_02</a></li>
<li><a class='switchTab' href="#main03" data-toggle="tab" onclick="switchTab('main03')">main_03</a></li>
<li><a class='switchTab' href="#main04" data-toggle="tab" onclick="switchTab('main04')">main_04</a></li>
<li><a class='switchTab' href="#main05" data-toggle="tab" onclick="switchTab('main05')">main_05</a></li>
</ul>
</li>
<li class="disabled" data-toggle="tooltip" data-placement="top" title="Not Ready yet"><a>State Transition Diagram</a></li>
<li class="disabled" data-toggle="tooltip" data-placement="top" title="Not Ready yet"><a>State Transition Procedure</a></li>
<li class="dropdown"><a href="#" data-toggle="dropdown">Subroutines<span class="caret"></span></a>
<ul class="dropdown-menu" role="sub">
<li><a class='switchTab' href="#sub01" data-toggle="tab" onclick="switchTab('sub01')">run_08</a></li>
<li><a class='switchTab' href="#sub02" data-toggle="tab" onclick="switchTab('sub02')">run_02</a></li>
<li><a class='switchTab' href="#sub03" data-toggle="tab" onclick="switchTab('sub03')">allow_01</a></li>
<li><a class='switchTab' href="#sub04" data-toggle="tab" onclick="switchTab('sub04')">system_01</a></li>
<li><a class='switchTab' href="#sub05" data-toggle="tab" onclick="switchTab('sub05')">run_03</a></li>
<li><a class='switchTab' href="#sub06" data-toggle="tab" onclick="switchTab('sub06')">allow_02</a></li>
<li><a class='switchTab' href="#sub07" data-toggle="tab" onclick="switchTab('sub07')">loading_01</a></li>
<li><a class='switchTab' href="#sub08" data-toggle="tab" onclick="switchTab('sub08')">base_56</a></li>
<li><a class='switchTab' href="#sub09" data-toggle="tab" onclick="switchTab('sub09')">base_05</a></li>
<li><a class='switchTab' href="#sub10" data-toggle="tab" onclick="switchTab('sub10')">export_01</a></li>
<li><a class='switchTab' href="#sub11" data-toggle="tab" onclick="switchTab('sub11')">import_01</a></li>
<li><a class='switchTab' href="#sub12" data-toggle="tab" onclick="switchTab('sub12')">catch_06</a></li>
<li><a class='switchTab' href="#sub13" data-toggle="tab" onclick="switchTab('sub13')">catch_07</a></li>
<li><a class='switchTab' href="#sub14" data-toggle="tab" onclick="switchTab('sub14')">overRun_03</a></li>
<li><a class='switchTab' href="#sub15" data-toggle="tab" onclick="switchTab('sub15')">allow_22</a></li>
<li><a class='switchTab' href="#sub16" data-toggle="tab" onclick="switchTab('sub16')">fail_00</a></li>
<li><a class='switchTab' href="#sub17" data-toggle="tab" onclick="switchTab('sub17')">fail_03</a></li>
<li><a class='switchTab' href="#sub18" data-toggle="tab" onclick="switchTab('sub18')">success_01</a></li>
</ul>
</li>
</ul>
</div>
<div id="board" class="panel-body" style="height: 480px;">
<div class="tab-content" id="tab-list">
<div class="tab-pane fade in active" id="mainProcedure" style="width: 1120px; height: 440px;"></div>
<div class="tab-pane fade" id="main01" style="width: 1120px; height: 440px;"></div>
<div class="tab-pane fade" id="main02" style="width: 1120px; height: 440px;"></div>
<div class="tab-pane fade" id="main03" style="width: 1120px; height: 440px;"></div>
<div class="tab-pane fade" id="main04" style="width: 1120px; height: 440px;"></div>
<div class="tab-pane fade" id="main05" style="width: 1120px; height: 440px;"></div>
<div class="tab-pane fade" id="stateTransitionDiagram" style="width: 1120px; height: 440px;"></div>
<div class="tab-pane fade" id="stateTransitionProcedure" style="width: 1120px; height: 440px;"></div>
<div class="tab-pane fade" id="sub01" style="width: 1120px; height: 440px;"></div>
<div class="tab-pane fade" id="sub02" style="width: 1120px; height: 440px;"></div>
<div class="tab-pane fade" id="sub03" style="width: 1120px; height: 440px;"></div>
<div class="tab-pane fade" id="sub04" style="width: 1120px; height: 440px;"></div>
<div class="tab-pane fade" id="sub05" style="width: 1120px; height: 440px;"></div>
<div class="tab-pane fade" id="sub06" style="width: 1120px; height: 440px;"></div>
<div class="tab-pane fade" id="sub07" style="width: 1120px; height: 440px;"></div>
<div class="tab-pane fade" id="sub08" style="width: 1120px; height: 440px;"></div>
<div class="tab-pane fade" id="sub09" style="width: 1120px; height: 440px;"></div>
<div class="tab-pane fade" id="sub10" style="width: 1120px; height: 440px;"></div>
<div class="tab-pane fade" id="sub11" style="width: 1120px; height: 440px;"></div>
<div class="tab-pane fade" id="sub12" style="width: 1120px; height: 440px;"></div>
<div class="tab-pane fade" id="sub13" style="width: 1120px; height: 440px;"></div>
<div class="tab-pane fade" id="sub14" style="width: 1120px; height: 440px;"></div>
<div class="tab-pane fade" id="sub15" style="width: 1120px; height: 440px;"></div>
<div class="tab-pane fade" id="sub16" style="width: 1120px; height: 440px;"></div>
<div class="tab-pane fade" id="sub17" style="width: 1120px; height: 440px;"></div>
<div class="tab-pane fade" id="sub18" style="width: 1120px; height: 440px;"></div>
</div>
</div>
</div>
</div>
</div>
Вызвать функцию [swichTab (div)] через событие "onclick".
// tab-content *** global variable ***
var conID = "";
// select tab
function switchTab(t) {
var tabID = "tab_"+ t;
conID = t;
init();
}
Затем он содержит идентификатор div, который будет использоваться на диаграмме.
var diagram = gojs(go.Diagram, conID, {
...
}
Мне удалось получить ответ, связавшись с разработчиком GoJS, но я не уверен, как подать заявкуит.
///////////////////////////////////////////////////////////
Поскольку вы до сих пор не дали нам код, который вы выполняете и который вызывает ошибку, нам сложно предложить изменения, которые вы должны внести.
Я предполагаю, что ваш кодэто что-то вроде:
var diagram = go.GraphObject.make(go.Diagram, "myDiagramDiv", . . .);
Но проблема в том, что HTMLDivElement "myDiagramDiv" уже имеет go.Diagram, связанный с ним - это может вызвать эту ошибку.
Одно решение несоздать новую диаграмму, но просто использовать существующую диаграмму.Вы можете получить эту диаграмму, вызвав:
var olddiagram = go.Diagram.fromDiv("myDiagramDiv");
Другое решение - отсоединить старую диаграмму от HTMLDivElement:
var olddiag = go.Diagram.fromDiv("myDiagramDiv");
if (olddiag) olddiag.div = null;
var diagram = go.GraphObject.make(go.Diagram, "myDiagramDiv", . . .);
/////////////////////////////////////////////
Можете ли вы дать мне решение моей проблемы?