Changeset 105002 in spip-zone


Ignore:
Timestamp:
Jun 27, 2017, 7:46:47 PM (2 years ago)
Author:
tcharlss@…
Message:

Coloration syntaxique du code dans la démo

File:
1 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/chartjs/trunk/demo/demo_chartjs.html

    r105001 r105002  
    55        #INSERT_HEAD
    66        #INSERT_HEAD_CSS
     7        <script src="https://cdn.jsdelivr.net/prism/1.6.0/prism.js"></script>
    78        <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.min.css">
     9        <link rel="stylesheet" href="https://cdn.jsdelivr.net/g/prism@1.6.0(themes/prism.css+themes/prism-okaidia.css)">
    810        <style>
    911                body { margin: 3rem; font-family: sans; }
    10                 h1, h2 { text-align: center; }
    11         .code-chart { clear:both; padding:1em; border-radius:1em; background:#333; color:#fff; text-align:left; overflow:hidden; }
     12                h1, h2, h3 { text-align: center; }
     13                pre.code-chart { font-size: 0.9em }
     14                hr {border: 1px solid #ddd; border-width: 1px 0 0; margin: 2rem 0;}
    1215        </style>
    1316</head>
     
    1720        <h1><:chartjs:demo_titre:></h1>
    1821
     22        <hr>
     23        <h2>Types de graphiques</h2>
     24
    1925        <div class="row">
    2026
    2127                <!-- bar -->
    2228                <div class="col-md-6 col-lg-4">
    23                         <h2 id="bar"><:chartjs:demo_bar:></h2>
     29                        <h3 id="bar"><:chartjs:demo_bar:></h3>
    2430                        #SET{data,"40,32,50,35 next 20,25,45,42 next 40,43, 61,50 next 33,15,40,22"}
    2531                        #SET{labels,"Salé,Sucré,Amer,Acide"}
    2632                        #SET{datalabels,"poire,pomme,courgette,citron"}
    2733                        [(#MODELE{chart}{id=barre,type=bar,datasets=#GET{data},labels=#GET{labels},dataLabels=#GET{datalabels}})]
    28                         <pre class="code-chart">
    29 &lt;chart
     34                        <pre class="code-chart"><code class="language-html">&lt;chart
    3035  |id=barre
    3136  |type=bar
     
    3338  |labels=Salé,Sucré,Amer,Acide
    3439  |dataLabels=poire,pomme,courgette,citron0&gt;
    35                         </pre>
    36                 </div>
    37 
    38                 <!-- stacked bar -->
    39                 <div class="col-md-6 col-lg-4">
    40                         <h2 id="bar_stacked"><:chartjs:demo_bar:></h2>
    41                         #SET{data,"40,32,50,35 next 20,25,45,42 next 40,43, 61,50 next 33,15,40,22"}
    42                         #SET{labels,"Salé,Sucré,Amer,Acide"}
    43                         #SET{datalabels,"poire,pomme,courgette,citron"}
    44                         [(#MODELE{chart}{id=barre_stacked,type=bar,datasets=#GET{data},labels=#GET{labels},dataLabels=#GET{datalabels},stacked=true})]
    45                         <pre class="code-chart">
    46 &lt;chart
    47   |id=barre
    48   |type=bar
    49   |datasets=40,32,50,35 next 20,25,45,42 next 40,43, 61,50 next 33,15,40,22
    50   |labels=Salé,Sucré,Amer,Acide
    51   |dataLabels=poire,pomme,courgette,citron
    52   |stacked=true&gt;
    53                         </pre>
     40                        </code></pre>
    5441                </div>
    5542
    5643                <!-- line -->
    5744                <div class="col-md-6 col-lg-4">
    58                         <h2 id="ligne"><:chartjs:demo_line:></h2>
     45                        <h3 id="ligne"><:chartjs:demo_line:></h3>
    5946                        #SET{data,"40,43,61,50 next 33,15,40,22"}
    6047                        #SET{labels,"Janvier, Février, Mars, Avril"}
    6148                        #SET{datalabels,"patates,poireaux"}
    6249                        [(#MODELE{chart}{id=ligne,type=line,datasets=#GET{data},labels=#GET{labels},dataLabels=#GET{datalabels}})]
    63                         <pre class="code-chart">
    64 &lt;chart
     50                        <pre class="code-chart"><code class="language-html">&lt;chart
    6551  |id=ligne
    6652  |type=line
     
    6854  |labels=Janvier, Février, Mars, Avril0
    6955  |dataLabels=patates,poireaux&gt;
    70                         </pre>
     56                        </code></pre>
    7157                </div>
    7258
    7359                <!-- pie -->
    7460                <div class="col-md-6 col-lg-4">
    75                         <h2 id="pie"><:chartjs:demo_pie:></h2>
     61                        <h3 id="pie"><:chartjs:demo_pie:></h3>
    7662                        #SET{data,"10,32,50,25,5"}
    7763                        #SET{labels,"Tôkyô - 東京,Kyoto, Osaka,Chiba,Hiroshima"}
    7864                        [(#MODELE{chart}{id=camembert1,type=pie,data=#GET{data},labels=#GET{labels}})]
    79                         <pre class="code-chart">
    80 &lt;chart
     65                        </code><pre class="code-chart"><code class="language-html">&lt;chart
    8166  |id=camembert1
    8267  |type=pie
    8368  |labels=Tôkyô - 東京,Kyoto, Osaka,Chiba,Hiroshima
    8469  |data=10,32,50,25,5&gt;
    85                         </pre>
     70                        </code></pre>
    8671                </div>
    8772
    8873                <!-- Doughnut -->
    8974                <div class="col-md-6 col-lg-4">
    90                         <h2 id="doughnut"><:chartjs:demo_doughnut:></h2>
     75                        <h3 id="doughnut"><:chartjs:demo_doughnut:></h3>
    9176                        #SET{data,"30,10,55,25,15,8"}
    9277                        #SET{colors,"#69D2E7,#E0E4CC,#F38630,#96CE7F,#CEBC17,#CE4264"}
    9378                        [(#MODELE{chart}{id=anneau,type=doughnut,align=right,data=#GET{data},colors=#GET{colors},labels=#GET{labels}})]
    94                         <pre class="code-chart">
    95 &lt;chart
     79                        <pre class="code-chart"><code class="language-html">&lt;chart
    9680  |id=anneau
    9781  |type=doughnut
     
    10084  |labels=Tôkyô - 東京,Kyoto, Osaka,Chiba,Hiroshima
    10185  |colors=#69D2E7,#E0E4CC,#F38630,#96CE7F,#CEBC17,#CE4264&gt;
    102                         </pre>
     86                        </code></pre>
    10387                </div>
    10488
    10589                <!-- polarArea -->
    10690                <div class="col-md-6 col-lg-4">
    107                         <h2 id="polararea"><:chartjs:demo_polaire:></h2>
     91                        <h3 id="polararea"><:chartjs:demo_polaire:></h3>
    10892                        #SET{data,"40,32,5,25,50,45"}
    10993                        #SET{labels,"Noix,Amandes,Raisins,Autres sucreries,Salés,Six"}
    11094                        [(#MODELE{chart}{id=polaire,type=polarArea,data=#GET{data},labels=#GET{labels}})]
    111                         <pre class="code-chart">
    112 &lt;chart
     95                        <pre class="code-chart"><code class="language-html">&lt;chart
    11396  |id=polaire
    11497  |type=polarArea
     
    11699  |data=40,32,5,25,50,45
    117100  |labels=Noix,Amandes,Raisins,Autres sucreries,Salés,Six&gt;
    118                         </pre>
     101                        </code></pre>
    119102                </div>
    120103
    121104                <!-- radar -->
    122105                <div class="col-md-6 col-lg-4">
    123                         <h2 id="radar"><:chartjs:demo_radar:></h2>
     106                        <h3 id="radar"><:chartjs:demo_radar:></h3>
    124107                        #SET{data,"20,22,40,25,55 next 15,20,30,40,35"}
    125108                        #SET{labels,"Précis, Rapide, Joli, Complet, かわい"}
    126109                        #SET{colors,"#CEBC17,#CE4264"}
    127110                        [(#MODELE{chart}{id=radar,type=radar,datasets=#GET{data},labels=#GET{labels},colors=#GET{colors}})]
    128                         <pre class="code-chart">
    129 &lt;chart
     111                        <pre class="code-chart"><code class="language-html">&lt;chart
    130112  |id=radar45
    131113  |type=radar
     
    133115  |labels=Précis, Rapide, Joli, Complet, かわい
    134116  |colors=#CEBC17,#CE4264&gt;
    135                         </pre>
     117                        </code></pre>
    136118                </div>
     119
     120        </div>
     121
     122        <hr>
     123        <h2>Exemples avancés</h2>
     124
     125        <div class="row">
    137126
    138127                <!-- spip -->
    139128                <div class="col-md-6">
    140                         <h2><:chartjs:demo_spip_data:></h2>
     129                        <h3><:chartjs:demo_spip_data:></h3>
    141130                        #SET{nb_article,0}
    142131                        <BOUCLE_articles(ARTICLES)> </BOUCLE_articles>#SET{nb_article,#TOTAL_BOUCLE} </B_articles>
     
    146135                        #SET{labels,"Articles, Auteurs"}
    147136                        [(#MODELE{chart}{id=barrespip,type=bar,datasets=#GET{data},labels=#GET{labels}})]
    148                         <pre class="code-chart">
    149 &#35;SET{nb_article,0}
     137                        <pre class="code-chart"><code class="language-html">&#35;SET{nb_article,0}
    150138&lt;BOUCLE_articles(ARTICLES)&gt; &lt;/BOUCLE_articles&gt;&#35;SET{nb_article,&#35;TOTAL_BOUCLE} &lt;/B_articles&gt;
    151139&#35;SET{nb_auteur,0}
     
    154142&#35;SET{labels,"Articles, Auteurs"}
    155143[(&#35;MODELE{chart}{id=barrespip,type=bar,datasets=&#35;GET{data},labels=&#35;GET{labels}})]
    156                         </pre>
     144                        </code></pre>
    157145                </div>
    158146
    159147                <!-- spip data -->
     148                <B_cours>
    160149                <div class="col-md-6">
    161                         <h2><:chartjs:demo_spip_bigdata:></h2>
     150                        <h3><:chartjs:demo_spip_bigdata:></h3>
    162151                        #SET{data,''}
    163152                        #SET{labels,''}
    164                         <BOUCLE_cours(DATA){source simplexml,http://www.ecb.europa.eu/stats/eurofxref/eurofxref-hist-90d.xml?#ENV{date}}{datapath root/children/cube/0/children/cube}{0,30}>
     153                        <BOUCLE_cours(DATA){source simplexml,http://www.ecb.europa.eu/stats/eurofxref/eurofxref-hist-90d.xml?#ENV{date}}{datapath root/children/cube/0/children/cube}{0,30}{si #GET{display}}>
    165154                        #SET{labels, #GET{labels}|concat{",",#VALEUR{attributes/time}|affdate{d/m/y}}}
    166155                        <BOUCLE_yen(DATA){source tableau,#VALEUR{children/cube}}>[
     
    173162                        [(#MODELE{chart}{id=coursduyen,type=line,datasets=#GET{data},labels=#GET{labels}})]
    174163                        <strong><:chartjs:demo_spip_legend:></strong>
    175                         <pre class="code-chart">
    176 &#35;SET{data,''}
     164                        <pre class="code-chart"><code class="language-html">&#35;SET{data,''}
    177165&#35;SET{labels,''}
    178166&lt;BOUCLE_cours(DATA){source simplexml,http://www.ecb.europa.eu/stats/eurofxref/eurofxref-hist-90d.xml?&#35;ENV{date}}{datapath root/children/cube/0/children/cube}{0,30}&gt;
     
    186174&#35;SET{labels,&#35;GET{labels}|substr{1}}
    187175[(&#35;MODELE{chart}{id=coursduyen,type=line,width=auto,height=auto,datasets=&#35;GET{data},labels=&#35;GET{labels}})]
    188                         </pre>
     176                        </code></pre>
    189177                </div>
     178        </B_cours>
    190179
    191180</body>
Note: See TracChangeset for help on using the changeset viewer.