Mirrors/Chart.js
2
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2026-03-05 16:04:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1207 from etimberg/feature/v2.0-scale-refactor

Browse Source 
Move more scale configs into the scale defaults.
This commit is contained in:
Evert Timberg
2015-06-13 14:30:18 -04:00
parent 42856ec16a 47b25d1c6d
commit 41bac830c5
13 changed files with 111 additions and 361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
samples/bar-multi-axis.html
View File

@@ -58,62 +58,13 @@
display: true,
position: "left",
id: "y-axis-1",
// grid line settings
gridLines: {
show: true,
color: "rgba(0, 0, 0, 0.05)",
lineWidth: 1,
drawOnChartArea: true,
drawTicks: true,
zeroLineWidth: 1,
zeroLineColor: "rgba(0,0,0,0.25)",
},
// scale numbers
beginAtZero: false,
integersOnly: false,
override: null,
// label settings
labels: {
show: true,
template: "<%=value%>",
fontSize: 12,
fontStyle: "normal",
fontColor: "#666",
fontFamily: "Helvetica Neue",
}
}, {
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: "right",
id: "y-axis-2",
// grid line settings
gridLines: {
show: true,
color: "rgba(0, 0, 0, 0.05)",
lineWidth: 1,
drawOnChartArea: false, // only want the grid lines for one axis to show up
drawTicks: false,
zeroLineWidth: 1,
zeroLineColor: "rgba(0,0,0,0.25)",
},
// scale numbers
beginAtZero: false,
integersOnly: false,
override: null,
// label settings
labels: {
show: true,
template: "<%=value%>",
fontSize: 12,
fontStyle: "normal",
fontColor: "#666",
fontFamily: "Helvetica Neue",
drawOnChartArea: false
}
}],
}

5
samples/bar-stacked.html
View File

@@ -2,7 +2,7 @@
<html>
<head>
<title>Bar Chart</title>
<title>Stacked Bar Chart</title>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../Chart.js"></script>
</head>
@@ -44,6 +44,9 @@
options: {
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]

47
samples/line-multi-axis.html
View File

@@ -63,32 +63,6 @@
display: true,
position: "left",
id: "y-axis-1",
// grid line settings
gridLines: {
show: true,
color: "rgba(0, 0, 0, 0.05)",
lineWidth: 1,
drawOnChartArea: true,
drawTicks: true,
zeroLineWidth: 1,
zeroLineColor: "rgba(0,0,0,0.25)",
},
// scale numbers
beginAtZero: false,
integersOnly: false,
override: null,
// label settings
labels: {
show: true,
template: "<%=value%>",
fontSize: 12,
fontStyle: "normal",
fontColor: "#666",
fontFamily: "Helvetica Neue",
}
}, {
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
@@ -97,29 +71,8 @@
// grid line settings
gridLines: {
show: true,
color: "rgba(0, 0, 0, 0.05)",
lineWidth: 1,
drawOnChartArea: false, // only want the grid lines for one axis to show up
drawTicks: false,
zeroLineWidth: 1,
zeroLineColor: "rgba(0,0,0,0.25)",
},
// scale numbers
beginAtZero: false,
integersOnly: false,
override: null,
// label settings
labels: {
show: true,
template: "<%=value%>",
fontSize: 12,
fontStyle: "normal",
fontColor: "#666",
fontFamily: "Helvetica Neue",
}
}],
}
}

4
samples/line.html
View File

@@ -43,10 +43,10 @@
responsive: true,
scales: {
xAxes: [{
display: false
display: true
}],
yAxes: [{
display: false
display: true
}]
}
}

47
samples/scatter-multi-axis.html
View File

@@ -107,32 +107,6 @@
display: true,
position: "left",
id: "y-axis-1",
// grid line settings
gridLines: {
show: true,
color: "rgba(0, 0, 0, 0.05)",
lineWidth: 1,
drawOnChartArea: true,
drawTicks: true,
zeroLineWidth: 1,
zeroLineColor: "rgba(0,0,0,0.25)",
},
// scale numbers
beginAtZero: false,
integersOnly: false,
override: null,
// label settings
labels: {
show: true,
template: "<%=value%>",
fontSize: 12,
fontStyle: "normal",
fontColor: "#666",
fontFamily: "Helvetica Neue",
}
}, {
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
@@ -141,29 +115,8 @@
// grid line settings
gridLines: {
show: true,
color: "rgba(0, 0, 0, 0.05)",
lineWidth: 1,
drawOnChartArea: false, // only want the grid lines for one axis to show up
drawTicks: false,
zeroLineWidth: 1,
zeroLineColor: "rgba(0,0,0,0.25)",
},
// scale numbers
beginAtZero: false,
integersOnly: false,
override: null,
// label settings
labels: {
show: true,
template: "<%=value%>",
fontSize: 12,
fontStyle: "normal",
fontColor: "#666",
fontFamily: "Helvetica Neue",
}
}],
}
}

30
src/charts/chart.bar.js
View File

@@ -23,36 +23,6 @@
}],
yAxes: [{
type: "linear",
display: true,
position: "left",
id: "y-axis-1",
spacing: 1,
// grid line settings
gridLines: {
show: true,
color: "rgba(0, 0, 0, 0.05)",
lineWidth: 1,
drawOnChartArea: true,
drawTicks: true, // draw ticks extending towards the label
zeroLineWidth: 1,
zeroLineColor: "rgba(0,0,0,0.25)",
},
// scale numbers
beginAtZero: false,
override: null,
// label settings
labels: {
show: true,
template: "<%=value%>",
fontSize: 12,
fontStyle: "normal",
fontColor: "#666",
fontFamily: "Helvetica Neue",
}
}],
},

32
src/charts/chart.line.js
View File

@@ -12,38 +12,10 @@
scales: {
xAxes: [{
type: "category", // scatter should not use a dataset axis
type: "category",
}],
yAxes: [{
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: "left",
id: "y-axis-1",
// grid line settings
gridLines: {
show: true,
color: "rgba(0, 0, 0, 0.05)",
lineWidth: 1,
drawOnChartArea: true,
drawTicks: true, // draw ticks extending towards the label
zeroLineWidth: 1,
zeroLineColor: "rgba(0,0,0,0.25)",
},
// scale numbers
beginAtZero: false,
override: null,
// label settings
labels: {
show: true,
template: "<%=value.toLocaleString()%>",
fontSize: 12,
fontStyle: "normal",
fontColor: "#666",
fontFamily: "Helvetica Neue",
}
type: "linear",
}],
},
};

39
src/charts/chart.polarArea.js
View File

@@ -10,44 +10,7 @@
scale: {
type: "radialLinear",
display: true,
//Boolean - Whether to animate scaling the chart from the centre
animate: false,
lineArc: true,
// grid line settings
gridLines: {
show: true,
color: "rgba(0, 0, 0, 0.05)",
lineWidth: 1,
},
// scale numbers
beginAtZero: true,
// label settings
labels: {
show: true,
template: "<%=value.toLocaleString()%>",
fontSize: 12,
fontStyle: "normal",
fontColor: "#666",
fontFamily: "Helvetica Neue",
//Boolean - Show a backdrop to the scale label
showLabelBackdrop: true,
//String - The colour of the label backdrop
backdropColor: "rgba(255,255,255,0.75)",
//Number - The backdrop padding above & below the label in pixels
backdropPaddingY: 2,
//Number - The backdrop padding to the side of the label in pixels
backdropPaddingX: 2,
}
lineArc: true, // so that lines are circular
},
//Boolean - Whether to animate the rotation of the chart

58
src/charts/chart.radar.js
View File

@@ -13,64 +13,6 @@
scale: {
type: "radialLinear",
display: true,
//Boolean - Whether to animate scaling the chart from the centre
animate: false,
lineArc: false,
// grid line settings
gridLines: {
show: true,
color: "rgba(0, 0, 0, 0.05)",
lineWidth: 1,
},
angleLines: {
show: true,
color: "rgba(0,0,0,.1)",
lineWidth: 1
},
// scale numbers
beginAtZero: true,
// label settings
labels: {
show: true,
template: "<%=value.toLocaleString()%>",
fontSize: 12,
fontStyle: "normal",
fontColor: "#666",
fontFamily: "Helvetica Neue",
//Boolean - Show a backdrop to the scale label
showLabelBackdrop: true,
//String - The colour of the label backdrop
backdropColor: "rgba(255,255,255,0.75)",
//Number - The backdrop padding above & below the label in pixels
backdropPaddingY: 2,
//Number - The backdrop padding to the side of the label in pixels
backdropPaddingX: 2,
},
pointLabels: {
//String - Point label font declaration
fontFamily: "'Arial'",
//String - Point label font weight
fontStyle: "normal",
//Number - Point label font size in pixels
fontSize: 10,
//String - Point label font colour
fontColor: "#666",
},
},
elements: {

56
src/charts/chart.scatter.js
View File

@@ -12,66 +12,14 @@
scales: {
xAxes: [{
type: "linear", // scatter should not use a dataset axis
display: true,
type: "linear", // scatter should not use a category axis
position: "bottom",
id: "x-axis-1", // need an ID so datasets can reference the scale
// grid line settings
gridLines: {
show: true,
color: "rgba(0, 0, 0, 0.05)",
lineWidth: 1,
drawOnChartArea: true,
drawTicks: true,
zeroLineWidth: 1,
zeroLineColor: "rgba(0,0,0,0.25)",
},
// scale numbers
beginAtZero: false,
override: null,
// label settings
labels: {
show: true,
template: "<%=value.toLocaleString()%>",
fontSize: 12,
fontStyle: "normal",
fontColor: "#666",
fontFamily: "Helvetica Neue",
},
}],
yAxes: [{
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
type: "linear",
position: "left",
id: "y-axis-1",
// grid line settings
gridLines: {
show: true,
color: "rgba(0, 0, 0, 0.05)",
lineWidth: 1,
drawOnChartArea: true,
drawTicks: true, // draw ticks extending towards the label
zeroLineWidth: 1,
zeroLineColor: "rgba(0,0,0,0.25)",
},
// scale numbers
beginAtZero: false,
override: null,
// label settings
labels: {
show: true,
template: "<%=value.toLocaleString()%>",
fontSize: 12,
fontStyle: "normal",
fontColor: "#666",
fontFamily: "Helvetica Neue",
}
}],
},

5
src/core/core.js
View File

@@ -145,7 +145,10 @@
// Scale config merging is complex. Add out own function here for that
base[key] = helpers.scaleMerge(base.hasOwnProperty(key) ? base[key] : {}, value);
} else if (base.hasOwnProperty(key) && helpers.isArray(base[key]) && helpers.isArray(value)) {
} else if (key === 'scale') {
// Used in polar area & radar charts since there is only one scale
base[key] = helpers.configMerge(base.hasOwnProperty(key) ? base[key] : {}, Chart.scaleService.getScaleDefaults(value.type), value);
}else if (base.hasOwnProperty(key) && helpers.isArray(base[key]) && helpers.isArray(value)) {
// In this case we have an array of objects replacing another array. Rather than doing a strict replace,
// merge. This allows easy scale option merging
var baseArray = base[key];

35
src/scales/scale.linear.js
View File

@@ -5,6 +5,37 @@
Chart = root.Chart,
helpers = Chart.helpers;
var defaultConfig = {
display: true,
position: "left",
id: "y-axis-1",
// grid line settings
gridLines: {
show: true,
color: "rgba(0, 0, 0, 0.1)",
lineWidth: 1,
drawOnChartArea: true,
drawTicks: true, // draw ticks extending towards the label
zeroLineWidth: 1,
zeroLineColor: "rgba(0,0,0,0.25)",
},
// scale numbers
beginAtZero: false,
override: null,
// label settings
labels: {
show: true,
template: "<%=value.toLocaleString()%>",
fontSize: 12,
fontStyle: "normal",
fontColor: "#666",
fontFamily: "Helvetica Neue",
}
};
var LinearScale = Chart.Element.extend({
calculateRange: helpers.noop, // overridden in the chart. Will set min and max as properties of the scale for later use
isHorizontal: function() {
@@ -523,6 +554,6 @@
}
}
});
Chart.scaleService.registerScaleType("linear", LinearScale);
Chart.scaleService.registerScaleType("linear", LinearScale, defaultConfig);
}).call(this);

63
src/scales/scale.radialLinear.js
View File

@@ -5,6 +5,67 @@
Chart = root.Chart,
helpers = Chart.helpers;
var defaultConfig = {
display: true,
//Boolean - Whether to animate scaling the chart from the centre
animate: false,
lineArc: false,
// grid line settings
gridLines: {
show: true,
color: "rgba(0, 0, 0, 0.1)",
lineWidth: 1,
},
angleLines: {
show: true,
color: "rgba(0,0,0, 0.1)",
lineWidth: 1
},
// scale numbers
beginAtZero: true,
// label settings
labels: {
show: true,
template: "<%=value.toLocaleString()%>",
fontSize: 12,
fontStyle: "normal",
fontColor: "#666",
fontFamily: "Helvetica Neue",
//Boolean - Show a backdrop to the scale label
showLabelBackdrop: true,
//String - The colour of the label backdrop
backdropColor: "rgba(255,255,255,0.75)",
//Number - The backdrop padding above & below the label in pixels
backdropPaddingY: 2,
//Number - The backdrop padding to the side of the label in pixels
backdropPaddingX: 2,
},
pointLabels: {
//String - Point label font declaration
fontFamily: "'Arial'",
//String - Point label font weight
fontStyle: "normal",
//Number - Point label font size in pixels
fontSize: 10,
//String - Point label font colour
fontColor: "#666",
},
};
var LinearRadialScale = Chart.Element.extend({
initialize: function() {
this.size = helpers.min([this.height, this.width]);
@@ -374,7 +435,7 @@
}
}
});
Chart.scaleService.registerScaleType("radialLinear", LinearRadialScale);
Chart.scaleService.registerScaleType("radialLinear", LinearRadialScale, defaultConfig);
}).call(this);