初始化
This commit is contained in:
217
Face.Web/Theme/js/demo/chartjs-demo.js
Normal file
217
Face.Web/Theme/js/demo/chartjs-demo.js
Normal file
@@ -0,0 +1,217 @@
|
||||
$(function () {
|
||||
|
||||
var lineData = {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [
|
||||
{
|
||||
label: "Example dataset",
|
||||
fillColor: "rgba(220,220,220,0.5)",
|
||||
strokeColor: "rgba(220,220,220,1)",
|
||||
pointColor: "rgba(220,220,220,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(220,220,220,1)",
|
||||
data: [65, 59, 80, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: "Example dataset",
|
||||
fillColor: "rgba(26,179,148,0.5)",
|
||||
strokeColor: "rgba(26,179,148,0.7)",
|
||||
pointColor: "rgba(26,179,148,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(26,179,148,1)",
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
var lineOptions = {
|
||||
scaleShowGridLines: true,
|
||||
scaleGridLineColor: "rgba(0,0,0,.05)",
|
||||
scaleGridLineWidth: 1,
|
||||
bezierCurve: true,
|
||||
bezierCurveTension: 0.4,
|
||||
pointDot: true,
|
||||
pointDotRadius: 4,
|
||||
pointDotStrokeWidth: 1,
|
||||
pointHitDetectionRadius: 20,
|
||||
datasetStroke: true,
|
||||
datasetStrokeWidth: 2,
|
||||
datasetFill: true,
|
||||
responsive: true,
|
||||
};
|
||||
|
||||
|
||||
var ctx = document.getElementById("lineChart").getContext("2d");
|
||||
var myNewChart = new Chart(ctx).Line(lineData, lineOptions);
|
||||
|
||||
var barData = {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [
|
||||
{
|
||||
label: "My First dataset",
|
||||
fillColor: "rgba(220,220,220,0.5)",
|
||||
strokeColor: "rgba(220,220,220,0.8)",
|
||||
highlightFill: "rgba(220,220,220,0.75)",
|
||||
highlightStroke: "rgba(220,220,220,1)",
|
||||
data: [65, 59, 80, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: "My Second dataset",
|
||||
fillColor: "rgba(26,179,148,0.5)",
|
||||
strokeColor: "rgba(26,179,148,0.8)",
|
||||
highlightFill: "rgba(26,179,148,0.75)",
|
||||
highlightStroke: "rgba(26,179,148,1)",
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
var barOptions = {
|
||||
scaleBeginAtZero: true,
|
||||
scaleShowGridLines: true,
|
||||
scaleGridLineColor: "rgba(0,0,0,.05)",
|
||||
scaleGridLineWidth: 1,
|
||||
barShowStroke: true,
|
||||
barStrokeWidth: 2,
|
||||
barValueSpacing: 5,
|
||||
barDatasetSpacing: 1,
|
||||
responsive: true
|
||||
}
|
||||
|
||||
|
||||
var ctx = document.getElementById("barChart").getContext("2d");
|
||||
var myNewChart = new Chart(ctx).Bar(barData, barOptions);
|
||||
|
||||
var polarData = [
|
||||
{
|
||||
value: 300,
|
||||
color: "#a3e1d4",
|
||||
highlight: "#1ab394",
|
||||
label: "App"
|
||||
},
|
||||
{
|
||||
value: 140,
|
||||
color: "#dedede",
|
||||
highlight: "#1ab394",
|
||||
label: "Software"
|
||||
},
|
||||
{
|
||||
value: 200,
|
||||
color: "#b5b8cf",
|
||||
highlight: "#1ab394",
|
||||
label: "Laptop"
|
||||
}
|
||||
];
|
||||
|
||||
var polarOptions = {
|
||||
scaleShowLabelBackdrop: true,
|
||||
scaleBackdropColor: "rgba(255,255,255,0.75)",
|
||||
scaleBeginAtZero: true,
|
||||
scaleBackdropPaddingY: 1,
|
||||
scaleBackdropPaddingX: 1,
|
||||
scaleShowLine: true,
|
||||
segmentShowStroke: true,
|
||||
segmentStrokeColor: "#fff",
|
||||
segmentStrokeWidth: 2,
|
||||
animationSteps: 100,
|
||||
animationEasing: "easeOutBounce",
|
||||
animateRotate: true,
|
||||
animateScale: false,
|
||||
responsive: true,
|
||||
|
||||
};
|
||||
|
||||
var ctx = document.getElementById("polarChart").getContext("2d");
|
||||
var myNewChart = new Chart(ctx).PolarArea(polarData, polarOptions);
|
||||
|
||||
var doughnutData = [
|
||||
{
|
||||
value: 300,
|
||||
color: "#a3e1d4",
|
||||
highlight: "#1ab394",
|
||||
label: "App"
|
||||
},
|
||||
{
|
||||
value: 50,
|
||||
color: "#dedede",
|
||||
highlight: "#1ab394",
|
||||
label: "Software"
|
||||
},
|
||||
{
|
||||
value: 100,
|
||||
color: "#b5b8cf",
|
||||
highlight: "#1ab394",
|
||||
label: "Laptop"
|
||||
}
|
||||
];
|
||||
|
||||
var doughnutOptions = {
|
||||
segmentShowStroke: true,
|
||||
segmentStrokeColor: "#fff",
|
||||
segmentStrokeWidth: 2,
|
||||
percentageInnerCutout: 45, // This is 0 for Pie charts
|
||||
animationSteps: 100,
|
||||
animationEasing: "easeOutBounce",
|
||||
animateRotate: true,
|
||||
animateScale: false,
|
||||
responsive: true,
|
||||
};
|
||||
|
||||
|
||||
var ctx = document.getElementById("doughnutChart").getContext("2d");
|
||||
var myNewChart = new Chart(ctx).Doughnut(doughnutData, doughnutOptions);
|
||||
|
||||
|
||||
var radarData = {
|
||||
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
|
||||
datasets: [
|
||||
{
|
||||
label: "My First dataset",
|
||||
fillColor: "rgba(220,220,220,0.2)",
|
||||
strokeColor: "rgba(220,220,220,1)",
|
||||
pointColor: "rgba(220,220,220,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(220,220,220,1)",
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: "My Second dataset",
|
||||
fillColor: "rgba(26,179,148,0.2)",
|
||||
strokeColor: "rgba(26,179,148,1)",
|
||||
pointColor: "rgba(26,179,148,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(151,187,205,1)",
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
var radarOptions = {
|
||||
scaleShowLine: true,
|
||||
angleShowLineOut: true,
|
||||
scaleShowLabels: false,
|
||||
scaleBeginAtZero: true,
|
||||
angleLineColor: "rgba(0,0,0,.1)",
|
||||
angleLineWidth: 1,
|
||||
pointLabelFontFamily: "'Arial'",
|
||||
pointLabelFontStyle: "normal",
|
||||
pointLabelFontSize: 10,
|
||||
pointLabelFontColor: "#666",
|
||||
pointDot: true,
|
||||
pointDotRadius: 3,
|
||||
pointDotStrokeWidth: 1,
|
||||
pointHitDetectionRadius: 20,
|
||||
datasetStroke: true,
|
||||
datasetStrokeWidth: 2,
|
||||
datasetFill: true,
|
||||
responsive: true,
|
||||
}
|
||||
|
||||
var ctx = document.getElementById("radarChart").getContext("2d");
|
||||
var myNewChart = new Chart(ctx).Radar(radarData, radarOptions);
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user