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

More nested config stuff. Not sure what all of the options in the line config do, but left them in. Ensured that tooltips work.

Browse Source
This commit is contained in:
Evert Timberg
2015-05-26 21:16:18 -04:00
parent 7d8b1712a7
commit e3519f5bd4
6 changed files with 79 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/Chart.Bar.js
View File

@@ -84,7 +84,7 @@
//Number - Spacing between data sets within X values
datasetSpacing: 1,
}
},
//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].backgroundColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
@@ -162,7 +162,7 @@
// Find Active Elements
this.active = function() {
switch (this.options.hoverMode) {
switch (this.options.hover.mode) {
case 'single':
return this.getElementAtEvent(e);
case 'label':
@@ -181,7 +181,7 @@
// Remove styling for last active (even if it may still be active)
if (this.lastActive.length) {
switch (this.options.hoverMode) {
switch (this.options.hover.mode) {
case 'single':
this.lastActive[0].backgroundColor = this.data.datasets[this.lastActive[0]._datasetIndex].backgroundColor;
this.lastActive[0].borderColor = this.data.datasets[this.lastActive[0]._datasetIndex].borderColor;
@@ -200,8 +200,8 @@
}
// Built in hover styling
if (this.active.length && this.options.hoverMode) {
switch (this.options.hoverMode) {
if (this.active.length && this.options.hover.mode) {
switch (this.options.hover.mode) {
case 'single':
this.active[0].backgroundColor = this.data.datasets[this.active[0]._datasetIndex].hoverBackgroundColor || helpers.color(this.active[0].backgroundColor).saturate(0.8).darken(0.2).rgbString();
this.active[0].borderColor = this.data.datasets[this.active[0]._datasetIndex].hoverBorderColor || helpers.color(this.active[0].borderColor).saturate(0.8).darken(0.2).rgbString();
@@ -221,7 +221,7 @@
// Built in Tooltips
if (this.options.showTooltips) {
if (this.options.tooltips.enabled) {
// The usual updates
this.tooltip.initialize();

42
src/Chart.Core.js
View File

@@ -80,7 +80,7 @@
hover: {
// String || boolean
mode: 'single', // 'label', 'dataset', 'false'
mode: 'label', // 'label', 'dataset', 'false'
//Function(event, activeElements) - Custom hover handler
onHover: null,
@@ -1480,21 +1480,21 @@
var options = this._options;
extend(this, {
opacity: 0,
xPadding: options.tooltipXPadding,
yPadding: options.tooltipYPadding,
xOffset: options.tooltipXOffset,
backgroundColor: options.tooltipBackgroundColor,
textColor: options.tooltipFontColor,
_fontFamily: options.tooltipFontFamily,
_fontStyle: options.tooltipFontStyle,
fontSize: options.tooltipFontSize,
titleTextColor: options.tooltipTitleFontColor,
_titleFontFamily: options.tooltipTitleFontFamily,
_titleFontStyle: options.tooltipTitleFontStyle,
titleFontSize: options.tooltipTitleFontSize,
caretHeight: options.tooltipCaretSize,
cornerRadius: options.tooltipCornerRadius,
legendColorBackground: options.multiTooltipKeyBackground,
xPadding: options.tooltips.xPadding,
yPadding: options.tooltips.yPadding,
xOffset: options.tooltips.xOffset,
backgroundColor: options.tooltips.backgroundColor,
textColor: options.tooltips.fontColor,
_fontFamily: options.tooltips.fontFamily,
_fontStyle: options.tooltips.fontStyle,
fontSize: options.tooltips.fontSize,
titleTextColor: options.tooltips.titleFontColor,
_titleFontFamily: options.tooltips.titleFontFamily,
_titleFontStyle: options.tooltips.titleFontStyle,
titleFontSize: options.tooltips.titleFontSize,
caretHeight: options.tooltips.caretSize,
cornerRadius: options.tooltips.cornerRadius,
legendColorBackground: options.tooltips.multiKeyBackground,
labels: [],
colors: [],
});
@@ -1503,10 +1503,10 @@
var ctx = this._chart.ctx;
switch (this._options.hoverMode) {
switch (this._options.hover.mode) {
case 'single':
helpers.extend(this, {
text: template(this._options.tooltipTemplate, this._active[0]),
text: template(this._options.tooltips.template, this._active[0]),
});
var tooltipPosition = this._active[0].tooltipPosition();
helpers.extend(this, {
@@ -1556,7 +1556,7 @@
yPositions.push(element._vm.y);
//Include any colour information about the element
labels.push(helpers.template(this._options.multiTooltipTemplate, element));
labels.push(helpers.template(this._options.tooltips.multiTemplate, element));
colors.push({
fill: element._vm.backgroundColor,
stroke: element._vm.borderColor
@@ -1583,7 +1583,7 @@
labels: labels,
title: this._active.length ? this._active[0].label : '',
legendColors: colors,
legendBackgroundColor: this._options.multiTooltipKeyBackground,
legendBackgroundColor: this._options.tooltips.multiKeyBackground,
});
@@ -1624,7 +1624,7 @@
var ctx = this._chart.ctx;
var vm = this._vm;
switch (this._options.hoverMode) {
switch (this._options.hover.mode) {
case 'single':
ctx.font = fontString(vm.fontSize, vm._fontStyle, vm._fontFamily);

6
src/Chart.Doughnut.js
View File

@@ -55,7 +55,7 @@
});
//Set up tooltip events on the chart
if (this.options.showTooltips) {
if (this.options.tooltips.enabled) {
helpers.bindEvents(this, this.options.events, this.onHover);
}
@@ -115,12 +115,12 @@
}
// Built in hover styling
if (this.active.length && this.options.hoverMode) {
if (this.active.length && this.options.hover.mode) {
this.active[0].backgroundColor = this.data.data[this.active[0]._index].hoverBackgroundColor || helpers.color(this.data.data[this.active[0]._index].backgroundColor).saturate(0.5).darken(0.35).rgbString();
}
// Built in Tooltips
if (this.options.showTooltips) {
if (this.options.tooltips.enabled) {
// The usual updates
this.tooltip.initialize();

59
src/Chart.Line.js
View File

@@ -78,22 +78,33 @@
//Boolean - Whether to stack the lines essentially creating a stacked area chart.
stacked: false,
//Number - Tension of the bezier curve between points
tension: 0.4,
points: {
// 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,
//Number - Radius of each point dot in pixels
pointRadius: 3,
//Number - Pixel width of point dot border
pointBorderWidth: 1,
//Number - Pixel width of point on hover
pointHoverRadius: 5,
//Number - Pixel width of point dot border on hover
pointHoverBorderWidth: 2,
pointBackgroundColor: Chart.defaults.global.defaultColor,
pointBorderColor: Chart.defaults.global.defaultColor,
//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
hitRadius: 6,
},
//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
pointHitRadius: 6,
lines: {
//Number - Tension of the bezier curve between points. Use 0 to turn off bezier tension
tension: 0.4,
},
//Number - Pixel width of dataset border
borderWidth: 2,
@@ -206,7 +217,7 @@
scaleZero: yScale.getPixelForValue(0),
// Appearance
tension: dataset.tension || this.options.tension,
tension: dataset.tension || this.options.lines.tension,
backgroundColor: dataset.backgroundColor || this.options.backgroundColor,
borderWidth: dataset.borderWidth || this.options.borderWidth,
borderColor: dataset.borderColor || this.options.borderColor,
@@ -237,12 +248,12 @@
tension: this.data.datasets[datasetIndex].metaDataset.tension,
// Appearnce
radius: this.data.datasets[datasetIndex].pointRadius || this.options.pointRadius,
backgroundColor: this.data.datasets[datasetIndex].pointBackgroundColor || this.options.pointBackgroundColor,
borderWidth: this.data.datasets[datasetIndex].pointBorderWidth || this.options.pointBorderWidth,
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,
// Tooltip
hoverRadius: this.data.datasets[datasetIndex].pointHitRadius || this.options.pointHitRadius,
hoverRadius: this.data.datasets[datasetIndex].pointHitRadius || this.options.points.hitRadius,
});
}, this);
@@ -437,7 +448,7 @@
// Find Active Elements
this.active = function() {
switch (this.options.hoverMode) {
switch (this.options.hover.mode) {
case 'single':
return this.getElementAtEvent(e);
case 'label':
@@ -463,7 +474,7 @@
var dataset;
// Remove styling for last active (even if it may still be active)
if (this.lastActive.length) {
switch (this.options.hoverMode) {
switch (this.options.hover.mode) {
case 'single':
dataset = this.data.datasets[this.lastActive[0]._datasetIndex];
@@ -490,8 +501,8 @@
}
// Built in hover styling
if (this.active.length && this.options.hoverMode) {
switch (this.options.hoverMode) {
if (this.active.length && this.options.hover.mode) {
switch (this.options.hover.mode) {
case 'single':
dataset = this.data.datasets[this.active[0]._datasetIndex];
@@ -519,7 +530,7 @@
// Built in Tooltips
if (this.options.showTooltips) {
if (this.options.tooltips.enabled) {
// The usual updates
this.tooltip.initialize();

2
src/Chart.PolarArea.js
View File

@@ -133,7 +133,7 @@
},this);
//Set up tooltip events on the chart
if (this.options.showTooltips){
if (this.options.tooltips.enabled){
helpers.bindEvents(this, this.options.events, function(evt){
var activeSegments = (evt.type !== 'mouseout') ? this.getSegmentsAtEvent(evt) : [];
helpers.each(this.segments,function(segment){

21
src/Chart.Scatter.js
View File

@@ -6,7 +6,10 @@
helpers = Chart.helpers;
var defaultConfig = {
hoverMode: 'single',
hover: {
mode: 'single',
},
scales: {
xAxes: [{
scaleType: "linear", // scatter should not use a dataset axis
@@ -92,8 +95,10 @@
//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].borderColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
tooltipTemplate: "(<%= dataX %>, <%= dataY %>)",
multiTooltipTemplate: "<%if (datasetLabel){%><%=datasetLabel%>: <%}%>(<%= dataX %>, <%= dataY %>)",
tooltips: {
template: "(<%= dataX %>, <%= dataY %>)",
multiTemplate: "<%if (datasetLabel){%><%=datasetLabel%>: <%}%>(<%= dataX %>, <%= dataY %>)",
},
};
@@ -196,7 +201,7 @@
// Find Active Elements
this.active = function() {
switch (this.options.hoverMode) {
switch (this.options.hover.mode) {
case 'single':
return this.getElementAtEvent(e);
case 'label':
@@ -215,7 +220,7 @@
// Remove styling for last active (even if it may still be active)
if (this.lastActive.length) {
switch (this.options.hoverMode) {
switch (this.options.hover.mode) {
case 'single':
this.lastActive[0].backgroundColor = this.data.datasets[this.lastActive[0]._datasetIndex].pointBackgroundColor;
this.lastActive[0].borderColor = this.data.datasets[this.lastActive[0]._datasetIndex].pointBorderColor;
@@ -236,8 +241,8 @@
}
// Built in hover styling
if (this.active.length && this.options.hoverMode) {
switch (this.options.hoverMode) {
if (this.active.length && this.options.hover.mode) {
switch (this.options.hover.mode) {
case 'single':
this.active[0].backgroundColor = this.data.datasets[this.active[0]._datasetIndex].hoverBackgroundColor || helpers.color(this.active[0].backgroundColor).saturate(0.5).darken(0.35).rgbString();
this.active[0].borderColor = this.data.datasets[this.active[0]._datasetIndex].hoverBorderColor || helpers.color(this.active[0].borderColor).saturate(0.5).darken(0.35).rgbString();
@@ -258,7 +263,7 @@
}
// Built in Tooltips
if (this.options.showTooltips) {
if (this.options.tooltips.enabled) {
// The usual updates
this.tooltip.initialize();