From Dark and Darker Wiki
No edit summary |
m (Support xAxisTitle and yAxisTitle params) |
||
| (4 intermediate revisions by one other user not shown) | |||
| Line 1: | Line 1: | ||
<includeonly> | <includeonly> | ||
<div> | <div> | ||
<canvas id="<!--{$ | <canvas id="<!--{$uniqueId|escape:'html'}-->"></canvas> | ||
</div> | </div> | ||
<script> | <script> | ||
var data = JSON.parse('<!--{$data|escape:'quotes'}-->'); | |||
var data = JSON.parse('<!--{$data|escape:'quotes'}-->') | |||
var color = '<!--{$color|escape:'quotes'}-->'; | var color = '<!--{$color|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 29: | Line 26: | ||
if (fontColor == "") { | if (fontColor == "") { | ||
fontColor = | fontColor = "gray"; | ||
} | } | ||
| 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('<!--{$ | new Chart(document.getElementById('<!--{$uniqueId|escape:'html'}-->'), { | ||
type: "line", | type: "line", | ||
axisX: { | axisX: { | ||
| Line 55: | Line 52: | ||
{ | { | ||
data: data, | data: data, | ||
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: | ||
} | } | ||
}); | }); | ||
</script> | </script> | ||
</includeonly> | </includeonly> | ||