mermaid/demos/pie.html · me/mermaid - AtomGit

16f1dccd创建于 2024年3月23日历史提交
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Mermaid Quick Test Page</title>
    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
    <style>
      div.mermaid {
        font-family: 'Courier New', Courier, monospace !important;
      }
    </style>
  </head>

  <body>
    <h1>Pie chart demos</h1>
    <pre class="mermaid">
      pie title Default text position: Animal adoption
        accTitle: simple pie char demo
        accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
        "Dogs": 386
        "Cats": 85
        "Rats": 15
    </pre>

    <hr />
    <pre class="mermaid">
      %%{init: {"pie": {"textPosition": 0.9}, "themeVariables": {"pieOuterStrokeWidth": "5px"}}}%%
      pie
        title Offset labels close to border: Product X
        accTitle: Key elements in Product X
        accDescr: This is a pie chart showing the key elements in Product X.
        "Calcium": 42.96
        "Potassium": 50.05
        "Magnesium": 10.01
        "Iron": 5
    </pre>

    <pre class="mermaid">
      %%{init: {"pie": {"textPosition": 0.45}, "themeVariables": {"pieOuterStrokeWidth": "5px"}}}%%
      pie
        title Centralized labels: Languages
        accTitle: Key elements in Product X
        accDescr: This is a pie chart showing the key elements in Product X.
        "JavaScript": 30
        "Python": 25
        "Java": 20
        "C#": 15
        "Others": 10
    </pre>

    <script type="module">
      import mermaid from '/mermaid.esm.mjs';
      mermaid.initialize({
        theme: 'forest',
        logLevel: 3,
        securityLevel: 'loose',
      });
    </script>
  </body>
</html>