Demo for ECharts dynamic HTML in documents exportation.
This commit is contained in:
parent
5a685a7fca
commit
b171ae7143
193
Wiki/es/minidocs:-calendarios--d7pnm.html
Normal file
193
Wiki/es/minidocs:-calendarios--d7pnm.html
Normal file
@ -0,0 +1,193 @@
|
||||
<!doctype html>
|
||||
<html >
|
||||
<head>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
|
||||
<![endif]-->
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta http-equiv="Content-Style-Type" content="text/css" />
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Domine|Montserrat" rel="stylesheet">
|
||||
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
|
||||
<!-- <link rel="stylesheet" type="text/css" href="template.css" /> -->
|
||||
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/diversen/pandoc-bootstrap-adaptive-template/959c3622/template.css" />
|
||||
|
||||
<link href="https://vjs.zencdn.net/5.4.4/video-js.css" rel="stylesheet" />
|
||||
|
||||
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
|
||||
<!-- <script type='text/javascript' src='menu/js/jquery.cookie.js'></script> -->
|
||||
<!-- <script type='text/javascript' src='menu/js/jquery.hoverIntent.minified.js'></script> -->
|
||||
<!-- <script type='text/javascript' src='menu/js/jquery.dcjqaccordion.2.7.min.js'></script> -->
|
||||
<!-- <link href="menu/css/skins/blue.css" rel="stylesheet" type="text/css" /> -->
|
||||
<!-- <link href="menu/css/skins/graphite.css" rel="stylesheet" type="text/css" /> -->
|
||||
<!-- <link href="menu/css/skins/grey.css" rel="stylesheet" type="text/css" /> -->
|
||||
<!-- <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> -->
|
||||
<!-- <script src="script.js"></script> -->
|
||||
<!-- <script src="jquery.sticky-kit.js "></script> -->
|
||||
<script type='text/javascript' src='https://cdn.rawgit.com/diversen/pandoc-bootstrap-adaptive-template/959c3622/menu/js/jquery.cookie.js'></script>
|
||||
<script type='text/javascript' src='https://cdn.rawgit.com/diversen/pandoc-bootstrap-adaptive-template/959c3622/menu/js/jquery.hoverIntent.minified.js'></script>
|
||||
<script type='text/javascript' src='https://cdn.rawgit.com/diversen/pandoc-bootstrap-adaptive-template/959c3622/menu/js/jquery.dcjqaccordion.2.7.min.js'></script>
|
||||
|
||||
<link href="https://cdn.rawgit.com/diversen/pandoc-bootstrap-adaptive-template/959c3622/menu/css/skins/blue.css" rel="stylesheet" type="text/css" />
|
||||
<link href="https://cdn.rawgit.com/diversen/pandoc-bootstrap-adaptive-template/959c3622/menu/css/skins/graphite.css" rel="stylesheet" type="text/css" />
|
||||
<link href="https://cdn.rawgit.com/diversen/pandoc-bootstrap-adaptive-template/959c3622/menu/css/skins/grey.css" rel="stylesheet" type="text/css" />
|
||||
<link href="https://cdn.rawgit.com/ryangrose/easy-pandoc-templates/948e28e5/css/elegant_bootstrap.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
|
||||
|
||||
<script src="https://cdn.rawgit.com/diversen/pandoc-bootstrap-adaptive-template/959c3622/script.js"></script>
|
||||
|
||||
<script src="https://cdn.rawgit.com/diversen/pandoc-bootstrap-adaptive-template/959c3622/jquery.sticky-kit.js"></script>
|
||||
<!-- ECharts enabling -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js" integrity="sha256-oZEaXgWqxLmr12VzCK9eGOuHIi3XPZ/KsJXXFjtyvZA=" crossorigin="anonymous"></script>
|
||||
<meta name="generator" content="pandoc" />
|
||||
<title>MiniDocs: Calendarios</title>
|
||||
<style type="text/css">code{white-space: pre;}</style>
|
||||
<style type="text/css">body { font-family: Domine, Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif} h1, h2, h3, h4, h5, h6 { font-family: Montserrat, sans }</style>
|
||||
<style type="text/css">.info {
|
||||
-moz-border-radius: 6px;
|
||||
-webkit-border-radius: 6px;
|
||||
background-color: #f0f7fb;
|
||||
border: solid 1px #3498db;
|
||||
border-radius: 6px;
|
||||
line-height: 18px;
|
||||
overflow: hidden;
|
||||
padding: 9px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div class="navbar navbar-static-top navbar-expand-sm px-0 pt-0">
|
||||
<div class="navbar-inner container-fluid">
|
||||
<div class="container">
|
||||
<span class="doc-title">MiniDocs: Calendarios</span>
|
||||
<ul class="nav pull-right doc-info">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div data-st-class="LeTextSnippet"
|
||||
data-st-data="OrderedDictionary{'id':'Xm67vx2hDQCQfNiIAFQ03w==','parent':'d7pnmr5dy8j995l5sbpmijayp','created':'26 July 2022 4:31:48.539936 pm','modified':'26 July 2022 4:40:56.082426 pm','creator':'<unknown>','modifier':'<unknown>','tags':Set[]}">
|
||||
<p>MiniDocs también permite exportar documentos con vistas
|
||||
interactivas HTML, siempre y cuando los objetos en una
|
||||
narrativa de datos tengan métodos que permiten producir
|
||||
vistas. Por ejemplo, es posible usar <a
|
||||
href="https://code.tupale.co/mutabiT/EchartsPharo">EchartsPharo</a>
|
||||
para producir una vista de un calendario interactivo, dado
|
||||
un conjunto de datos.</p>
|
||||
</div>
|
||||
<div data-st-class="LeTextSnippet"
|
||||
data-st-data="OrderedDictionary{'id':'bzCP5B2hDQCQg0xUAFQ03w==','parent':'d7pnmr5dy8j995l5sbpmijayp','created':'26 July 2022 4:40:59.04872 pm','modified':'26 July 2022 4:41:20.148041 pm','creator':'<unknown>','modifier':'<unknown>','tags':Set[]}">
|
||||
<p>Empecemos por definir un conjunto de eventos:</p>
|
||||
</div>
|
||||
<div data-st-class="LePharoSnippet"
|
||||
data-st-data="OrderedDictionary{'id':'NTIYxh2hDQCQfyBKAFQ03w==','parent':'d7pnmr5dy8j995l5sbpmijayp','created':'26 July 2022 4:32:26.836369 pm','modified':'26 July 2022 4:43:42.246158 pm','creator':'<unknown>','modifier':'<unknown>','tags':Set[]}">
|
||||
<pre class="smalltalk"><code>citasOftalmologia := EcEvent new
|
||||
name: 'Cita en Oftalmología';
|
||||
dates: #('2022-01-25' '2022-03-19');
|
||||
color: Color orange "asHexString";
|
||||
type: 'graph'</code></pre>
|
||||
</div>
|
||||
<div data-st-class="LePharoSnippet"
|
||||
data-st-data="OrderedDictionary{'id':'EwkO5h2hDQCQhXS9AFQ03w==','parent':'d7pnmr5dy8j995l5sbpmijayp','created':'26 July 2022 4:41:23.041501 pm','modified':'26 July 2022 4:43:11.646316 pm','creator':'<unknown>','modifier':'<unknown>','tags':Set[]}">
|
||||
<pre class="smalltalk"><code>quejasSupersalud := EcEvent new
|
||||
name: 'Queja en Supersalud';
|
||||
dates: #('2022-02-16' '2022-03-26' '2022-06-21');
|
||||
color: Color green ;
|
||||
type: 'graph'</code></pre>
|
||||
</div>
|
||||
<div data-st-class="LeTextSnippet"
|
||||
data-st-data="OrderedDictionary{'id':'bLcz6B2hDQCQioViAFQ03w==','parent':'d7pnmr5dy8j995l5sbpmijayp','created':'26 July 2022 4:42:00.944331 pm','modified':'26 July 2022 4:42:17.147409 pm','creator':'<unknown>','modifier':'<unknown>','tags':Set[]}">
|
||||
<p>Ahora agreguemos los eventos a un calendario:</p>
|
||||
</div>
|
||||
<div data-st-class="LePharoSnippet"
|
||||
data-st-data="OrderedDictionary{'id':'ujN/6R2hDQCQjFIuAFQ03w==','parent':'d7pnmr5dy8j995l5sbpmijayp','created':'26 July 2022 4:42:20.7895 pm','modified':'26 July 2022 4:44:14.709865 pm','creator':'<unknown>','modifier':'<unknown>','tags':Set[]}">
|
||||
<pre class="smalltalk"><code>calendario := EcCalendar new.
|
||||
calendario events
|
||||
add: citasOftalmologia;
|
||||
add: quejasSupersalud.
|
||||
calendario</code></pre>
|
||||
</div>
|
||||
<div data-st-class="LeTextSnippet"
|
||||
data-st-data="OrderedDictionary{'id':'GbIS8h2hDQCQkK2MAFQ03w==','parent':'d7pnmr5dy8j995l5sbpmijayp','created':'26 July 2022 4:44:45.962014 pm','modified':'26 July 2022 4:45:03.976602 pm','creator':'<unknown>','modifier':'<unknown>','tags':Set[]}">
|
||||
<p>Y exportémoslo como una vista interactiva en HTML:</p>
|
||||
</div>
|
||||
<div data-st-class="LePharoSnippet"
|
||||
data-st-data="OrderedDictionary{'id':'DENh4CqhDQCy/PQ7D7m3Tw==','parent':'d7pnmr5dy8j995l5sbpmijayp','created':'27 July 2022 8:10:22.407306 am','modified':'27 July 2022 8:11:02.87578 am','creator':'<unknown>','modifier':'<unknown>','tags':Set['output']}">
|
||||
<div id="calendar" style="width:90vw;height:400px;">
|
||||
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var myCalendar = echarts.init(document.getElementById('calendar'));
|
||||
var option = {
|
||||
tooltip: {},
|
||||
animation: true,
|
||||
animationDuration: 500,
|
||||
|
||||
legend: {
|
||||
data:['Cita en Oftalmología','Queja en Supersalud'],left:'0'},
|
||||
|
||||
calendar: {
|
||||
top:'middle',left:'0',orient:'horizontal',cellSize: 40,
|
||||
yearLabel: {
|
||||
margin: 50,
|
||||
fontSize: 30,
|
||||
color:'#999'},
|
||||
dayLabel: {
|
||||
firstDay: 1,
|
||||
nameMap:'cn'},
|
||||
monthLabel: {
|
||||
nameMap:'cn',margin: 15,
|
||||
fontSize: 20,
|
||||
color:'#999'},
|
||||
range:['2022-01-15','2022-07-01']},
|
||||
|
||||
series: [
|
||||
{ type:'graph',
|
||||
name:'Cita en Oftalmología',
|
||||
edgeSymbol: ['none','arrow'],
|
||||
coordinateSystem:'calendar',
|
||||
symbolSize: 15,
|
||||
itemStyle: {
|
||||
color:'#FF9900',
|
||||
shadowBlur: 9,
|
||||
shadowOffsetX: 1.5,
|
||||
shadowOffsetY: 3,
|
||||
shadowColor:'#555'},
|
||||
data:[['2022-01-25',1],['2022-03-19',2]],
|
||||
z: 3
|
||||
},
|
||||
{ type:'graph',
|
||||
name:'Queja en Supersalud',
|
||||
edgeSymbol: ['none','arrow'],
|
||||
coordinateSystem:'calendar',
|
||||
symbolSize: 15,
|
||||
itemStyle: {
|
||||
color:'#00FF00',
|
||||
shadowBlur: 9,
|
||||
shadowOffsetX: 1.5,
|
||||
shadowOffsetY: 3,
|
||||
shadowColor:'#555'},
|
||||
data:[['2022-02-16',1],['2022-03-26',2],['2022-06-21',3]],
|
||||
z: 3
|
||||
},]
|
||||
};
|
||||
myCalendar.setOption(option);
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://vjs.zencdn.net/5.4.4/video.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue
Block a user