From Dark and Darker Wiki
(Created page with "<p>Testing</p>") |
No edit summary |
||
| (29 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
< | <includeonly> | ||
<div> | |||
<canvas id="<!--{$uniqueId|escape:'html'}-->"></canvas> | |||
</div> | |||
<script> | |||
var data = JSON.parse('<!--{$data|escape:'quotes'}-->'); | |||
var color = '<!--{$color|escape:'quotes'}-->'; | |||
var gridColor = '<!--{$gridColor|escape:'quotes'}-->'; | |||
var axisColor = '<!--{$axisColor|escape:'quotes'}-->'; | |||
var fontColor = '<!--{$fontColor|escape:'quotes'}-->'; | |||
if (color == "") { | |||
color = "black"; | |||
} | |||
if (gridColor == "") { | |||
gridColor = "lightgray"; | |||
} | |||
if (axisColor == "") { | |||
axisColor = gridColor; | |||
} | |||
if (fontColor == "") { | |||
fontColor = "gray"; | |||
} | |||
var max = data[0]["x"]; | |||
var min = max; | |||
for (let i = 0; i < data.length; i++) { | |||
if (data[i]["x"] > max) { | |||
max = data[i]["x"]; | |||
} | |||
if (data[i]["x"] < min) { | |||
min = data[i]["x"]; | |||
} | |||
} | |||
var range = [...Array(max - min + 1).keys()].map((x) => x + min); | |||
new Chart(document.getElementById('<!--{$uniqueId|escape:'html'}-->'), { | |||
type: "line", | |||
axisX: { | |||
gridColor: "orange", | |||
}, | |||
data: { | |||
labels: range, | |||
datasets: [ | |||
{ | |||
data: data, | |||
borderColor: color, | |||
backgroundColor: color, | |||
fill: false, | |||
}, | |||
], | |||
}, | |||
options: { | |||
plugins:{ | |||
legend: { | |||
display: false | |||
} | |||
}, | |||
scales: { | |||
y: { | |||
grid: { | |||
color: gridColor | |||
}, | |||
border: { | |||
color: axisColor | |||
}, | |||
ticks: { | |||
color: fontColor | |||
} | |||
}, | |||
x: { | |||
type: 'linear', | |||
grid: { | |||
color: gridColor | |||
}, | |||
border: { | |||
color: axisColor | |||
}, | |||
ticks: { | |||
color: fontColor | |||
} | |||
} | |||
} | |||
} | |||
}); | |||
</script> | |||
</includeonly> | |||