marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-06 22:04:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

clean up demos/pie.html

Browse Source
This commit is contained in:
Yokozuna59
2023-06-16 23:03:42 +03:00
parent 4e7dbf76cc
commit afea3e8f37
1 changed files with 13 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
demos/pie.html
View File

@@ -7,7 +7,6 @@
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" /> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style> <style>
div.mermaid { div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important; font-family: 'Courier New', Courier, monospace !important;
} }
</style> </style>
@@ -19,35 +18,30 @@
pie title Pets adopted by volunteers pie title Pets adopted by volunteers
accTitle: simple pie char demo accTitle: simple pie char demo
accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs. accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
"Dogs" : 386 "Dogs": 386
"Cats" : 85 "Cats": 85
"Rats" : 15 "Rats": 15
</pre> </pre>
<hr /> <hr />
<pre class="mermaid"> <pre class="mermaid">
%%{init: {"pie": {"textPosition": 0.9}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%% %%{init: {"pie": {"textPosition": 0.9}, "themeVariables": {"pieOuterStrokeWidth": "5px"}}}%%
pie pie
title Key elements in Product X title Key elements in Product X
accTitle: Key elements in Product X accTitle: Key elements in Product X
accDescr: This is a pie chart showing the key elements in Product X. accDescr: This is a pie chart showing the key elements in Product X.
"Calcium" : 42.96 "Calcium": 42.96
"Potassium" : 50.05 "Potassium": 50.05
"Magnesium" : 10.01 "Magnesium": 10.01
"Iron" : 5 "Iron": 5
</pre> </pre>
<script type="module"> <script type="module">
import mermaid from './mermaid.esm.mjs'; import mermaid from './mermaid.esm.mjs';
mermaid.initialize({ mermaid.initialize({
theme: 'forest', theme: 'forest',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3, logLevel: 3,
securityLevel: 'loose', securityLevel: 'loose',
// flowchart: { curve: 'basis' },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated
}); });
</script> </script>
</body> </body>