Русалка. js Визуализация графика на основе текстового файла - PullRequest
Новая
       82

Русалка. js Визуализация графика на основе текстового файла

0 голосов
/ 19 января 2020

Я относительно новичок в JS и HTML, и я собираюсь визуализировать потоковые диаграммы из пользовательских файлов на веб-странице с помощью библиотеки Mermaid. js.

Пока я могу визуализировать графики, просто вводя спецификации графиков непосредственно внутри тегов <div> Mermaid. js выполняет рендеринг после того, как я делаю это вручную. Тем не менее, я планирую рендерить различные графики на основе выбора пользователя из ассортимента спецификаций графиков, что не будет ручной работой. В настоящее время у меня есть набор файлов txt со спецификациями, которые я пытался вставить в теги div. Тем не менее, текст вставляется в теги, но Русалка. js не будет отображать их по какой-либо причине. В чем причина этой проблемы?

Извиняюсь за неопределенность в моем вопросе, поскольку я впервые чувствовал себя настолько отчаянным, что хотел задать вопрос о переполнении стека.

HTML Ниже: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
      let config = {    //Config file for how the chart looks
        startOnLoad: true,
        theme: "default",
        flowchart: {
          useMaxWidth: false,
          htmlLabels: true
        }
      };

      $(document).ready(function() {  
        $(".mermaid").load("mermaidTest.txt");
      });

      mermaid.initialize(config);
      window.mermaid.init(undefined, document.querySelectorAll(".mermaid"));
    </script>
  </head>

  <body>
    <div class="mermaid"></div>
  </body>
</html>

JS Ниже: 

let config = {
  //Config file for how the chart looks
  startOnLoad: false,
  theme: "default",
  flowchart: {
    useMaxWidth: false,
    htmlLabels: true
  }
};
$(document).init(function() {  //Inject parsed text files into div elements
  $(".mermaid").load("mermaid.txt");
});

mermaid.initialize(config); //Load config settings
window.mermaid.init(undefined, document.querySelectorAll(".mermaid"));

Мой текстовый файл состоит только из этого: 

graph TB; mat21A-->mat21B

Какие графики Простая диаграмма Если я только сделаю div mat21A -> mat21B div в теге div с именем класса mermaid.

Документация Здесь: https://github.com/mermaidjs/mermaid-gitbook/blob/master/content/usage.md

...