From Dark and Darker Wiki

No edit summary
Tag: Reverted
No edit summary
 
(6 intermediate revisions by the same 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'}-->';
    
    
   if (color == "") {
   if (color == "") {
Line 23: Line 19:
   }
   }
   
   
  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 39: Line 39:
    
    
   var range = [...Array(max - min + 1).keys()].map((x) => x + min);
   var range = [...Array(max - min + 1).keys()].map((x) => x + min);
  var range = [1, 3];
    
    
   new Chart(document.getElementById('<!--{$id|escape:'html'}-->'), {
   new Chart(document.getElementById('<!--{$uniqueId|escape:'html'}-->'), {
     type: "line",
     type: "line",
     axisX: {
     axisX: {
Line 51: Line 50:
         {
         {
           data: data,
           data: data,
          label: label,
           borderColor: color,
           borderColor: color,
           backgroundColor: color,
           backgroundColor: color,
Line 59: Line 57:
     },
     },
     options: {
     options: {
      plugins:{
        legend: {
          display: false
        }
      },
       scales: {
       scales: {
         y: {
         y: {
Line 66: Line 69:
           border: {
           border: {
             color: axisColor
             color: axisColor
          },
          ticks: {
            color: fontColor
           }
           }
         },
         },
Line 75: Line 81:
           border: {
           border: {
             color: axisColor
             color: axisColor
          },
          ticks: {
            color: fontColor
           }
           }
         }
         }
Line 80: Line 89:
     }
     }
   });
   });
 
  document.getElementById('<!--{$id|escape:'html'}-->').style.backgroundColor = backgroundColor;
    
    
    
    
</script>
</script>
</includeonly>
</includeonly>

Latest revision as of 06:24, 7 January 2023