archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1599 from nnnick/fix-more-custom-tooltips

Browse Source 
Fix more custom tooltips
This commit is contained in:
Derek Perkins 2015-10-31 18:21:54 -06:00
commit 3d862962f7
3 changed files with 64 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
samples/line-customTooltips.html
View File

@ -39,13 +39,13 @@
<body>
<div id="canvas-holder1">
<canvas id="chart1" width="300" height="30" />
<canvas id="chart1" width="300" height="100" />
</div>
<script>
Chart.defaults.global.pointHitDetectionRadius = 1;
var customTooltips = function(tooltip) {
console.log(tooltip.opacity);
console.log(tooltip);
// Tooltip Element
var tooltipEl = $('#chartjs-tooltip');

26
src/core/core.controller.js
View File

@ -375,8 +375,8 @@
// Find Active Elements for hover and tooltips
if (e.type == 'mouseout') {
this.active = this.lastActive = [];
this.tooltipActive = this.lastTooltipActive = [];
this.active = [];
this.tooltipActive = [];
} else {
this.active = function() {
switch (this.options.hover.mode) {
@ -458,20 +458,7 @@
// The usual updates
this.tooltip.initialize();
// Active
if (this.tooltipActive.length) {
this.tooltip._model.opacity = 1;
helpers.extend(this.tooltip, {
_active: this.tooltipActive,
});
} else {
// Inactive
this.tooltip._model.opacity = 0;
}
this.tooltip.update();
this.tooltip._active = this.tooltipActive;
}
// Hover animations
@ -494,12 +481,13 @@
// If entering, leaving, or changing elements, animate the change via pivot
if ((this.lastActive.length !== this.active.length) ||
(this.lastActive.length === this.active.length && changed) ||
(this.lastTooltipActive.length !== this.tooltipActive.length) ||
(this.lastTooltipActive.length === this.tooltipActive.length && changed)) {
changed) {
if (this.options.tooltips.enabled || this.options.tooltips.custom) {
this.tooltip.update();
}
this.stop();
console.log('render');
// We only need to render at this point. Updating will cause scales to be recomputed generating flicker & using more
// memory than necessary.

103
src/core/core.tooltip.js
View File

@ -197,63 +197,70 @@
var ctx = this._chart.ctx;
var element = this._active[0],
labelColors = [],
tooltipPosition;
if(this._active.length){
this._model.opacity = 1;
var tooltipItems = [];
var element = this._active[0],
labelColors = [],
tooltipPosition;
if (this._options.tooltips.mode == 'single') {
var yScale = element._yScale || element._scale; // handle radar || polarArea charts
tooltipItems.push({
xLabel: element._xScale ? element._xScale.getLabelForIndex(element._index, element._datasetIndex) : '',
yLabel: yScale ? yScale.getLabelForIndex(element._index, element._datasetIndex) : '',
index: element._index,
datasetIndex: element._datasetIndex,
});
tooltipPosition = this._active[0].tooltipPosition();
} else {
helpers.each(this._data.datasets, function(dataset, datasetIndex) {
if (!helpers.isDatasetVisible(dataset)) {
return;
}
var currentElement = dataset.metaData[element._index];
var tooltipItems = [];
if (this._options.tooltips.mode == 'single') {
var yScale = element._yScale || element._scale; // handle radar || polarArea charts
tooltipItems.push({
xLabel: currentElement._xScale ? currentElement._xScale.getLabelForIndex(currentElement._index, currentElement._datasetIndex) : '',
yLabel: yScale ? yScale.getLabelForIndex(currentElement._index, currentElement._datasetIndex) : '',
xLabel: element._xScale ? element._xScale.getLabelForIndex(element._index, element._datasetIndex) : '',
yLabel: yScale ? yScale.getLabelForIndex(element._index, element._datasetIndex) : '',
index: element._index,
datasetIndex: datasetIndex,
datasetIndex: element._datasetIndex,
});
tooltipPosition = this._active[0].tooltipPosition();
} else {
helpers.each(this._data.datasets, function(dataset, datasetIndex) {
if (!helpers.isDatasetVisible(dataset)) {
return;
}
var currentElement = dataset.metaData[element._index];
var yScale = element._yScale || element._scale; // handle radar || polarArea charts
tooltipItems.push({
xLabel: currentElement._xScale ? currentElement._xScale.getLabelForIndex(currentElement._index, currentElement._datasetIndex) : '',
yLabel: yScale ? yScale.getLabelForIndex(currentElement._index, currentElement._datasetIndex) : '',
index: element._index,
datasetIndex: datasetIndex,
});
});
helpers.each(this._active, function(active, i) {
labelColors.push({
borderColor: active._view.borderColor,
backgroundColor: active._view.backgroundColor
});
}, this);
tooltipPosition = this._active[0].tooltipPosition();
tooltipPosition.y = this._active[0]._yScale.getPixelForDecimal(0.5);
}
// Build the Text Lines
helpers.extend(this._model, {
title: this.getTitle(tooltipItems, this._data),
beforeBody: this.getBeforeBody(tooltipItems, this._data),
body: this.getBody(tooltipItems, this._data),
afterBody: this.getAfterBody(tooltipItems, this._data),
footer: this.getFooter(tooltipItems, this._data),
});
helpers.each(this._active, function(active, i) {
labelColors.push({
borderColor: active._view.borderColor,
backgroundColor: active._view.backgroundColor
});
}, this);
tooltipPosition = this._active[0].tooltipPosition();
tooltipPosition.y = this._active[0]._yScale.getPixelForDecimal(0.5);
helpers.extend(this._model, {
x: Math.round(tooltipPosition.x),
y: Math.round(tooltipPosition.y),
caretPadding: tooltipPosition.padding,
labelColors: labelColors,
});
}
else{
this._model.opacity = 0;
}
// Build the Text Lines
helpers.extend(this._model, {
title: this.getTitle(tooltipItems, this._data),
beforeBody: this.getBeforeBody(tooltipItems, this._data),
body: this.getBody(tooltipItems, this._data),
afterBody: this.getAfterBody(tooltipItems, this._data),
footer: this.getFooter(tooltipItems, this._data),
});
helpers.extend(this._model, {
x: Math.round(tooltipPosition.x),
y: Math.round(tooltipPosition.y),
caretPadding: tooltipPosition.padding,
labelColors: labelColors,
});
if (this._options.tooltips.custom) {
this._options.tooltips.custom.call(this, this._model);