From: Tanner Linsley Date: Tue, 2 Jun 2015 21:14:06 +0000 (-0600) Subject: Stroked tooltip colors X-Git-Tag: v2.0-alpha~2^2~29 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=df4d2d2594277dc99f46885c365b70d33be990a8;p=thirdparty%2FChart.js.git Stroked tooltip colors --- diff --git a/samples/line.html b/samples/line.html index b954d7d15..85ff667d3 100644 --- a/samples/line.html +++ b/samples/line.html @@ -22,19 +22,24 @@ return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')'; }; - var lineChartData = { - labels: ["January", "February", "March", "April", "May", "June", "July"], - datasets: [{ - label: "My First dataset", - data: [null, randomScalingFactor(), randomScalingFactor(), null, randomScalingFactor(), randomScalingFactor(), randomScalingFactor()], - fill: false, - }, { - label: "My Second dataset", - data: [null, randomScalingFactor(), randomScalingFactor(), null, randomScalingFactor(), randomScalingFactor(), randomScalingFactor()], - }] + var config = { + data: { + labels: ["January", "February", "March", "April", "May", "June", "July"], + datasets: [{ + label: "My First dataset", + data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()], + fill: false, + }, { + label: "My Second dataset", + data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()], + }] + }, + options: { + responsive: true + } }; - $.each(lineChartData.datasets, function(i, dataset) { + $.each(config.data.datasets, function(i, dataset) { dataset.borderColor = randomColor(0.4); dataset.backgroundColor = randomColor(0.5); dataset.pointBorderColor = randomColor(0.7); @@ -42,33 +47,17 @@ dataset.pointBorderWidth = 1; }); - console.log(lineChartData); + console.log(config.data); window.onload = function() { var ctx = document.getElementById("canvas").getContext("2d"); - window.myLine = new Chart(ctx).Line({ - data: lineChartData, - options: { - responsive: true, - hover: { - mode: 'label', - }, - stacked: false, - scales: { - xAxes: [{ - gridLines: { - offsetGridLines: false - } - }] - } - } - }); + window.myLine = new Chart(ctx).Line(config); }; $('#randomizeData').click(function() { - lineChartData.datasets[0].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]; + config.data.datasets[0].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]; - lineChartData.datasets[1].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]; + config.data.datasets[1].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]; window.myLine.update(); }); diff --git a/src/Chart.Core.js b/src/Chart.Core.js index 9c9587bd0..8462b4714 100755 --- a/src/Chart.Core.js +++ b/src/Chart.Core.js @@ -73,11 +73,11 @@ custom: null, backgroundColor: "rgba(0,0,0,0.8)", fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", - fontSize: 14, + fontSize: 10, fontStyle: "normal", fontColor: "#fff", titleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", - titleFontSize: 14, + titleFontSize: 12, titleFontStyle: "bold", titleFontColor: "#fff", yPadding: 6, @@ -85,8 +85,30 @@ caretSize: 8, cornerRadius: 6, xOffset: 10, - template: "<%if (label){%><%=label%>: <%}%><%= value %>", - multiTemplate: "<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= value %>", + template: [ + '<% if(label){ %>', + ' <%=label %>:', + '<% } %>', + '<%=value %>', + ].join(''), + multiTemplate: [ + '<%if (datasetLabel){ %>', + ' <%=datasetLabel %>:', + '<% } %>', + '<%=value %>' + ].join(''), + legendTemplate: [ + '', + ].join(''), multiKeyBackground: '#fff', }, @@ -114,7 +136,7 @@ borderColor: defaultColor, // Hover hitRadius: 6, - hoverRadius: 5, + hoverRadius: 4, hoverBorderWidth: 2, }, } @@ -1120,6 +1142,9 @@ extend(Chart.Element.prototype, { initialize: function() {}, pivot: function() { + if (!this._view) { + this._view = clone(this._model); + } this._start = clone(this._view); return this; }, @@ -1790,8 +1815,8 @@ //ctx.clearRect(vm.x + vm.xPadding, this.getLineHeight(index + 1) - vm.fontSize/2, vm.fontSize, vm.fontSize); //Instead we'll make a white filled block to put the legendColour palette over. - ctx.fillStyle = helpers.color(vm.legendBackgroundColor).alpha(vm.opacity).rgbString(); - ctx.fillRect(vm.x + vm.xPadding, this.getLineHeight(index + 1) - vm.fontSize / 2, vm.fontSize, vm.fontSize); + ctx.fillStyle = helpers.color(vm.legendColors[index].stroke).alpha(vm.opacity).rgbString(); + ctx.fillRect(vm.x + vm.xPadding - 1, this.getLineHeight(index + 1) - vm.fontSize / 2 - 1, vm.fontSize + 2, vm.fontSize + 2); ctx.fillStyle = helpers.color(vm.legendColors[index].fill).alpha(vm.opacity).rgbString(); ctx.fillRect(vm.x + vm.xPadding, this.getLineHeight(index + 1) - vm.fontSize / 2, vm.fontSize, vm.fontSize); diff --git a/src/Chart.Line.js b/src/Chart.Line.js index 4def96168..8ee985987 100644 --- a/src/Chart.Line.js +++ b/src/Chart.Line.js @@ -13,7 +13,6 @@ mode: "label" }, - legendTemplate: "", scales: { xAxes: [{ scaleType: "dataset", // scatter should not use a dataset axis @@ -113,12 +112,9 @@ _model: { x: 0, //xScale.getPixelForValue(null, index, true), y: 0, //this.chartArea.bottom, - //controlPointPreviousX: this.previousPoint(dataset.data, index).x, - //controlPointPreviousY: this.previousPoint(dataset.data, index).y, - //controlPointNextX: this.nextPoint(dataset.data, index).x, - //controlPointNextY: this.nextPoint(dataset.data, index).y, }, })); + }, this); // The line chart onlty supports a single x axis because the x axis is always a dataset axis @@ -215,6 +211,7 @@ }); }, this); + // Update control points for the bezier curve this.eachElement(function(point, index, dataset, datasetIndex) { var controlPoints = helpers.splineCurve( @@ -374,7 +371,6 @@ for (var i = this.data.datasets.length - 1; i >= 0; i--) { var dataset = this.data.datasets[i]; - var datasetIndex = i; // Transition Point Locations helpers.each(dataset.metaData, function(point, index) {