From Dark and Darker Wiki

No edit summary
m (Support xAxisTitle and yAxisTitle params)
 
(3 intermediate revisions by one other user not shown)
Line 1: Line 1:
<includeonly>
<includeonly>
<div>
<div>
   <canvas id="<!--{$id|escape:'html'}-->"></canvas>
   <canvas id="<!--{$uniqueId|escape:'html'}-->"></canvas>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


<script>
<script>
 
   var data = JSON.parse('<!--{$data|escape:'quotes'}-->');
   var data = JSON.parse('<!--{$data|escape:'quotes'}-->')
  var label = '<!--{$label|escape:'quotes'}-->';
   var color = '<!--{$color|escape:'quotes'}-->';
   var color = '<!--{$color|escape:'quotes'}-->';
  var backgroundColor = '<!--{$backgroundColor|escape:'quotes'}-->';
   var gridColor = '<!--{$gridColor|escape:'quotes'}-->';
   var gridColor = '<!--{$gridColor|escape:'quotes'}-->';
   var axisColor = '<!--{$axisColor|escape:'quotes'}-->';
   var axisColor = '<!--{$axisColor|escape:'quotes'}-->';
   var fontColor = '<!--{$fontColor|escape:'quotes'}-->';
   var fontColor = '<!--{$fontColor|escape:'quotes'}-->';
  var xAxisTitle = '<!--{$xAxisTitle|escape:'quotes'}-->';
  var yAxisTitle = '<!--{$yAxisTitle|escape:'quotes'}-->';
    
    
   if (color == "") {
   if (color == "") {
Line 45: Line 42:
   var range = [...Array(max - min + 1).keys()].map((x) => x + min);
   var range = [...Array(max - min + 1).keys()].map((x) => x + min);
    
    
   new Chart(document.getElementById('<!--{$id|escape:'html'}-->'), {
   new Chart(document.getElementById('<!--{$uniqueId|escape:'html'}-->'), {
     type: "line",
     type: "line",
     axisX: {
     axisX: {
Line 55: Line 52:
         {
         {
           data: data,
           data: data,
          label: label,
           borderColor: color,
           borderColor: color,
           backgroundColor: color,
           backgroundColor: color,
Line 63: Line 59:
     },
     },
     options: {
     options: {
      plugins:{
        legend: {
          display: false
        }
      },
       scales: {
       scales: {
         y: {
         y: {
          title: {
            display: yAxisTitle !== "",
            text: yAxisTitle,
            color: fontColor
          },
           grid: {
           grid: {
             color: gridColor
             color: gridColor
Line 77: Line 83:
         x: {
         x: {
           type: 'linear',
           type: 'linear',
          title: {
            display: xAxisTitle !== "",
            text: xAxisTitle,
            color: fontColor
          },
           grid: {
           grid: {
             color: gridColor
             color: gridColor
Line 90: Line 101:
     }
     }
   });
   });
 
  document.getElementById('<!--{$id|escape:'html'}-->').style.backgroundColor = backgroundColor;
    
    
    
    
</script>
</script>
</includeonly>
</includeonly>

Latest revision as of 15:36, 18 July 2026

Retrieved from "http://darkanddarker.wiki.spellsandguns.com/index.php?title=Widget:Chart&oldid=67866"