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

Set new tooltip templates for the scatter chart

Browse Source
This commit is contained in:
Evert Timberg 2015-05-19 20:33:39 -04:00
parent 4cc24d475a
commit 008bb1aab3
2 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
samples/scatter.html
View File

@ -88,7 +88,7 @@
var ctx = document.getElementById("canvas").getContext("2d"); var ctx = document.getElementById("canvas").getContext("2d");
window.myScatter = new Chart(ctx).Scatter(scatterChartData, { window.myScatter = new Chart(ctx).Scatter(scatterChartData, {
responsive: true, responsive: true,
hoverMode: 'single', hoverMode: 'single', // should always use single for a scatter chart
scales: { scales: {
xAxes: [{ xAxes: [{
gridLines: { gridLines: {

11
src/Chart.Scatter.js
View File

@ -6,7 +6,7 @@
helpers = Chart.helpers; helpers = Chart.helpers;
var defaultConfig = { var defaultConfig = {
hoverMode: 'single',
scales: { scales: {
xAxes: [{ xAxes: [{
scaleType: "linear", // scatter should not use a dataset axis scaleType: "linear", // scatter should not use a dataset axis
@ -94,6 +94,9 @@
//String - A legend template //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>", 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 %>)",
}; };
@ -334,8 +337,10 @@
helpers.extend(point, { helpers.extend(point, {
x: xScale.getPixelForValue(this.data.datasets[datasetIndex].data[index].x), x: xScale.getPixelForValue(this.data.datasets[datasetIndex].data[index].x),
y: yScale.getPixelForValue(this.data.datasets[datasetIndex].data[index].y), y: yScale.getPixelForValue(this.data.datasets[datasetIndex].data[index].y),
value: this.data.datasets[datasetIndex].data[index].y, dataX: this.data.datasets[datasetIndex].data[index].x,
label: this.data.datasets[datasetIndex].data[index].x, dataY: this.data.datasets[datasetIndex].data[index].y,
label: '', // so that the multitooltip looks ok
value: this.data.datasets[datasetIndex].data[index].y, // for legacy reasons
datasetLabel: this.data.datasets[datasetIndex].label, datasetLabel: this.data.datasets[datasetIndex].label,
// Appearance // Appearance
hoverBackgroundColor: this.data.datasets[datasetIndex].pointHoverBackgroundColor || this.options.pointHoverBackgroundColor, hoverBackgroundColor: this.data.datasets[datasetIndex].pointHoverBackgroundColor || this.options.pointHoverBackgroundColor,