mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 20:29:12 +02:00
Radar chart and radialLinear scale
This commit is contained in:
Tanner Linsley
parent
42648d0a83
commit
2d5eb6d57e
@ -21,6 +21,7 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
var config = {
|
var config = {
|
||||||
|
type: 'radar',
|
||||||
data: {
|
data: {
|
||||||
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
|
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
|
||||||
datasets: [{
|
datasets: [{
|
||||||
@ -36,14 +37,11 @@
|
|||||||
pointHighlightStroke: "rgba(151,187,205,1)",
|
pointHighlightStroke: "rgba(151,187,205,1)",
|
||||||
data: [null, randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
|
data: [null, randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
|
||||||
}]
|
}]
|
||||||
},
|
|
||||||
options: {
|
|
||||||
responsive: true
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
window.onload = function() {
|
window.onload = function() {
|
||||||
window.myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(config);
|
window.myRadar = new Chart(document.getElementById("canvas"), config);
|
||||||
};
|
};
|
||||||
|
|
||||||
$('#randomizeData').click(function() {
|
$('#randomizeData').click(function() {
|
||||||
|
|||||||
@ -1,221 +1,158 @@
|
|||||||
(function() {
|
(function() {
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
return;
|
|
||||||
|
|
||||||
var root = this,
|
var root = this,
|
||||||
Chart = root.Chart,
|
Chart = root.Chart,
|
||||||
helpers = Chart.helpers;
|
helpers = Chart.helpers;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Chart.Type.extend({
|
Chart.defaults.radar = {
|
||||||
name: "Radar",
|
scale: {
|
||||||
defaults: {
|
type: "radialLinear",
|
||||||
|
},
|
||||||
|
elements: {
|
||||||
|
line: {
|
||||||
|
tension: 0, // no bezier in radar
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
scale: {
|
Chart.controllers.radar = function(chart, datasetIndex) {
|
||||||
type: "radialLinear",
|
this.initialize.call(this, chart, datasetIndex);
|
||||||
},
|
};
|
||||||
|
|
||||||
elements: {
|
|
||||||
line: {
|
|
||||||
tension: 0, // no bezier in radar
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
//String - A legend template
|
helpers.extend(Chart.controllers.radar.prototype, {
|
||||||
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
|
|
||||||
|
|
||||||
|
initialize: function(chart, datasetIndex) {
|
||||||
|
this.chart = chart;
|
||||||
|
this.index = datasetIndex;
|
||||||
|
this.linkScales();
|
||||||
|
this.addElements();
|
||||||
},
|
},
|
||||||
|
|
||||||
initialize: function() {
|
linkScales: function() {
|
||||||
|
// No need. Single scale only
|
||||||
// Events
|
|
||||||
helpers.bindEvents(this, this.options.events, this.events);
|
|
||||||
|
|
||||||
// Create a new line and its points for each dataset and piece of data
|
|
||||||
helpers.each(this.data.datasets, function(dataset, datasetIndex) {
|
|
||||||
|
|
||||||
dataset.metaDataset = new Chart.Line({
|
|
||||||
_chart: this.chart,
|
|
||||||
_datasetIndex: datasetIndex,
|
|
||||||
_points: dataset.metaData,
|
|
||||||
_loop: true
|
|
||||||
});
|
|
||||||
|
|
||||||
dataset.metaData = [];
|
|
||||||
|
|
||||||
helpers.each(dataset.data, function(dataPoint, index) {
|
|
||||||
dataset.metaData.push(new Chart.Point({
|
|
||||||
_datasetIndex: datasetIndex,
|
|
||||||
_index: index,
|
|
||||||
_chart: this.chart,
|
|
||||||
_model: {
|
|
||||||
x: 0, //xScale.getPixelForValue(null, index, true),
|
|
||||||
y: 0, //this.chartArea.bottom,
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
}, this);
|
|
||||||
}, this);
|
|
||||||
|
|
||||||
// Build the scale.
|
|
||||||
this.buildScale();
|
|
||||||
|
|
||||||
// Create tooltip instance exclusively for this chart with some defaults.
|
|
||||||
this.tooltip = new Chart.Tooltip({
|
|
||||||
_chart: this.chart,
|
|
||||||
_data: this.data,
|
|
||||||
_options: this.options,
|
|
||||||
}, this);
|
|
||||||
|
|
||||||
// Need to fit scales before we reset elements.
|
|
||||||
Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);
|
|
||||||
|
|
||||||
// Reset so that we animation from the baseline
|
|
||||||
this.resetElements();
|
|
||||||
|
|
||||||
// Update that shiz
|
|
||||||
this.update();
|
|
||||||
},
|
},
|
||||||
nextPoint: function(collection, index) {
|
|
||||||
return collection[index + 1] || collection[0];
|
getDataset: function() {
|
||||||
|
return this.chart.data.datasets[this.index];
|
||||||
},
|
},
|
||||||
previousPoint: function(collection, index) {
|
|
||||||
return collection[index - 1] || collection[collection.length - 1];
|
getScaleForId: function(scaleID) {
|
||||||
|
return this.chart.scales[scaleID];
|
||||||
},
|
},
|
||||||
resetElements: function() {
|
|
||||||
|
|
||||||
// Update the points
|
addElements: function() {
|
||||||
this.eachElement(function(point, index, dataset, datasetIndex) {
|
|
||||||
helpers.extend(point, {
|
|
||||||
// Utility
|
|
||||||
_chart: this.chart,
|
|
||||||
_datasetIndex: datasetIndex,
|
|
||||||
_index: index,
|
|
||||||
_scale: this.scale,
|
|
||||||
|
|
||||||
// Desired view properties
|
this.getDataset().metaData = this.getDataset().metaData || [];
|
||||||
_model: {
|
|
||||||
x: this.scale.xCenter,
|
|
||||||
y: this.scale.yCenter,
|
|
||||||
|
|
||||||
// Appearance
|
this.getDataset().metaDataset = this.getDataset().metaDataset || new Chart.elements.Line({
|
||||||
tension: point.custom && point.custom.tension ? point.custom.tension : this.options.elements.line.tension,
|
_chart: this.chart.chart,
|
||||||
radius: point.custom && point.custom.radius ? point.custom.pointRadius : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointRadius, index, this.options.elements.point.radius),
|
_datasetIndex: this.index,
|
||||||
backgroundColor: point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBackgroundColor, index, this.options.elements.point.backgroundColor),
|
_points: this.getDataset().metaData,
|
||||||
borderColor: point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBorderColor, index, this.options.elements.point.borderColor),
|
_loop: true
|
||||||
borderWidth: point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBorderWidth, index, this.options.elements.point.borderWidth),
|
|
||||||
skip: this.data.datasets[datasetIndex].data[index] === null,
|
|
||||||
|
|
||||||
// Tooltip
|
|
||||||
hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].hitRadius, index, this.options.elements.point.hitRadius),
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}, this);
|
|
||||||
|
|
||||||
// Update control points for the bezier curve
|
|
||||||
this.eachElement(function(point, index, dataset, datasetIndex) {
|
|
||||||
var controlPoints = helpers.splineCurve(
|
|
||||||
this.previousPoint(dataset, index)._model,
|
|
||||||
point._model,
|
|
||||||
this.nextPoint(dataset, index)._model,
|
|
||||||
point._model.tension
|
|
||||||
);
|
|
||||||
|
|
||||||
point._model.controlPointPreviousX = this.scale.xCenter;
|
|
||||||
point._model.controlPointPreviousY = this.scale.yCenter;
|
|
||||||
point._model.controlPointNextX = this.scale.xCenter;
|
|
||||||
point._model.controlPointNextY = this.scale.yCenter;
|
|
||||||
|
|
||||||
// Now pivot the point for animation
|
|
||||||
point.pivot();
|
|
||||||
}, this);
|
|
||||||
},
|
|
||||||
update: function(animationDuration) {
|
|
||||||
this.scale.setScaleSize();
|
|
||||||
this.scale.calculateRange();
|
|
||||||
this.scale.generateTicks();
|
|
||||||
this.scale.buildYLabels();
|
|
||||||
|
|
||||||
Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);
|
|
||||||
|
|
||||||
// Update the lines
|
|
||||||
this.eachDataset(function(dataset, datasetIndex) {
|
|
||||||
var scaleBase;
|
|
||||||
|
|
||||||
if (this.scale.min < 0 && this.scale.max < 0) {
|
|
||||||
scaleBase = this.scale.getPointPositionForValue(0, this.scale.max);
|
|
||||||
} else if (this.scale.min > 0 && this.scale.max > 0) {
|
|
||||||
scaleBase = this.scale.getPointPositionForValue(0, this.scale.min);
|
|
||||||
} else {
|
|
||||||
scaleBase = this.scale.getPointPositionForValue(0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
helpers.extend(dataset.metaDataset, {
|
|
||||||
// Utility
|
|
||||||
_datasetIndex: datasetIndex,
|
|
||||||
|
|
||||||
// Data
|
|
||||||
_children: dataset.metaData,
|
|
||||||
|
|
||||||
// Model
|
|
||||||
_model: {
|
|
||||||
// Appearance
|
|
||||||
tension: dataset.tension || this.options.elements.line.tension,
|
|
||||||
backgroundColor: dataset.backgroundColor || this.options.elements.line.backgroundColor,
|
|
||||||
borderWidth: dataset.borderWidth || this.options.elements.line.borderWidth,
|
|
||||||
borderColor: dataset.borderColor || this.options.elements.line.borderColor,
|
|
||||||
fill: dataset.fill !== undefined ? dataset.fill : this.options.elements.line.fill, // use the value from the dataset if it was provided. else fall back to the default
|
|
||||||
skipNull: dataset.skipNull !== undefined ? dataset.skipNull : this.options.elements.line.skipNull,
|
|
||||||
drawNull: dataset.drawNull !== undefined ? dataset.drawNull : this.options.elements.line.drawNull,
|
|
||||||
|
|
||||||
// Scale
|
|
||||||
scaleTop: this.scale.top,
|
|
||||||
scaleBottom: this.scale.bottom,
|
|
||||||
scaleZero: scaleBase,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
dataset.metaDataset.pivot();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Update the points
|
helpers.each(this.getDataset().data, function(value, index) {
|
||||||
this.eachElement(function(point, index, dataset, datasetIndex) {
|
this.getDataset().metaData[index] = this.getDataset().metaData[index] || new Chart.elements.Point({
|
||||||
var pointPosition = this.scale.getPointPositionForValue(index, this.data.datasets[datasetIndex].data[index]);
|
_chart: this.chart.chart,
|
||||||
|
_datasetIndex: this.index,
|
||||||
|
_index: index,
|
||||||
|
_model: {
|
||||||
|
x: 0, //xScale.getPixelForValue(null, index, true),
|
||||||
|
y: 0, //this.chartArea.bottom,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}, this);
|
||||||
|
},
|
||||||
|
|
||||||
|
reset: function() {
|
||||||
|
this.update(true);
|
||||||
|
},
|
||||||
|
|
||||||
|
update: function(reset) {
|
||||||
|
|
||||||
|
var line = this.getDataset().metaDataset;
|
||||||
|
var points = this.getDataset().metaData;
|
||||||
|
|
||||||
|
var scale = this.chart.scale;
|
||||||
|
var scaleBase;
|
||||||
|
|
||||||
|
scale.setScaleSize();
|
||||||
|
scale.calculateRange();
|
||||||
|
scale.generateTicks();
|
||||||
|
scale.buildYLabels();
|
||||||
|
|
||||||
|
if (scale.min < 0 && scale.max < 0) {
|
||||||
|
scaleBase = scale.getPointPositionForValue(0, scale.max);
|
||||||
|
} else if (scale.min > 0 && scale.max > 0) {
|
||||||
|
scaleBase = scale.getPointPositionForValue(0, scale.min);
|
||||||
|
} else {
|
||||||
|
scaleBase = scale.getPointPositionForValue(0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
helpers.extend(this.getDataset().metaDataset, {
|
||||||
|
// Utility
|
||||||
|
_datasetIndex: this.index,
|
||||||
|
// Data
|
||||||
|
_children: this.getDataset().metaData,
|
||||||
|
// Model
|
||||||
|
_model: {
|
||||||
|
// Appearance
|
||||||
|
tension: this.getDataset().tension || this.chart.options.elements.line.tension,
|
||||||
|
backgroundColor: this.getDataset().backgroundColor || this.chart.options.elements.line.backgroundColor,
|
||||||
|
borderWidth: this.getDataset().borderWidth || this.chart.options.elements.line.borderWidth,
|
||||||
|
borderColor: this.getDataset().borderColor || this.chart.options.elements.line.borderColor,
|
||||||
|
fill: this.getDataset().fill !== undefined ? this.getDataset().fill : this.chart.options.elements.line.fill, // use the value from the this.getDataset() if it was provided. else fall back to the default
|
||||||
|
skipNull: this.getDataset().skipNull !== undefined ? this.getDataset().skipNull : this.chart.options.elements.line.skipNull,
|
||||||
|
drawNull: this.getDataset().drawNull !== undefined ? this.getDataset().drawNull : this.chart.options.elements.line.drawNull,
|
||||||
|
|
||||||
|
// Scale
|
||||||
|
scaleTop: scale.top,
|
||||||
|
scaleBottom: scale.bottom,
|
||||||
|
scaleZero: scaleBase,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
this.getDataset().metaDataset.pivot();
|
||||||
|
|
||||||
|
// Update Points
|
||||||
|
helpers.each(points, function(point, index) {
|
||||||
|
var pointPosition = scale.getPointPositionForValue(index, this.getDataset().data[index]);
|
||||||
|
|
||||||
helpers.extend(point, {
|
helpers.extend(point, {
|
||||||
// Utility
|
// Utility
|
||||||
_chart: this.chart,
|
_datasetIndex: this.index,
|
||||||
_datasetIndex: datasetIndex,
|
|
||||||
_index: index,
|
_index: index,
|
||||||
|
|
||||||
// Desired view properties
|
// Desired view properties
|
||||||
_model: {
|
_model: {
|
||||||
x: pointPosition.x, // value not used in dataset scale, but we want a consistent API between scales
|
x: reset ? scale.xCenter : pointPosition.x, // value not used in dataset scale, but we want a consistent API between scales
|
||||||
y: pointPosition.y,
|
y: reset ? scale.yCenter : pointPosition.y,
|
||||||
|
|
||||||
// Appearance
|
// Appearance
|
||||||
tension: point.custom && point.custom.tension ? point.custom.tension : this.options.elements.line.tension,
|
tension: point.custom && point.custom.tension ? point.custom.tension : this.chart.options.elements.line.tension,
|
||||||
radius: point.custom && point.custom.radius ? point.custom.pointRadius : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointRadius, index, this.options.elements.point.radius),
|
radius: point.custom && point.custom.radius ? point.custom.pointRadius : helpers.getValueAtIndexOrDefault(this.getDataset().pointRadius, index, this.chart.options.elements.point.radius),
|
||||||
backgroundColor: point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBackgroundColor, index, this.options.elements.point.backgroundColor),
|
backgroundColor: point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBackgroundColor, index, this.chart.options.elements.point.backgroundColor),
|
||||||
borderColor: point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBorderColor, index, this.options.elements.point.borderColor),
|
borderColor: point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderColor, index, this.chart.options.elements.point.borderColor),
|
||||||
borderWidth: point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBorderWidth, index, this.options.elements.point.borderWidth),
|
borderWidth: point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderWidth, index, this.chart.options.elements.point.borderWidth),
|
||||||
skip: this.data.datasets[datasetIndex].data[index] === null,
|
skip: this.getDataset().data[index] === null,
|
||||||
|
|
||||||
// Tooltip
|
// Tooltip
|
||||||
hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].hitRadius, index, this.options.elements.point.hitRadius),
|
hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().hitRadius, index, this.chart.options.elements.point.hitRadius),
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}, this);
|
}, this);
|
||||||
|
|
||||||
|
|
||||||
// Update control points for the bezier curve
|
// Update bezier control points
|
||||||
this.eachElement(function(point, index, dataset, datasetIndex) {
|
helpers.each(this.getDataset().metaData, function(point, index) {
|
||||||
var controlPoints = helpers.splineCurve(
|
var controlPoints = helpers.splineCurve(
|
||||||
this.previousPoint(dataset, index)._model,
|
helpers.previousItem(this.getDataset().metaData, index, true)._model,
|
||||||
point._model,
|
point._model,
|
||||||
this.nextPoint(dataset, index)._model,
|
helpers.nextItem(this.getDataset().metaData, index, true)._model,
|
||||||
point._model.tension
|
point._model.tension
|
||||||
);
|
);
|
||||||
|
|
||||||
@ -225,19 +162,19 @@
|
|||||||
// Prevent the bezier going outside of the bounds of the graph
|
// Prevent the bezier going outside of the bounds of the graph
|
||||||
|
|
||||||
// Cap puter bezier handles to the upper/lower scale bounds
|
// Cap puter bezier handles to the upper/lower scale bounds
|
||||||
if (controlPoints.next.y > this.chartArea.bottom) {
|
if (controlPoints.next.y > this.chart.chartArea.bottom) {
|
||||||
point._model.controlPointNextY = this.chartArea.bottom;
|
point._model.controlPointNextY = this.chart.chartArea.bottom;
|
||||||
} else if (controlPoints.next.y < this.chartArea.top) {
|
} else if (controlPoints.next.y < this.chart.chartArea.top) {
|
||||||
point._model.controlPointNextY = this.chartArea.top;
|
point._model.controlPointNextY = this.chart.chartArea.top;
|
||||||
} else {
|
} else {
|
||||||
point._model.controlPointNextY = controlPoints.next.y;
|
point._model.controlPointNextY = controlPoints.next.y;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Cap inner bezier handles to the upper/lower scale bounds
|
// Cap inner bezier handles to the upper/lower scale bounds
|
||||||
if (controlPoints.previous.y > this.chartArea.bottom) {
|
if (controlPoints.previous.y > this.chart.chartArea.bottom) {
|
||||||
point._model.controlPointPreviousY = this.chartArea.bottom;
|
point._model.controlPointPreviousY = this.chart.chartArea.bottom;
|
||||||
} else if (controlPoints.previous.y < this.chartArea.top) {
|
} else if (controlPoints.previous.y < this.chart.chartArea.top) {
|
||||||
point._model.controlPointPreviousY = this.chartArea.top;
|
point._model.controlPointPreviousY = this.chart.chartArea.top;
|
||||||
} else {
|
} else {
|
||||||
point._model.controlPointPreviousY = controlPoints.previous.y;
|
point._model.controlPointPreviousY = controlPoints.previous.y;
|
||||||
}
|
}
|
||||||
@ -246,200 +183,48 @@
|
|||||||
point.pivot();
|
point.pivot();
|
||||||
}, this);
|
}, this);
|
||||||
|
|
||||||
this.render(animationDuration);
|
|
||||||
},
|
},
|
||||||
buildScale: function() {
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
var ScaleConstructor = Chart.scaleService.getScaleConstructor(this.options.scale.type);
|
|
||||||
this.scale = new ScaleConstructor({
|
|
||||||
options: this.options.scale,
|
|
||||||
height: this.chart.height,
|
|
||||||
width: this.chart.width,
|
|
||||||
xCenter: this.chart.width / 2,
|
|
||||||
yCenter: this.chart.height / 2,
|
|
||||||
ctx: this.chart.ctx,
|
|
||||||
labels: this.data.labels,
|
|
||||||
valuesCount: this.data.datasets[0].data.length,
|
|
||||||
data: this.data,
|
|
||||||
});
|
|
||||||
|
|
||||||
this.scale.setScaleSize();
|
|
||||||
this.scale.calculateRange();
|
|
||||||
this.scale.generateTicks();
|
|
||||||
this.scale.buildYLabels();
|
|
||||||
},
|
|
||||||
draw: function(ease) {
|
draw: function(ease) {
|
||||||
var easingDecimal = ease || 1;
|
var easingDecimal = ease || 1;
|
||||||
this.clear();
|
|
||||||
|
|
||||||
// Draw all the scales
|
// Transition Point Locations
|
||||||
this.scale.draw(this.chartArea);
|
helpers.each(this.getDataset().metaData, function(point, index) {
|
||||||
|
point.transition(easingDecimal);
|
||||||
|
}, this);
|
||||||
|
|
||||||
// reverse for-loop for proper stacking
|
// Transition and Draw the line
|
||||||
for (var i = this.data.datasets.length - 1; i >= 0; i--) {
|
this.getDataset().metaDataset.transition(easingDecimal).draw();
|
||||||
|
|
||||||
var dataset = this.data.datasets[i];
|
// Draw the points
|
||||||
|
helpers.each(this.getDataset().metaData, function(point) {
|
||||||
// Transition Point Locations
|
point.draw();
|
||||||
helpers.each(dataset.metaData, function(point, index) {
|
});
|
||||||
point.transition(easingDecimal);
|
|
||||||
}, this);
|
|
||||||
|
|
||||||
// Transition and Draw the line
|
|
||||||
dataset.metaDataset.transition(easingDecimal).draw();
|
|
||||||
|
|
||||||
// Draw the points
|
|
||||||
helpers.each(dataset.metaData, function(point) {
|
|
||||||
point.draw();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Finally draw the tooltip
|
|
||||||
this.tooltip.transition(easingDecimal).draw();
|
|
||||||
},
|
},
|
||||||
events: function(e) {
|
|
||||||
|
|
||||||
this.lastActive = this.lastActive || [];
|
setHoverStyle: function(point) {
|
||||||
|
// Point
|
||||||
|
var dataset = this.chart.data.datasets[point._datasetIndex];
|
||||||
|
var index = point._index;
|
||||||
|
|
||||||
// Find Active Elements
|
point._model.radius = point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.chart.options.elements.point.hoverRadius);
|
||||||
// If exiting chart
|
point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.color(point._model.backgroundColor).saturate(0.5).darken(0.1).rgbString());
|
||||||
if (e.type == 'mouseout') {
|
point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.color(point._model.borderColor).saturate(0.5).darken(0.1).rgbString());
|
||||||
this.active = [];
|
point._model.borderWidth = point.custom && point.custom.hoverBorderWidth ? point.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, point._model.borderWidth);
|
||||||
} else {
|
|
||||||
this.active = function() {
|
|
||||||
switch (this.options.hover.mode) {
|
|
||||||
case 'single':
|
|
||||||
return this.getElementAtEvent(e);
|
|
||||||
case 'label':
|
|
||||||
return this.getElementsAtEvent(e);
|
|
||||||
case 'dataset':
|
|
||||||
return this.getDatasetAtEvent(e);
|
|
||||||
default:
|
|
||||||
return e;
|
|
||||||
}
|
|
||||||
}.call(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
// On Hover hook
|
|
||||||
if (this.options.hover.onHover) {
|
|
||||||
this.options.hover.onHover.call(this, this.active);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.type == 'mouseup' || e.type == 'click') {
|
|
||||||
if (this.options.onClick) {
|
|
||||||
this.options.onClick.call(this, e, this.active);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var dataset;
|
|
||||||
var index;
|
|
||||||
// Remove styling for last active (even if it may still be active)
|
|
||||||
if (this.lastActive.length) {
|
|
||||||
switch (this.options.hover.mode) {
|
|
||||||
case 'single':
|
|
||||||
dataset = this.data.datasets[this.lastActive[0]._datasetIndex];
|
|
||||||
index = this.lastActive[0]._index;
|
|
||||||
|
|
||||||
this.lastActive[0]._model.radius = this.lastActive[0].custom && this.lastActive[0].custom.radius ? this.lastActive[0].custom.pointRadius : helpers.getValueAtIndexOrDefault(dataset.pointRadius, index, this.options.elements.point.radius);
|
|
||||||
this.lastActive[0]._model.backgroundColor = this.lastActive[0].custom && this.lastActive[0].custom.backgroundColor ? this.lastActive[0].custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointBackgroundColor, index, this.options.elements.point.backgroundColor);
|
|
||||||
this.lastActive[0]._model.borderColor = this.lastActive[0].custom && this.lastActive[0].custom.borderColor ? this.lastActive[0].custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.pointBorderColor, index, this.options.elements.point.borderColor);
|
|
||||||
this.lastActive[0]._model.borderWidth = this.lastActive[0].custom && this.lastActive[0].custom.borderWidth ? this.lastActive[0].custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, this.options.elements.point.borderWidth);
|
|
||||||
break;
|
|
||||||
case 'label':
|
|
||||||
for (var i = 0; i < this.lastActive.length; i++) {
|
|
||||||
dataset = this.data.datasets[this.lastActive[i]._datasetIndex];
|
|
||||||
index = this.lastActive[i]._index;
|
|
||||||
|
|
||||||
this.lastActive[i]._model.radius = this.lastActive[i].custom && this.lastActive[i].custom.radius ? this.lastActive[i].custom.pointRadius : helpers.getValueAtIndexOrDefault(dataset.pointRadius, index, this.options.elements.point.radius);
|
|
||||||
this.lastActive[i]._model.backgroundColor = this.lastActive[i].custom && this.lastActive[i].custom.backgroundColor ? this.lastActive[i].custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointBackgroundColor, index, this.options.elements.point.backgroundColor);
|
|
||||||
this.lastActive[i]._model.borderColor = this.lastActive[i].custom && this.lastActive[i].custom.borderColor ? this.lastActive[i].custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.pointBorderColor, index, this.options.elements.point.borderColor);
|
|
||||||
this.lastActive[i]._model.borderWidth = this.lastActive[i].custom && this.lastActive[i].custom.borderWidth ? this.lastActive[i].custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, this.options.elements.point.borderWidth);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 'dataset':
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
// Don't change anything
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Built in hover styling
|
|
||||||
if (this.active.length && this.options.hover.mode) {
|
|
||||||
switch (this.options.hover.mode) {
|
|
||||||
case 'single':
|
|
||||||
dataset = this.data.datasets[this.active[0]._datasetIndex];
|
|
||||||
index = this.active[0]._index;
|
|
||||||
|
|
||||||
this.active[0]._model.radius = this.active[0].custom && this.active[0].custom.hoverRadius ? this.active[0].custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.active[0]._model.radius + 2);
|
|
||||||
this.active[0]._model.backgroundColor = this.active[0].custom && this.active[0].custom.hoverBackgroundColor ? this.active[0].custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.color(this.active[0]._model.backgroundColor).saturate(0.5).darken(0.1).rgbString());
|
|
||||||
this.active[0]._model.borderColor = this.active[0].custom && this.active[0].custom.hoverBorderColor ? this.active[0].custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.color(this.active[0]._model.borderColor).saturate(0.5).darken(0.1).rgbString());
|
|
||||||
this.active[0]._model.borderWidth = this.active[0].custom && this.active[0].custom.hoverBorderWidth ? this.active[0].custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, this.active[0]._model.borderWidth + 2);
|
|
||||||
break;
|
|
||||||
case 'label':
|
|
||||||
for (var i = 0; i < this.active.length; i++) {
|
|
||||||
dataset = this.data.datasets[this.active[i]._datasetIndex];
|
|
||||||
index = this.active[i]._index;
|
|
||||||
|
|
||||||
this.active[i]._model.radius = this.active[i].custom && this.active[i].custom.hoverRadius ? this.active[i].custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.active[i]._model.radius + 2);
|
|
||||||
this.active[i]._model.backgroundColor = this.active[i].custom && this.active[i].custom.hoverBackgroundColor ? this.active[i].custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.color(this.active[i]._model.backgroundColor).saturate(0.5).darken(0.1).rgbString());
|
|
||||||
this.active[i]._model.borderColor = this.active[i].custom && this.active[i].custom.hoverBorderColor ? this.active[i].custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.color(this.active[i]._model.borderColor).saturate(0.5).darken(0.1).rgbString());
|
|
||||||
this.active[i]._model.borderWidth = this.active[i].custom && this.active[i].custom.hoverBorderWidth ? this.active[i].custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, this.active[i]._model.borderWidth + 2);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 'dataset':
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
// Don't change anything
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Built in Tooltips
|
|
||||||
if (this.options.tooltips.enabled) {
|
|
||||||
|
|
||||||
// The usual updates
|
|
||||||
this.tooltip.initialize();
|
|
||||||
|
|
||||||
// Active
|
|
||||||
if (this.active.length) {
|
|
||||||
this.tooltip._model.opacity = 1;
|
|
||||||
|
|
||||||
helpers.extend(this.tooltip, {
|
|
||||||
_active: this.active,
|
|
||||||
});
|
|
||||||
|
|
||||||
this.tooltip.update();
|
|
||||||
} else {
|
|
||||||
// Inactive
|
|
||||||
this.tooltip._model.opacity = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hover animations
|
|
||||||
this.tooltip.pivot();
|
|
||||||
|
|
||||||
if (!this.animating) {
|
|
||||||
var changed;
|
|
||||||
|
|
||||||
helpers.each(this.active, function(element, index) {
|
|
||||||
if (element !== this.lastActive[index]) {
|
|
||||||
changed = true;
|
|
||||||
}
|
|
||||||
}, this);
|
|
||||||
|
|
||||||
// If entering, leaving, or changing elements, animate the change via pivot
|
|
||||||
if ((!this.lastActive.length && this.active.length) ||
|
|
||||||
(this.lastActive.length && !this.active.length) ||
|
|
||||||
(this.lastActive.length && this.active.length && changed)) {
|
|
||||||
|
|
||||||
this.stop();
|
|
||||||
this.render(this.options.hover.animationDuration);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remember Last Active
|
|
||||||
this.lastActive = this.active;
|
|
||||||
return this;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
removeHoverStyle: function(point) {
|
||||||
|
var dataset = this.chart.data.datasets[point._datasetIndex];
|
||||||
|
var index = point._index;
|
||||||
|
|
||||||
|
point._model.radius = point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().radius, index, this.chart.options.elements.point.radius);
|
||||||
|
point._model.backgroundColor = point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBackgroundColor, index, this.chart.options.elements.point.backgroundColor);
|
||||||
|
point._model.borderColor = point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderColor, index, this.chart.options.elements.point.borderColor);
|
||||||
|
point._model.borderWidth = point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderWidth, index, this.chart.options.elements.point.borderWidth);
|
||||||
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}).call(this);
|
}).call(this);
|
||||||
|
|||||||
@ -121,20 +121,18 @@
|
|||||||
this.scales[scale.id] = scale;
|
this.scales[scale.id] = scale;
|
||||||
}, this);
|
}, this);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
if (this.options.scale) {
|
||||||
|
// Build radial axes
|
||||||
|
var ScaleClass = Chart.scaleService.getScaleConstructor(this.options.scale.type);
|
||||||
|
var scale = new ScaleClass({
|
||||||
|
ctx: this.chart.ctx,
|
||||||
|
options: this.options.scale,
|
||||||
|
data: this.data,
|
||||||
|
chart: this.chart,
|
||||||
|
});
|
||||||
|
|
||||||
if (this.options.scale) {
|
this.scale = scale;
|
||||||
// Build radial axes
|
|
||||||
var ScaleClass = Chart.scaleService.getScaleConstructor(this.options.scale.type);
|
|
||||||
var scale = new ScaleClass({
|
|
||||||
ctx: this.chart.ctx,
|
|
||||||
options: axisOptions,
|
|
||||||
data: this.data,
|
|
||||||
id: axisOptions.id,
|
|
||||||
chart: this.chart,
|
|
||||||
});
|
|
||||||
|
|
||||||
this.scale = scale;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);
|
Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);
|
||||||
@ -203,6 +201,9 @@
|
|||||||
helpers.each(this.scales, function(scale) {
|
helpers.each(this.scales, function(scale) {
|
||||||
scale.draw(this.chartArea);
|
scale.draw(this.chartArea);
|
||||||
}, this);
|
}, this);
|
||||||
|
if (this.scale) {
|
||||||
|
this.scale.draw();
|
||||||
|
}
|
||||||
|
|
||||||
// Draw each dataset via its respective controller
|
// Draw each dataset via its respective controller
|
||||||
// TODO: needs support for reverse stacking (line chart)
|
// TODO: needs support for reverse stacking (line chart)
|
||||||
|
|||||||
@ -9,7 +9,7 @@
|
|||||||
display: true,
|
display: true,
|
||||||
|
|
||||||
//Boolean - Whether to animate scaling the chart from the centre
|
//Boolean - Whether to animate scaling the chart from the centre
|
||||||
animate: false,
|
animate: true,
|
||||||
|
|
||||||
lineArc: false,
|
lineArc: false,
|
||||||
|
|
||||||
@ -180,6 +180,7 @@
|
|||||||
// range of the scale
|
// range of the scale
|
||||||
this.max = helpers.max(this.ticks);
|
this.max = helpers.max(this.ticks);
|
||||||
this.min = helpers.min(this.ticks);
|
this.min = helpers.min(this.ticks);
|
||||||
|
console.log(this);
|
||||||
},
|
},
|
||||||
buildYLabels: function() {
|
buildYLabels: function() {
|
||||||
this.yLabels = [];
|
this.yLabels = [];
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user