Animation graphique.js pie, jouer une fois, quand à une certaine position dans la page via le défilement vertical

J’ai un diagramme à secteurs simple, qui s’anime lorsque chart.js est chargé hors de la boîte. J’essaie de permettre à l’animation de se faire via un certain sharepoint défilement dans une longue page Web verticale. exécuter, une seule fois, une fois qu’un nouvel utilisateur défile ou frappe la position de la page – l’animation serait que une fois et c’est tout. Cela cause beaucoup de problèmes – car j’ai pu exécuter et afficher / masquer des éléments à la position de la page avec des points d’arrêt et un défilement de fenêtre, mais cette animation ne s’exécutera pas en ligne avec cela, mais plutôt dans tous les sens. ce qui se passe, c’est que l’animation est rafraîchie et rediffusé chaque fois que la barre de défilement du navigateur est ajustée au minimum. Il suffit d’actualiser, défilement> actualisation d’animation> défilement> actualisation d’animation. Tous les pointeurs là-bas; la documentation chart.js n’est pas très utile à cet égard puisque la plupart des démos sont avec onDomready. J’ai découvert des façons d’exécuter jQuery avec des points d’arrêt, comme vous pouvez le constater dans le code commenté ci-dessous, mais l’animation actuelle ignore et déclenche à chaque réglage de défilement.

De plus, voici le fichier chart.js externe principal qui alimente le système ci-dessous.

Chart.JS externe JS

var breakpoint = false; $(window).scroll(function() { if ($(this).scrollTop() > 1300 && !breakpoint ) { // do stuff // $(window).scroll(function() { // if ($(this).scrollTop() > 1100) { // $(function () { // $(document).ready(function () { var chart = null; var colors = Highcharts.getOptions().colors, categories = ['Shop', 'Buy', 'Own'], name = 'Browser brands', data = [{ // y: 55.11, // color: colors[0], // drilldown: { // name: 'MSIE versions', // categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'], // data: [10.85, 7.35, 33.06, 2.81], // color: colors[0] // } // }, { y: 3, color: colors[8], drilldown: { name: 'Buy', // categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'], data: [10.20, 10.83, 11.58, 13.12, 5.43], color: colors[8] } }, { y: 7, color: colors[8], drilldown: { name: 'Own', // categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0', // 'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'], data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22], color: colors[8] } }, { y: 10, color: colors[8], drilldown: { name: 'Own', // categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon', // 'Safari 3.1', 'Safari 4.1'], data: [4.55, 5.42, 6.23, 0.21, 0.20, 0.19, 0.14], color: colors[8], } // }, { // y: 2.14, // color: colors[8], // drilldown: { // name: 'Home', // // categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'], // data: [20.1, 0.37, 1.65], // color: colors[8] // } }]; // Build the data array var browserData = []; for (var i = 0; i < data.length; i++) { // add browser data browserData.push({ name: categories[i], y: data[i].y, color: data[i].color }); } // Create the chart chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'pie' }, title: { text: null }, series: [{ name: '', data: browserData, innerSize: '20%' }], tooltip: { valueSuffix: '%', positioner: function () { return { x: this.chart.series[0].center[0] - (this.label.width / 2) + 8, y: this.chart.series[0].center[1] - (this.label.height / 2) + 8 }; } }, plotOptions: { pie: { cursor: 'pointer', dataLabels: { connectorColor: 'white' }, point: { events: { mouseOver: function () { if (!this.connector.dynamicConnector) { var width = 16, height = 24; // Extract the connector start position var dArr = this.connector.d.split(' '); var startY = dArr.pop(), startX = dArr.pop(); var start = [parseFloat(startX), parseFloat(startY)]; // Construct the triangle var path = 'M ' + start[0] + ' ' + start[1] + 'L ' + (start[0] + height) + ' ' + (start[1] - (width / 2)) + ' L ' + (start[0] + height) + ' ' + (start[1] + (width / 2)) + ' L ' + start[0] + ' ' + start[1]; // Convert the section angle from radian to degree and apply to the trangle // Setup rotation, x, y required by the updateTransform method this.connector.rotation = (this.angle * 180) / Math.PI; this.connector.x = startX; this.connector.y = startY; this.connector.updateTransform(); this.connector.attr('stroke', this.color); this.connector.attr('fill', Highcharts.Color(this.color).brighten(0.2).get()); this.connector.attr('d', path); this.connector.dynamicConnector = true; } this.connector.show(); }, mouseOut: function () { this.connector.hide(); } } } } } }); } });

Si quelqu’un est intéressé – j’ai atteint mon objective avec ce plugin. Appear.js

 /** * Highcharts plugin to defer initial series animation until the element has appeared. Requieres * jQuery.appear. */ (function (H) { function deferAnimate (proceed, init) { var series = this, $renderTo = $(this.chart.container.parentNode); // Prevent pre-rendering without animation if (init) { series.group.hide(); } // Prepare for animation if (init) { $renderTo.appear(); // initialize appear plugin proceed.call(this, init); // It is appeared, run animation } else if ($renderTo.is(':appeared')) { proceed.call(series); series.group.show(); // It is not appeared, halt animation until appear } else { $renderTo.on('appear', function () { if (!series.animated) { proceed.call(series); series.group.show(); series.animated = true; } }); } }; H.wrap(H.Series.prototype, 'animate', deferAnimate); H.wrap(H.seriesTypes.column.prototype, 'animate', deferAnimate); H.wrap(H.seriesTypes.pie.prototype, 'animate', deferAnimate); }(Highcharts));