Skip to content

Instantly share code, notes, and snippets.

@TorsteinHonsi

TorsteinHonsi/highcharts-issue-5948.patch

Created November 28, 2016 13:33
Show Gist options
  • Save TorsteinHonsi/b726b2656bb9edb4d66aff0e05d7cc11 to your computer and use it in GitHub Desktop.
Save TorsteinHonsi/b726b2656bb9edb4d66aff0e05d7cc11 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
highcharts-issue-5948.patch
diff --git a/js/modules/boost.src.js b/js/modules/boost.src.js
index 5547019..98c62f4 100644
--- a/js/modules/boost.src.js
+++ b/js/modules/boost.src.js
@@ -209,27 +209,29 @@ H.extend(Series.prototype, {
var chart = this.chart,
width = chart.plotWidth,
height = chart.plotHeight,
- ctx = this.ctx,
+ ctx = chart.ctx,
swapXY = function (proceed, x, y, a, b, c, d) {
proceed.call(this, y, x, a, b, c, d);
};
- if (!this.canvas) {
- this.canvas = doc.createElement('canvas');
- this.image = chart.renderer.image('', 0, 0, width, height).add(this.group);
- this.ctx = ctx = this.canvas.getContext('2d');
+ if (!chart.canvas) {
+ chart.canvas = doc.createElement('canvas');
+ doc.body.insertBefore(chart.canvas, doc.body.firstChild);
+ chart.image = chart.renderer
+ .image('', 0, 0, width, height)
+ .add(chart.seriesGroup);
+ chart.ctx = ctx = chart.canvas.getContext('2d');
if (chart.inverted) {
each(['moveTo', 'lineTo', 'rect', 'arc'], function (fn) {
wrap(ctx, fn, swapXY);
});
}
- } else {
- ctx.clearRect(0, 0, width, height);
}
- this.canvas.width = width;
- this.canvas.height = height;
- this.image.attr({
+ // Size or resize
+ chart.canvas.width = width;
+ chart.canvas.height = height;
+ chart.image.attr({
width: width,
height: height
});
@@ -241,7 +243,8 @@ H.extend(Series.prototype, {
* Draw the canvas image inside an SVG image
*/
canvasToSVG: function () {
- this.image.attr({ href: this.canvas.toDataURL('image/png') });
+ var chart = this.chart;
+ chart.image.attr({ href: chart.canvas.toDataURL('image/png') });
},
cvsLineTo: function (ctx, clientX, plotY) {
@@ -295,6 +298,8 @@ H.extend(Series.prototype, {
maxVal,
minI,
maxI,
+ data,
+ dataLength,
fillColor = series.fillOpacity ?
new Color(series.color).setOpacity(pick(options.fillOpacity, 0.75)).get() :
series.color,
@@ -336,6 +341,9 @@ H.extend(Series.prototype, {
stroke();
c = 0;
}
+ if (i === dataLength - 1) {
+ stroke();
+ }
// Area charts need to keep track of the last point
lastPoint = {
@@ -407,8 +415,14 @@ H.extend(Series.prototype, {
chart.options.loading = loadingOptions; // reset
}
+ if (chart.canvasCounter === undefined) {
+ chart.canvasCounter = 0;
+ }
+
// Loop over the points
- eachAsync(isStacked ? series.data : (xData || rawData), function (d, i) {
+ data = isStacked ? series.data : (xData || rawData);
+ dataLength = data.length;
+ eachAsync(data, function (d, i) {
var x,
y,
clientX,
@@ -494,7 +508,8 @@ H.extend(Series.prototype, {
}
wasNull = isNull && !connectNulls;
- if (i % CHUNK_SIZE === 0) {
+ chart.canvasCounter++;
+ if (chart.canvasCounter % CHUNK_SIZE === 0) {
series.canvasToSVG();
}
}
@@ -503,8 +518,6 @@ H.extend(Series.prototype, {
}, function () {
var loadingDiv = chart.loadingDiv,
loadingShown = chart.loadingShown;
- stroke();
- series.canvasToSVG();
fireEvent(series, 'renderedCanvas');
@@ -631,3 +644,15 @@ wrap(Series.prototype, 'searchPoint', function (proceed) {
proceed.apply(this, [].slice.call(arguments, 1))
);
});
+
+H.Chart.prototype.callbacks.push(function (chart) {
+
+ function canvasToSVG() {
+ if (chart.series[0]) {
+ chart.series[0].canvasToSVG();
+ }
+ chart.canvasCounter = 0;
+ }
+ addEvent(chart, 'load', canvasToSVG);
+ addEvent(chart, 'redraw', canvasToSVG);
+});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment