From Dark and Darker Wiki

No edit summary
m (Support xAxisTitle and yAxisTitle params)
 
(5 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 xAxisTitle = '<!--{$xAxisTitle|escape:'quotes'}-->';
  var yAxisTitle = '<!--{$yAxisTitle|escape:'quotes'}-->';
    
    
   if (color == "") {
   if (color == "") {
Line 23: Line 21:
   }
   }
   
   
  if (axisColor == "") {
  if (axisColor == "") {
     axisColor = gridColor;
     axisColor = gridColor;
   }
   }
   
   
  if (fontColor == "") {
    fontColor = "gray";
  }
 
   var max = data[0]["x"];
   var max = data[0]["x"];
   var min = max;
   var min = max;
Line 40: 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 50: Line 52:
         {
         {
           data: data,
           data: data,
          label: label,
           borderColor: color,
           borderColor: color,
           backgroundColor: color,
           backgroundColor: color,
Line 58: 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 67: Line 78:
           },
           },
           ticks: {
           ticks: {
             color: "red"
             color: fontColor
           }
           }
         },
         },
         x: {
         x: {
           type: 'linear',
           type: 'linear',
          title: {
            display: xAxisTitle !== "",
            text: xAxisTitle,
            color: fontColor
          },
           grid: {
           grid: {
             color: gridColor
             color: gridColor
Line 77: Line 93:
           border: {
           border: {
             color: axisColor
             color: axisColor
          },
          ticks: {
            color: fontColor
           }
           }
         }
         }
Line 82: 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"