Widget:Chartjs pie: Difference between revisions
Jump to navigation
Jump to search
No edit summary Tags: Reverted 2017 source edit |
No edit summary Tag: 2017 source edit |
||
| (49 intermediate revisions by the same user not shown) | |||
| Line 15: | Line 15: | ||
<!--{$ID = "donut-$countPie-$time-$randomValue"}--> | <!--{$ID = "donut-$countPie-$time-$randomValue"}--> | ||
<div> | <div class="chart-container" style="position: relative;"> | ||
<canvas id="<!--{$ID|escape:'html'}-->"></canvas> | <canvas id="<!--{$ID|escape:'html'}-->"></canvas> | ||
</div> | </div> | ||
<script> | <script> | ||
| Line 23: | Line 23: | ||
mw.loader.using('ext.iswiki.chartjs').then(function(){ | mw.loader.using('ext.iswiki.chartjs').then(function(){ | ||
const ctx = document.getElementById('<!--{$ID|escape:'html'}-->'); | const ctx = document.getElementById('<!--{$ID|escape:'html'}-->'); | ||
function makeItemsArray(itemString) { | function makeItemsArray(itemString) { | ||
let itemsArray = itemString.split(","); | let itemsArray = itemString.split(","); | ||
| Line 34: | Line 33: | ||
let labels = makeItemsArray('<!--{$data_labels|default:''}-->'); | let labels = makeItemsArray('<!--{$data_labels|default:''}-->'); | ||
let dataIdentifier = '<!--{$data_identifier|default:''}-->'; | let dataIdentifier = '<!--{$data_identifier|default:''}-->'; | ||
let colors = makeItemsArray('<!--{$colors|default:''}-->'); | let colors = makeItemsArray('<!--{$colors|default:'#36a2eb, #ff6384, #4bc0c0, #ff9f40, #9966ff, #ffcd56, #c9cbcf'}-->'); | ||
let dataSeries = makeItemsArray('<!--{$data_series|default:''}-->'); | let dataSeries = makeItemsArray('<!--{$data_series|default:''}-->'); | ||
let legend = '<!--{$legend|default:'yes'}-->'; | |||
let title = '<!--{$title|default:''}-->'; | let title = '<!--{$title|default:''}-->'; | ||
dataIdentifier = dataIdentifier.trim(); | dataIdentifier = dataIdentifier.trim(); | ||
title = title.trim(); | title = title.trim(); | ||
if (legend === 'no') { | |||
legend = false; | |||
} else { | |||
legend = true; | |||
} | |||
function drawPieChart(ctx, labels, dataIdentifier, colors, dataSeries, legend, title) { | function drawPieChart(ctx, labels, dataIdentifier, colors, dataSeries, legend, title) { | ||
| Line 46: | Line 51: | ||
//console.log('labels: ' + labels); | //console.log('labels: ' + labels); | ||
//console.log('dataIdentifier: ' + dataIdentifier); | //console.log('dataIdentifier: ' + dataIdentifier); | ||
console.log('colors: ' + colors); | |||
//console.log('dataSeries: ' + dataSeries); | //console.log('dataSeries: ' + dataSeries); | ||
//console.log('title: ' + title); | //console.log('title: ' + title); | ||
| Line 60: | Line 65: | ||
}, | }, | ||
options: { | options: { | ||
maintainAspectRatio: false, | |||
responsive: true, | |||
title: { | title: { | ||
display: true, | display: true, | ||
text: title | text: title | ||
}, | |||
plugins: { | |||
legend: { display: legend } | |||
} | } | ||
} | } | ||
Latest revision as of 13:51, 19 March 2024
This widget allows you to add ... widget to your wiki page.
Created by [idea-sketch.com idea-sketch.com]
Using this widget[edit source]
For information on how to use this widget, see ...
Copy to your site[edit source]
To use this widget on your site, just install MediaWiki Widgets extension and copy the full source code of this page to your wiki as page Widget:Chartjs pie.