From Dark and Darker Wiki

(Renamed example to call proper page.)
(Set animation times to 0.)
Line 1: Line 1:
<includeonly>
<includeonly>
<div>
<div>
    <canvas id="<!--{$uniqueId|escape:'html'}-->"></canvas>
<canvas id="<!--{$uniqueId|escape:'html'}-->"></canvas>
</div>
</div>
<script>
<script>
    var datasets  = JSON.parse('<!--{$datasets|default:'[{"x": 0,"y": 0}]'|escape:'quotes'}-->');
var datasets  = JSON.parse('<!--{$datasets|default:'[{"x": 0,"y": 0}]'|escape:'quotes'}-->');
    var title     ='<!--{$title|default:''|escape:'quotes'}-->';
var title ='<!--{$title|default:''|escape:'quotes'}-->';
    var yAxisLabel= '<!--{$yAxisLabel|default:''|escape:'quotes'}-->';
var yAxisLabel= '<!--{$yAxisLabel|default:''|escape:'quotes'}-->';
    var xAxisLabel= '<!--{$xAxisLabel|default:''|escape:'quotes'}-->';
var xAxisLabel= '<!--{$xAxisLabel|default:''|escape:'quotes'}-->';
    var suggestedMaxY='<!--{$suggestedMaxY|default:4|escape:'quotes'}-->';
var suggestedMaxY='<!--{$suggestedMaxY|default:4|escape:'quotes'}-->';
    var suggestedMinY='<!--{$suggestedMinY|default:0|escape:'quotes'}-->';
var suggestedMinY='<!--{$suggestedMinY|default:0|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 hasTitle = true
var hasTitle = true
    if (title == "") {
if (title == "") {
        hasTitle = false;
hasTitle = false;
    }
}


    var yAxisBoolean = true
var yAxisBoolean = true
    if (yAxisLabel == "") {
if (yAxisLabel == "") {
        yAxisBoolean = false;
yAxisBoolean = false;
    }
}


    var xAxisBoolean = true
var xAxisBoolean = true
    if (xAxisLabel == "") {
if (xAxisLabel == "") {
        xAxisBoolean = false;
xAxisBoolean = false;
    }
}


    if (gridColor == "") {
if (gridColor == "") {
        gridColor = "#80808080";
gridColor = "#80808080";
    }
}


    if (axisColor == "") {
if (axisColor == "") {
        axisColor = gridColor;
axisColor = gridColor;
    }
}


    if (fontColor == "") {
if (fontColor == "") {
        fontColor = "white";
fontColor = "white";
    }
}


    new Chart(document.getElementById('<!--{$uniqueId|escape:'html'}-->'), {
new Chart(document.getElementById('<!--{$uniqueId|escape:'html'}-->'), {
        type: "line",
type: "line",
        data: datasets,
data: datasets,
        options: {
options: {
            plugins:{
animation: {
                title: {
duration:0,
                    display:hasTitle,
},
                    text:title,
hover: {
                    font: {
animationDuration:0,
                        size: 24
},
                    },
responsiveAnimationDuration:0,
                    color:fontColor
plugins:{
                },
title: {
                legend: {
display:hasTitle,
                    display:hasTitle
text:title,
                }
font: {
            },
size: 24
            scales: {
},
                y: {
color:fontColor
                    title:{
},
                        text:yAxisLabel,
legend: {
                        display:yAxisBoolean,
display:hasTitle
                        color:fontColor
}
                    },
},
                    suggestedMax:suggestedMaxY,
scales: {
                    suggestedMin:suggestedMinY,
y: {
                    grid: {
title:{
                        color:gridColor
text:yAxisLabel,
                    },
display:yAxisBoolean,
                    border: {
color:fontColor
                        color:axisColor
},
                    },
suggestedMax:suggestedMaxY,
                    ticks: {
suggestedMin:suggestedMinY,
                        color:fontColor
grid: {
                    }
color:gridColor
                },
},
                x: {
border: {
                    title:{
color:axisColor
                        text:xAxisLabel,
},
                        display:xAxisBoolean,
ticks: {
                        color:fontColor
color:fontColor
                    },
}
                    grid: {
},
                        color:gridColor
x: {
                    },
title:{
                    border: {
text:xAxisLabel,
                        color:axisColor
display:xAxisBoolean,
                    },
color:fontColor
                    ticks: {
},
                        color:fontColor
grid: {
                    }
color:gridColor
                }
},
            }
border: {
        }
color:axisColor
    });
},
ticks: {
color:fontColor
}
}
}
}
});
</script></includeonly><noinclude>{{#widget:DatasetsChart|uniqueId=LuckGraph|datasets={"labels":[0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500],"datasets":[{"label":"Luck Grade 5","data":[1, 0.9952777384613406, 0.9931949559745359, 0.9920650871875678, 0.9913146604346158, 0.9908598744095304, 0.9905380145769638, 0.9903319527048099, 0.9902161906264793, 0.990116829157925, 0.9900889064632575],"borderColor":"#AD5AFF","backgroundColor":"#AD5AFFBB"},{"label":"Luck Grade 6","data":[1, 1.0409562901295728, 1.059050220737091, 1.068841599202489, 1.0753775855453624, 1.0793127027043983, 1.082114963847391, 1.0838937007227782, 1.08489821682184, 1.0857604179521987, 1.086010944296338],"borderColor":"#F7A22D","backgroundColor":"#F7A22DBB"},{"label":"Luck Grade 8","data":[1, 1.0563969273132003, 1.0810019756579428, 1.0945677602964938, 1.1032822909763158, 1.1087969788026875, 1.112544013446742, 1.1150809500621008, 1.1164588922202936, 1.1176416142169567, 1.117899919639782],"borderColor":"#E3D88C","backgroundColor":"#E3D88CBB"}]}|yAxisLabel=Multiplicative Effect|xAxisLabel=Luck|title=Luck's Effect per Luck Grade|suggestedMaxY=5|}}</noinclude>
</script></includeonly><noinclude>{{#widget:DatasetsChart|uniqueId=LuckGraph|datasets={"labels":[0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500],"datasets":[{"label":"Luck Grade 5","data":[1, 0.9952777384613406, 0.9931949559745359, 0.9920650871875678, 0.9913146604346158, 0.9908598744095304, 0.9905380145769638, 0.9903319527048099, 0.9902161906264793, 0.990116829157925, 0.9900889064632575],"borderColor":"#AD5AFF","backgroundColor":"#AD5AFFBB"},{"label":"Luck Grade 6","data":[1, 1.0409562901295728, 1.059050220737091, 1.068841599202489, 1.0753775855453624, 1.0793127027043983, 1.082114963847391, 1.0838937007227782, 1.08489821682184, 1.0857604179521987, 1.086010944296338],"borderColor":"#F7A22D","backgroundColor":"#F7A22DBB"},{"label":"Luck Grade 8","data":[1, 1.0563969273132003, 1.0810019756579428, 1.0945677602964938, 1.1032822909763158, 1.1087969788026875, 1.112544013446742, 1.1150809500621008, 1.1164588922202936, 1.1176416142169567, 1.117899919639782],"borderColor":"#E3D88C","backgroundColor":"#E3D88CBB"}]}|yAxisLabel=Multiplicative Effect|xAxisLabel=Luck|title=Luck's Effect per Luck Grade|suggestedMaxY=5|}}</noinclude>

Revision as of 15:14, 16 June 2024