mirror of
https://github.com/chartjs/Chart.js.git
synced 2025-12-08 20:36:08 +00:00
Radar Chart
This commit is contained in:
Tanner Linsley
parent
1163efbcca
commit
6af94298ec
@ -1,67 +1,61 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Radar Chart</title>
|
||||
<script src="../Chart.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div style="width:30%">
|
||||
<canvas id="canvas" height="450" width="450"></canvas>
|
||||
</div>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
|
||||
<head>
|
||||
<title>Radar Chart</title>
|
||||
<script src="../Chart.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
||||
</head>
|
||||
|
||||
<script>
|
||||
<body>
|
||||
<div style="width:100%">
|
||||
<canvas id="canvas" height="450" width="450"></canvas>
|
||||
</div>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<script>
|
||||
var randomScalingFactor = function() {
|
||||
return Math.round(Math.random() * 100);
|
||||
};
|
||||
var randomColorFactor = function() {
|
||||
return Math.round(Math.random() * 255);
|
||||
};
|
||||
|
||||
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
|
||||
var randomColorFactor = function(){ return Math.round(Math.random()*255)};
|
||||
var config = {
|
||||
data: {
|
||||
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
backgroundColor: "rgba(220,220,220,0.2)",
|
||||
pointBackgroundColor: "rgba(220,220,220,1)",
|
||||
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
|
||||
}, {
|
||||
label: "My Second dataset",
|
||||
backgroundColor: "rgba(151,187,205,0.2)",
|
||||
pointBackgroundColor: "rgba(151,187,205,1)",
|
||||
hoverPointBackgroundColor: "#fff",
|
||||
pointHighlightStroke: "rgba(151,187,205,1)",
|
||||
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true
|
||||
}
|
||||
};
|
||||
|
||||
var radarChartData = {
|
||||
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 : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
|
||||
},
|
||||
{
|
||||
label: "My Second dataset",
|
||||
fillColor: "rgba(151,187,205,0.2)",
|
||||
strokeColor: "rgba(151,187,205,1)",
|
||||
pointColor: "rgba(151,187,205,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(151,187,205,1)",
|
||||
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
|
||||
}
|
||||
]
|
||||
};
|
||||
window.onload = function() {
|
||||
window.myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(config);
|
||||
};
|
||||
|
||||
window.onload = function(){
|
||||
window.myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar({
|
||||
data: radarChartData,
|
||||
options: {
|
||||
responsive: true
|
||||
}
|
||||
});
|
||||
}
|
||||
$('#randomizeData').click(function() {
|
||||
config.data.datasets[0].backgroundColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.3)';
|
||||
config.data.datasets[0].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
|
||||
|
||||
$('#randomizeData').click(function(){
|
||||
radarChartData.datasets[0].fillColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.3)';
|
||||
radarChartData.datasets[0].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()];
|
||||
config.data.datasets[1].backgroundColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.3)';
|
||||
config.data.datasets[1].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
|
||||
|
||||
radarChartData.datasets[1].fillColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.3)';
|
||||
radarChartData.datasets[1].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()];
|
||||
|
||||
window.myRadar.update();
|
||||
window.myRadar.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1273,6 +1273,8 @@
|
||||
|
||||
var vm = this._vm;
|
||||
var ctx = this._chart.ctx;
|
||||
var first = vm._points[0];
|
||||
var last = vm._points[vm._points.length - 1];
|
||||
|
||||
// Draw the background first (so the border is always on top)
|
||||
helpers.each(vm._points, function(point, index) {
|
||||
@ -1296,6 +1298,23 @@
|
||||
}
|
||||
}, this);
|
||||
|
||||
if (vm.loop) {
|
||||
|
||||
if (vm._tension > 0 || 1) {
|
||||
|
||||
ctx.bezierCurveTo(
|
||||
last._vm.controlPointNextX,
|
||||
last._vm.controlPointNextY,
|
||||
first._vm.controlPointPreviousX,
|
||||
first._vm.controlPointPreviousY,
|
||||
first._vm.x,
|
||||
first._vm.y
|
||||
);
|
||||
} else {
|
||||
ctx.lineTo(first._vm.x, first._vm.y);
|
||||
}
|
||||
}
|
||||
|
||||
if (vm._points.length > 0) {
|
||||
//Round off the line by going to the base of the chart, back to the start, then fill.
|
||||
ctx.lineTo(vm._points[vm._points.length - 1].x, vm.scaleZero);
|
||||
@ -1331,6 +1350,21 @@
|
||||
}
|
||||
}
|
||||
}, this);
|
||||
if (vm.loop) {
|
||||
if (vm._tension > 0 || 1) {
|
||||
|
||||
ctx.bezierCurveTo(
|
||||
last._vm.controlPointNextX,
|
||||
last._vm.controlPointNextY,
|
||||
first._vm.controlPointPreviousX,
|
||||
first._vm.controlPointPreviousY,
|
||||
first._vm.x,
|
||||
first._vm.y
|
||||
);
|
||||
} else {
|
||||
ctx.lineTo(first._vm.x, first._vm.y);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
ctx.stroke();
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
display: true,
|
||||
position: "bottom",
|
||||
id: "x-axis-1", // need an ID so datasets can reference the scale
|
||||
|
||||
|
||||
// grid line settings
|
||||
gridLines: {
|
||||
show: true,
|
||||
@ -46,7 +46,7 @@
|
||||
display: true,
|
||||
position: "left",
|
||||
id: "y-axis-1",
|
||||
|
||||
|
||||
// grid line settings
|
||||
gridLines: {
|
||||
show: true,
|
||||
@ -78,22 +78,22 @@
|
||||
//Boolean - Whether to stack the lines essentially creating a stacked area chart.
|
||||
stacked: false,
|
||||
|
||||
points: {
|
||||
point: {
|
||||
// Number - Radius of each point dot in pixels
|
||||
radius: 3,
|
||||
|
||||
|
||||
// Number - Pixel width of point dot border
|
||||
borderWidth: 1,
|
||||
|
||||
|
||||
// Number - Pixel width of point on hover
|
||||
hoverRadius: 5,
|
||||
|
||||
|
||||
// Number - Pixel width of point dot border on hover
|
||||
hoverBorderWidth: 2,
|
||||
|
||||
|
||||
// Color
|
||||
backgroundColor: Chart.defaults.global.defaultColor,
|
||||
|
||||
|
||||
// Color
|
||||
borderColor: Chart.defaults.global.defaultColor,
|
||||
|
||||
@ -101,7 +101,7 @@
|
||||
hitRadius: 6,
|
||||
},
|
||||
|
||||
lines: {
|
||||
line: {
|
||||
//Number - Tension of the bezier curve between points. Use 0 to turn off bezier tension
|
||||
tension: 0.4,
|
||||
},
|
||||
@ -207,17 +207,17 @@
|
||||
helpers.extend(dataset.metaDataset, {
|
||||
// Utility
|
||||
_datasetIndex: datasetIndex,
|
||||
|
||||
|
||||
// Data
|
||||
_points: dataset.metaData,
|
||||
|
||||
|
||||
// Geometry
|
||||
scaleTop: yScale.top,
|
||||
scaleBottom: yScale.bottom,
|
||||
scaleZero: yScale.getPixelForValue(0),
|
||||
|
||||
|
||||
// Appearance
|
||||
tension: dataset.tension || this.options.lines.tension,
|
||||
tension: dataset.tension || this.options.line.tension,
|
||||
backgroundColor: dataset.backgroundColor || this.options.backgroundColor,
|
||||
borderWidth: dataset.borderWidth || this.options.borderWidth,
|
||||
borderColor: dataset.borderColor || this.options.borderColor,
|
||||
@ -235,25 +235,25 @@
|
||||
_chart: this.chart,
|
||||
_datasetIndex: datasetIndex,
|
||||
_index: index,
|
||||
|
||||
|
||||
// Data
|
||||
label: this.data.labels[index],
|
||||
value: this.data.datasets[datasetIndex].data[index],
|
||||
datasetLabel: this.data.datasets[datasetIndex].label,
|
||||
|
||||
|
||||
// Geometry
|
||||
offsetGridLines: this.options.offsetGridLines,
|
||||
x: xScale.getPixelForValue(null, index, true), // value not used in dataset scale, but we want a consistent API between scales
|
||||
y: yScale.getPointPixelForValue(this.data.datasets[datasetIndex].data[index], index, datasetIndex),
|
||||
tension: this.data.datasets[datasetIndex].metaDataset.tension,
|
||||
|
||||
|
||||
// Appearnce
|
||||
radius: this.data.datasets[datasetIndex].pointRadius || this.options.points.radius,
|
||||
backgroundColor: this.data.datasets[datasetIndex].pointBackgroundColor || this.options.points.backgroundColor,
|
||||
borderWidth: this.data.datasets[datasetIndex].pointBorderWidth || this.options.pointsborderWidth,
|
||||
|
||||
radius: this.data.datasets[datasetIndex].pointRadius || this.options.point.radius,
|
||||
backgroundColor: this.data.datasets[datasetIndex].pointBackgroundColor || this.options.point.backgroundColor,
|
||||
borderWidth: this.data.datasets[datasetIndex].pointBorderWidth || this.options.point.borderWidth,
|
||||
|
||||
// Tooltip
|
||||
hoverRadius: this.data.datasets[datasetIndex].pointHitRadius || this.options.points.hitRadius,
|
||||
hoverRadius: this.data.datasets[datasetIndex].pointHitRadius || this.options.point.hitRadius,
|
||||
});
|
||||
}, this);
|
||||
|
||||
@ -337,7 +337,7 @@
|
||||
} else if (value < this.min) {
|
||||
this.min = value;
|
||||
}
|
||||
|
||||
|
||||
if (this.max === null) {
|
||||
this.max = value;
|
||||
} else if (value > this.max) {
|
||||
|
||||
@ -1,233 +1,257 @@
|
||||
(function(){
|
||||
"use strict";
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
var root = this,
|
||||
Chart = root.Chart,
|
||||
helpers = Chart.helpers;
|
||||
var root = this,
|
||||
Chart = root.Chart,
|
||||
helpers = Chart.helpers;
|
||||
|
||||
|
||||
|
||||
Chart.Type.extend({
|
||||
name: "Radar",
|
||||
defaults:{
|
||||
Chart.Type.extend({
|
||||
name: "Radar",
|
||||
defaults: {
|
||||
|
||||
scale: {
|
||||
scaleType: "radialLinear",
|
||||
display: true,
|
||||
|
||||
//Boolean - Whether to animate scaling the chart from the centre
|
||||
animate : false,
|
||||
scale: {
|
||||
scaleType: "radialLinear",
|
||||
display: true,
|
||||
|
||||
lineArc: false,
|
||||
//Boolean - Whether to animate scaling the chart from the centre
|
||||
animate: false,
|
||||
|
||||
// grid line settings
|
||||
gridLines: {
|
||||
show: true,
|
||||
color: "rgba(0, 0, 0, 0.05)",
|
||||
lineWidth: 1,
|
||||
},
|
||||
lineArc: false,
|
||||
|
||||
angleLines: {
|
||||
show: true,
|
||||
color: "rgba(0,0,0,.1)",
|
||||
lineWidth: 1
|
||||
},
|
||||
// grid line settings
|
||||
gridLines: {
|
||||
show: true,
|
||||
color: "rgba(0, 0, 0, 0.05)",
|
||||
lineWidth: 1,
|
||||
},
|
||||
|
||||
// scale numbers
|
||||
beginAtZero: true,
|
||||
angleLines: {
|
||||
show: true,
|
||||
color: "rgba(0,0,0,.1)",
|
||||
lineWidth: 1
|
||||
},
|
||||
|
||||
// label settings
|
||||
labels: {
|
||||
show: true,
|
||||
template: "<%=value%>",
|
||||
fontSize: 12,
|
||||
fontStyle: "normal",
|
||||
fontColor: "#666",
|
||||
fontFamily: "Helvetica Neue",
|
||||
// scale numbers
|
||||
beginAtZero: true,
|
||||
|
||||
//Boolean - Show a backdrop to the scale label
|
||||
showLabelBackdrop : true,
|
||||
// label settings
|
||||
labels: {
|
||||
show: true,
|
||||
template: "<%=value%>",
|
||||
fontSize: 12,
|
||||
fontStyle: "normal",
|
||||
fontColor: "#666",
|
||||
fontFamily: "Helvetica Neue",
|
||||
|
||||
//String - The colour of the label backdrop
|
||||
backdropColor : "rgba(255,255,255,0.75)",
|
||||
//Boolean - Show a backdrop to the scale label
|
||||
showLabelBackdrop: true,
|
||||
|
||||
//Number - The backdrop padding above & below the label in pixels
|
||||
backdropPaddingY : 2,
|
||||
//String - The colour of the label backdrop
|
||||
backdropColor: "rgba(255,255,255,0.75)",
|
||||
|
||||
//Number - The backdrop padding to the side of the label in pixels
|
||||
backdropPaddingX : 2,
|
||||
},
|
||||
|
||||
pointLabels: {
|
||||
//String - Point label font declaration
|
||||
fontFamily : "'Arial'",
|
||||
//Number - The backdrop padding above & below the label in pixels
|
||||
backdropPaddingY: 2,
|
||||
|
||||
//String - Point label font weight
|
||||
fontStyle : "normal",
|
||||
//Number - The backdrop padding to the side of the label in pixels
|
||||
backdropPaddingX: 2,
|
||||
},
|
||||
|
||||
//Number - Point label font size in pixels
|
||||
fontSize : 10,
|
||||
pointLabels: {
|
||||
//String - Point label font declaration
|
||||
fontFamily: "'Arial'",
|
||||
|
||||
//String - Point label font colour
|
||||
fontColor : "#666",
|
||||
},
|
||||
},
|
||||
//String - Point label font weight
|
||||
fontStyle: "normal",
|
||||
|
||||
//Boolean - Whether to show a dot for each point
|
||||
pointDot : true,
|
||||
//Number - Point label font size in pixels
|
||||
fontSize: 10,
|
||||
|
||||
//Number - Radius of each point dot in pixels
|
||||
pointRadius: 3,
|
||||
//String - Point label font colour
|
||||
fontColor: "#666",
|
||||
},
|
||||
},
|
||||
|
||||
//Number - Pixel width of point dot border
|
||||
pointBorderWidth: 1,
|
||||
line: {
|
||||
|
||||
//Number - Pixel width of point on hover
|
||||
pointHoverRadius: 5,
|
||||
//Boolean - Whether to show a dot for each point
|
||||
show: true,
|
||||
|
||||
//Number - Pixel width of point dot border on hover
|
||||
pointHoverBorderWidth: 2,
|
||||
pointBackgroundColor: Chart.defaults.global.defaultColor,
|
||||
pointBorderColor: Chart.defaults.global.defaultColor,
|
||||
//Number - Pixel width of dot border
|
||||
borderWidth: 1,
|
||||
|
||||
//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
|
||||
pointHitRadius: 20,
|
||||
backgroundColor: Chart.defaults.global.defaultColor,
|
||||
|
||||
//Boolean - Whether to show a stroke for datasets
|
||||
datasetStroke : true,
|
||||
borderColor: Chart.defaults.global.defaultColor,
|
||||
|
||||
//Number - Pixel width of dataset stroke
|
||||
datasetStrokeWidth : 2,
|
||||
//Number - amount extra to add to the radius to cater for hit detection outside the drawn
|
||||
hitRadius: 20,
|
||||
|
||||
//Boolean - Whether to fill the dataset with a colour
|
||||
datasetFill : true,
|
||||
//Number - Tension of the bezier curve between points. Use 0 to turn off bezier tension
|
||||
tension: 0.4,
|
||||
},
|
||||
|
||||
//String - A legend template
|
||||
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>"
|
||||
point: {
|
||||
//Boolean - Whether to show a dot for each point
|
||||
show: true,
|
||||
|
||||
},
|
||||
//Number - Radius of each dot in pixels
|
||||
radius: 3,
|
||||
|
||||
initialize: function(){
|
||||
this.PointClass = Chart.Point.extend({
|
||||
display: this.options.pointDot,
|
||||
_chart: this.chart
|
||||
});
|
||||
//Number - Pixel width of dot border
|
||||
borderWidth: 1,
|
||||
|
||||
this.datasets = [];
|
||||
//Number - Pixel width of on hover
|
||||
hoverRadius: 5,
|
||||
|
||||
this.buildScale(this.data);
|
||||
//Number - Pixel width of dot border on hover
|
||||
hoverBorderWidth: 2,
|
||||
|
||||
//Set up tooltip events on the chart
|
||||
if (this.options.showTooltips){
|
||||
helpers.bindEvents(this, this.options.events, function(evt){
|
||||
var activePointsCollection = (evt.type !== 'mouseout') ? this.getPointsAtEvent(evt) : [];
|
||||
backgroundColor: Chart.defaults.global.defaultColor,
|
||||
|
||||
this.eachPoints(function(point){
|
||||
point.restore(['fillColor', 'strokeColor']);
|
||||
});
|
||||
helpers.each(activePointsCollection, function(activePoint){
|
||||
activePoint.fillColor = activePoint.highlightFill;
|
||||
activePoint.strokeColor = activePoint.highlightStroke;
|
||||
});
|
||||
borderColor: Chart.defaults.global.defaultColor,
|
||||
|
||||
this.showTooltip(activePointsCollection);
|
||||
});
|
||||
}
|
||||
//Number - amount extra to add to the radius to cater for hit detection outside the drawn
|
||||
hitRadius: 20,
|
||||
},
|
||||
|
||||
//Iterate through each of the datasets, and build this into a property of the chart
|
||||
helpers.each(this.data.datasets,function(dataset){
|
||||
//String - A legend template
|
||||
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>"
|
||||
|
||||
var datasetObject = {
|
||||
label: dataset.label || null,
|
||||
fillColor : dataset.fillColor,
|
||||
strokeColor : dataset.strokeColor,
|
||||
pointColor : dataset.pointColor,
|
||||
pointStrokeColor : dataset.pointStrokeColor,
|
||||
points : []
|
||||
};
|
||||
},
|
||||
|
||||
this.datasets.push(datasetObject);
|
||||
initialize: function() {
|
||||
|
||||
helpers.each(dataset.data,function(dataPoint,index){
|
||||
//Add a new point for each piece of data, passing any required data to draw.
|
||||
var pointPosition;
|
||||
if (!this.scale.animation){
|
||||
pointPosition = this.scale.getPointPosition(index, this.scale.calculateCenterOffset(dataPoint));
|
||||
}
|
||||
datasetObject.points.push(new this.PointClass({
|
||||
value : dataPoint,
|
||||
label : this.data.labels[index],
|
||||
datasetLabel: dataset.label,
|
||||
x: (this.options.animation) ? this.scale.xCenter : pointPosition.x,
|
||||
y: (this.options.animation) ? this.scale.yCenter : pointPosition.y,
|
||||
strokeColor : dataset.pointStrokeColor,
|
||||
fillColor : dataset.pointColor,
|
||||
highlightFill : dataset.pointHighlightFill || dataset.pointColor,
|
||||
highlightStroke : dataset.pointHighlightStroke || dataset.pointStrokeColor,
|
||||
this.buildScale(this.data);
|
||||
|
||||
// Appearance
|
||||
radius: dataset.pointRadius || this.options.pointRadius,
|
||||
backgroundColor: dataset.pointBackgroundColor || this.options.pointBackgroundColor,
|
||||
borderWidth: dataset.pointBorderWidth || this.options.pointBorderWidth,
|
||||
|
||||
// Tooltip
|
||||
hoverRadius: dataset.pointHitRadius || this.options.pointHitRadius,
|
||||
}));
|
||||
},this);
|
||||
|
||||
},this);
|
||||
|
||||
this.render();
|
||||
},
|
||||
eachPoints : function(callback){
|
||||
helpers.each(this.datasets,function(dataset){
|
||||
helpers.each(dataset.points,callback,this);
|
||||
},this);
|
||||
},
|
||||
// Events
|
||||
helpers.bindEvents(this, this.options.events, this.events);
|
||||
|
||||
getPointsAtEvent : function(evt){
|
||||
var mousePosition = helpers.getRelativePosition(evt),
|
||||
fromCenter = helpers.getAngleFromPoint({
|
||||
x: this.scale.xCenter,
|
||||
y: this.scale.yCenter
|
||||
}, mousePosition);
|
||||
var _this = this;
|
||||
|
||||
var anglePerIndex = (Math.PI * 2) /this.scale.valuesCount,
|
||||
pointIndex = Math.round((fromCenter.angle - Math.PI * 1.5) / anglePerIndex),
|
||||
activePointsCollection = [];
|
||||
//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();
|
||||
dataset.metaData = [];
|
||||
helpers.each(dataset.data, function(dataPoint, index) {
|
||||
dataset.metaData.push(new Chart.Point());
|
||||
}, this);
|
||||
|
||||
// If we're at the top, make the pointIndex 0 to get the first of the array.
|
||||
if (pointIndex >= this.scale.valuesCount || pointIndex < 0){
|
||||
pointIndex = 0;
|
||||
}
|
||||
// The line chart only supports a single x axis because the x axis is always a dataset axis
|
||||
}, this);
|
||||
|
||||
if (fromCenter.distance <= this.scale.drawingArea){
|
||||
helpers.each(this.datasets, function(dataset){
|
||||
activePointsCollection.push(dataset.points[pointIndex]);
|
||||
});
|
||||
}
|
||||
// Build and fit the scale. Needs to happen after the axis IDs have been set
|
||||
this.buildScale();
|
||||
Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);
|
||||
|
||||
return activePointsCollection;
|
||||
},
|
||||
// Set defaults for lines
|
||||
helpers.each(this.data.datasets, function(dataset, datasetIndex) {
|
||||
helpers.extend(dataset.metaDataset, {
|
||||
_points: dataset.metaData,
|
||||
_datasetIndex: datasetIndex,
|
||||
_chart: this.chart,
|
||||
loop: true
|
||||
});
|
||||
// Fill in dataset defaults from options
|
||||
helpers.extend(dataset, helpers.merge(this.options, dataset));
|
||||
// Copy to view modele
|
||||
dataset.metaDataset.save();
|
||||
}, this);
|
||||
|
||||
buildScale : function(data){
|
||||
var self = this;
|
||||
// Set defaults for points
|
||||
this.eachElement(function(point, index, dataset, datasetIndex) {
|
||||
|
||||
var ScaleConstructor = Chart.scales.getScaleConstructor(this.options.scale.scaleType);
|
||||
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: data.labels,
|
||||
valuesCount: data.datasets[0].data.length,
|
||||
calculateRange: function() {
|
||||
this.min = null;
|
||||
this.max = null;
|
||||
helpers.extend(point, {
|
||||
_datasetIndex: datasetIndex,
|
||||
_index: index,
|
||||
_chart: this.chart,
|
||||
display: this.options.pointDot,
|
||||
x: this.scale.xCenter,
|
||||
y: this.scale.yCenter,
|
||||
});
|
||||
|
||||
helpers.each(self.data.datasets, function(dataset) {
|
||||
// Default bezier control points
|
||||
helpers.extend(point, {
|
||||
controlPointPreviousX: this.scale.xCenter,
|
||||
controlPointPreviousY: this.scale.yCenter,
|
||||
controlPointNextX: this.scale.xCenter,
|
||||
controlPointNextY: this.scale.yCenter,
|
||||
});
|
||||
// Copy to view model
|
||||
point.save();
|
||||
|
||||
}, this);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 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);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
this.update();
|
||||
},
|
||||
|
||||
/*getPointsAtEvent: function(evt) {
|
||||
var mousePosition = helpers.getRelativePosition(evt),
|
||||
fromCenter = helpers.getAngleFromPoint({
|
||||
x: this.scale.xCenter,
|
||||
y: this.scale.yCenter
|
||||
}, mousePosition);
|
||||
|
||||
var anglePerIndex = (Math.PI * 2) / this.scale.valuesCount,
|
||||
pointIndex = Math.round((fromCenter.angle - Math.PI * 1.5) / anglePerIndex),
|
||||
activePointsCollection = [];
|
||||
|
||||
// If we're at the top, make the pointIndex 0 to get the first of the array.
|
||||
if (pointIndex >= this.scale.valuesCount || pointIndex < 0) {
|
||||
pointIndex = 0;
|
||||
}
|
||||
|
||||
if (fromCenter.distance <= this.scale.drawingArea) {
|
||||
helpers.each(this.data.datasets, function(dataset) {
|
||||
activePointsCollection.push(dataset.points[pointIndex]);
|
||||
});
|
||||
}
|
||||
|
||||
return activePointsCollection;
|
||||
},*/
|
||||
nextPoint: function(collection, index) {
|
||||
return collection[index - 1] || collection[collection.length - 1];
|
||||
},
|
||||
previousPoint: function(collection, index) {
|
||||
return collection[index + 1] || collection[0];
|
||||
},
|
||||
buildScale: function() {
|
||||
var self = this;
|
||||
|
||||
var ScaleConstructor = Chart.scales.getScaleConstructor(this.options.scale.scaleType);
|
||||
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,
|
||||
calculateRange: function() {
|
||||
this.min = null;
|
||||
this.max = null;
|
||||
|
||||
helpers.each(self.data.datasets, function(dataset) {
|
||||
if (dataset.yAxisID === this.id) {
|
||||
helpers.each(dataset.data, function(value, index) {
|
||||
if (this.min === null) {
|
||||
@ -235,7 +259,7 @@
|
||||
} else if (value < this.min) {
|
||||
this.min = value;
|
||||
}
|
||||
|
||||
|
||||
if (this.max === null) {
|
||||
this.max = value;
|
||||
} else if (value > this.max) {
|
||||
@ -244,139 +268,286 @@
|
||||
}, this);
|
||||
}
|
||||
}, this);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
this.scale.setScaleSize();
|
||||
this.scale.calculateRange();
|
||||
this.scale.generateTicks();
|
||||
this.scale.buildYLabels();
|
||||
},
|
||||
addData : function(valuesArray,label){
|
||||
//Map the values array for each of the datasets
|
||||
this.scale.valuesCount++;
|
||||
helpers.each(valuesArray,function(value,datasetIndex){
|
||||
var pointPosition = this.scale.getPointPosition(this.scale.valuesCount, this.scale.calculateCenterOffset(value));
|
||||
this.datasets[datasetIndex].points.push(new this.PointClass({
|
||||
value : value,
|
||||
label : label,
|
||||
datasetLabel: this.datasets[datasetIndex].label,
|
||||
x: pointPosition.x,
|
||||
y: pointPosition.y,
|
||||
strokeColor : this.datasets[datasetIndex].pointStrokeColor,
|
||||
fillColor : this.datasets[datasetIndex].pointColor
|
||||
}));
|
||||
},this);
|
||||
this.scale.setScaleSize();
|
||||
this.scale.calculateRange();
|
||||
this.scale.generateTicks();
|
||||
this.scale.buildYLabels();
|
||||
},
|
||||
update: function() {
|
||||
|
||||
this.scale.labels.push(label);
|
||||
// Update the lines
|
||||
this.eachDataset(function(dataset, datasetIndex) {
|
||||
|
||||
this.reflow();
|
||||
helpers.extend(dataset.metaDataset, {
|
||||
// Utility
|
||||
_datasetIndex: datasetIndex,
|
||||
|
||||
this.update();
|
||||
},
|
||||
removeData : function(){
|
||||
this.scale.valuesCount--;
|
||||
this.scale.labels.shift();
|
||||
helpers.each(this.datasets,function(dataset){
|
||||
dataset.points.shift();
|
||||
},this);
|
||||
this.reflow();
|
||||
this.update();
|
||||
},
|
||||
update : function(){
|
||||
//Iterate through each of the datasets, and build this into a property of the chart
|
||||
helpers.each(this.data.datasets,function(dataset,datasetIndex){
|
||||
// Data
|
||||
_points: dataset.metaData,
|
||||
|
||||
helpers.extend(this.datasets[datasetIndex], {
|
||||
label : dataset.label || null,
|
||||
fillColor : dataset.fillColor,
|
||||
strokeColor : dataset.strokeColor,
|
||||
pointColor : dataset.pointColor,
|
||||
pointStrokeColor : dataset.pointStrokeColor,
|
||||
});
|
||||
// Geometry
|
||||
scaleTop: this.scale.top,
|
||||
scaleBottom: this.scale.bottom,
|
||||
scaleZero: this.scale.getPointPosition(0),
|
||||
|
||||
helpers.each(dataset.data,function(dataPoint,index){
|
||||
helpers.extend(this.datasets[datasetIndex].points[index], {
|
||||
value : dataPoint,
|
||||
label : this.data.labels[index],
|
||||
datasetLabel: dataset.label,
|
||||
strokeColor : dataset.pointStrokeColor,
|
||||
fillColor : dataset.pointColor,
|
||||
highlightFill : dataset.pointHighlightFill || dataset.pointColor,
|
||||
highlightStroke : dataset.pointHighlightStroke || dataset.pointStrokeColor
|
||||
});
|
||||
},this);
|
||||
// Appearance
|
||||
tension: dataset.tension || this.options.line.tension,
|
||||
backgroundColor: dataset.backgroundColor || this.options.backgroundColor,
|
||||
borderWidth: dataset.borderWidth || this.options.borderWidth,
|
||||
borderColor: dataset.borderColor || this.options.borderColor,
|
||||
});
|
||||
dataset.metaDataset.pivot();
|
||||
}, this);
|
||||
|
||||
},this);
|
||||
|
||||
this.eachPoints(function(point){
|
||||
point.save();
|
||||
});
|
||||
this.reflow();
|
||||
this.render();
|
||||
},
|
||||
reflow: function(){
|
||||
helpers.extend(this.scale, {
|
||||
width : this.chart.width,
|
||||
height: this.chart.height,
|
||||
size : helpers.min([this.chart.width, this.chart.height]),
|
||||
xCenter: this.chart.width/2,
|
||||
yCenter: this.chart.height/2
|
||||
});
|
||||
|
||||
this.scale.calculateRange();
|
||||
this.scale.generateTicks();
|
||||
this.scale.buildYLabels();
|
||||
},
|
||||
draw : function(ease){
|
||||
var easeDecimal = ease || 1,
|
||||
ctx = this.chart.ctx;
|
||||
this.clear();
|
||||
this.scale.draw();
|
||||
// Update the points
|
||||
this.eachElement(function(point, index, dataset, datasetIndex) {
|
||||
|
||||
helpers.each(this.datasets,function(dataset){
|
||||
var pointPosition = this.scale.getPointPosition(index, this.scale.calculateCenterOffset(this.data.datasets[datasetIndex].data[index]));
|
||||
|
||||
//Transition each point first so that the line and point drawing isn't out of sync
|
||||
helpers.each(dataset.points,function(point,index){
|
||||
if (point.hasValue()){
|
||||
point.transition(easeDecimal);
|
||||
}
|
||||
},this);
|
||||
helpers.extend(point, {
|
||||
// Utility
|
||||
_chart: this.chart,
|
||||
_datasetIndex: datasetIndex,
|
||||
_index: index,
|
||||
|
||||
// Data
|
||||
label: this.data.labels[index],
|
||||
value: this.data.datasets[datasetIndex].data[index],
|
||||
datasetLabel: this.data.datasets[datasetIndex].label,
|
||||
|
||||
// Geometry
|
||||
offsetGridLines: this.options.offsetGridLines,
|
||||
x: pointPosition.x,
|
||||
y: pointPosition.y,
|
||||
tension: this.data.datasets[datasetIndex].metaDataset.tension,
|
||||
|
||||
// Appearnce
|
||||
radius: this.data.datasets[datasetIndex].pointRadius || this.options.point.radius,
|
||||
backgroundColor: this.data.datasets[datasetIndex].pointBackgroundColor || this.options.point.backgroundColor,
|
||||
borderWidth: this.data.datasets[datasetIndex].pointBorderWidth || this.options.pointsborderWidth,
|
||||
|
||||
// Tooltip
|
||||
hoverRadius: this.data.datasets[datasetIndex].pointHitRadius || this.options.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),
|
||||
point,
|
||||
this.nextPoint(dataset, index),
|
||||
point.tension
|
||||
);
|
||||
|
||||
point.controlPointPreviousX = controlPoints.previous.x;
|
||||
point.controlPointNextX = controlPoints.next.x;
|
||||
|
||||
// Prevent the bezier going outside of the bounds of the graph
|
||||
|
||||
// Cap puter bezier handles to the upper/lower scale bounds
|
||||
if (controlPoints.next.y > this.chartArea.bottom) {
|
||||
point.controlPointNextY = this.chartArea.bottom;
|
||||
} else if (controlPoints.next.y < this.chartArea.top) {
|
||||
point.controlPointNextY = this.chartArea.top;
|
||||
} else {
|
||||
point.controlPointNextY = controlPoints.next.y;
|
||||
}
|
||||
|
||||
// Cap inner bezier handles to the upper/lower scale bounds
|
||||
if (controlPoints.previous.y > this.chartArea.bottom) {
|
||||
point.controlPointPreviousY = this.chartArea.bottom;
|
||||
} else if (controlPoints.previous.y < this.chartArea.top) {
|
||||
point.controlPointPreviousY = this.chartArea.top;
|
||||
} else {
|
||||
point.controlPointPreviousY = controlPoints.previous.y;
|
||||
}
|
||||
// Now pivot the point for animation
|
||||
point.pivot();
|
||||
}, this);
|
||||
|
||||
this.render();
|
||||
},
|
||||
draw: function(ease) {
|
||||
|
||||
var easingDecimal = ease || 1;
|
||||
this.clear();
|
||||
|
||||
|
||||
// reverse for-loop for proper stacking
|
||||
for (var i = this.data.datasets.length - 1; i >= 0; i--) {
|
||||
|
||||
//Draw the line between all the points
|
||||
ctx.lineWidth = this.options.datasetStrokeWidth;
|
||||
ctx.strokeStyle = dataset.strokeColor;
|
||||
ctx.beginPath();
|
||||
helpers.each(dataset.points,function(point,index){
|
||||
if (index === 0){
|
||||
ctx.moveTo(point.x,point.y);
|
||||
}
|
||||
else{
|
||||
ctx.lineTo(point.x,point.y);
|
||||
}
|
||||
},this);
|
||||
ctx.closePath();
|
||||
ctx.stroke();
|
||||
var dataset = this.data.datasets[i];
|
||||
var datasetIndex = i;
|
||||
|
||||
ctx.fillStyle = dataset.fillColor;
|
||||
ctx.fill();
|
||||
// Transition Point Locations
|
||||
helpers.each(dataset.metaData, function(point, index) {
|
||||
point.transition(easingDecimal);
|
||||
}, this);
|
||||
|
||||
//Now draw the points over the line
|
||||
//A little inefficient double looping, but better than the line
|
||||
//lagging behind the point positions
|
||||
helpers.each(dataset.points,function(point){
|
||||
if (point.hasValue()){
|
||||
point.draw();
|
||||
}
|
||||
});
|
||||
// Transition and Draw the line
|
||||
dataset.metaDataset.transition(easingDecimal).draw();
|
||||
|
||||
},this);
|
||||
// Draw the points
|
||||
helpers.each(dataset.metaData, function(point) {
|
||||
point.draw();
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
// Draw all the scales
|
||||
this.scale.draw(this.chartArea);
|
||||
|
||||
});
|
||||
// Finally draw the tooltip
|
||||
this.tooltip.transition(easingDecimal).draw();
|
||||
|
||||
},
|
||||
events: function(e) {
|
||||
|
||||
// If exiting chart
|
||||
if (e.type == 'mouseout') {
|
||||
return this;
|
||||
}
|
||||
|
||||
this.lastActive = this.lastActive || [];
|
||||
|
||||
// Find Active Elements
|
||||
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.onHover) {
|
||||
this.options.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;
|
||||
// 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];
|
||||
|
||||
this.lastActive[0].radius = dataset.pointRadius;
|
||||
this.lastActive[0].backgroundColor = dataset.pointBackgroundColor;
|
||||
this.lastActive[0].borderColor = dataset.pointBorderColor;
|
||||
this.lastActive[0].borderWidth = dataset.pointBorderWidth;
|
||||
break;
|
||||
case 'label':
|
||||
for (var i = 0; i < this.lastActive.length; i++) {
|
||||
dataset = this.data.datasets[this.lastActive[i]._datasetIndex];
|
||||
|
||||
this.lastActive[i].radius = dataset.pointRadius;
|
||||
this.lastActive[i].backgroundColor = dataset.pointBackgroundColor;
|
||||
this.lastActive[i].borderColor = dataset.pointBorderColor;
|
||||
this.lastActive[i].borderWidth = dataset.pointBorderWidth;
|
||||
}
|
||||
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];
|
||||
|
||||
this.active[0].radius = dataset.pointHoverRadius || dataset.pointRadius + 2;
|
||||
this.active[0].backgroundColor = dataset.pointHoverBackgroundColor || helpers.color(dataset.pointBackgroundColor).saturate(0.5).darken(0.35).rgbString();
|
||||
this.active[0].borderColor = dataset.pointHoverBorderColor || helpers.color(dataset.pointBorderColor).saturate(0.5).darken(0.35).rgbString();
|
||||
this.active[0].borderWidth = dataset.pointHoverBorderWidth || dataset.pointBorderWidth + 2;
|
||||
break;
|
||||
case 'label':
|
||||
for (var i = 0; i < this.active.length; i++) {
|
||||
dataset = this.data.datasets[this.active[i]._datasetIndex];
|
||||
|
||||
this.active[i].radius = dataset.pointHoverRadius || dataset.pointRadius + 2;
|
||||
this.active[i].backgroundColor = dataset.pointHoverBackgroundColor || helpers.color(dataset.pointBackgroundColor).saturate(0.5).darken(0.35).rgbString();
|
||||
this.active[i].borderColor = dataset.pointHoverBorderColor || helpers.color(dataset.pointBorderColor).saturate(0.5).darken(0.35).rgbString();
|
||||
this.active[i].borderWidth = dataset.pointHoverBorderWidth || dataset.pointBorderWidth + 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) {
|
||||
helpers.extend(this.tooltip, {
|
||||
opacity: 1,
|
||||
_active: this.active,
|
||||
});
|
||||
|
||||
this.tooltip.update();
|
||||
} else {
|
||||
// Inactive
|
||||
helpers.extend(this.tooltip, {
|
||||
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.hoverAnimationDuration);
|
||||
}
|
||||
}
|
||||
|
||||
// Remember Last Active
|
||||
this.lastActive = this.active;
|
||||
return this;
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
1634
src/Chart.Scale.js
1634
src/Chart.Scale.js
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user