Javascript Girl
  1. Javascript Girl
  3. Comment faire pour manipuler les poignées de traction du navigateur, Highstock
Intereting Posts
Afficher les images depuis le stockage du firebase en html img tags Quel est l'intérêt d'utiliser un attribut ID dans une balise de script? D3.js: positionnez les info-bulles à l'aide de la position de l'élément, pas de la position de la souris? Internet Explorer 11 (IE 11) lance une erreur de syntaxe à l'aide de parseFromString dans DOMParser Javascript / PHP Family Tree Builder avec plusieurs parents Validation d'URL Javascript regex Comment créer un commutateur marche / arrêt avec Javascript / CSS? Pourquoi les fonctions de réseau natif sont-elles beaucoup plus lentes que la boucle? Qui est la meilleure bibliothèque d'événements JavaScript Keyboard (raccourcis clavier, raccourcis clavier) Livre Javascript qui enseigne javascript la langue, pas dom JQuery: ajout d'un gestionnaire d'événements de changement avec une fonction prédéfinie Javascript regex: correspondant à un numéro de téléphone Sélection de la gamme initiale dans le diagramme DC.js JavaScript à TypeScript: Intellisense et membres dynamiques Comment puis-je exécuter NodeJS à partir d'une application Java?

Comment faire pour manipuler les poignées de traction du navigateur, Highstock

Apprendre à partir des couleurs, il est possible de façonner les poignées du navigateur (comme la forme, la hauteur, la largeur, le rayon de bordure, l'arrière-plan, etc.).

De l'API doc: http://api.highcharts.com/highstock#navigator.handles , je peux seulement voir backgroundColor et borderColor .

Si les options ne sont pas prises en charge, existe-t-il un moyen de la remplacer radicalement par certains événements de rappel?

Le style que je veux est comme:

Ce que je veux

Il est possible d'étendre Highcharts et de remplacer la fonction Highcharts.Scroller.prototype.drawHandle par une personnalisée. Vous pouvez baser votre code sur celui existant et ajouter d'autres options et éléments comme dans cet exemple: http://jsfiddle.net/kuos06o5/1/ (pour la question initiale lorsque la version Highstock était 4.2.5) 

 $(function() { //custom handles (function(HC) { HC.Scroller.prototype.drawHandle = function(x, index) { var scroller = this, chart = scroller.chart, renderer = chart.renderer, elementsToDestroy = scroller.elementsToDestroy, handles = scroller.handles, handlesOptions = scroller.navigatorOptions.handles, radius = handlesOptions.radius, attr = { fill: handlesOptions.backgroundColor, stroke: handlesOptions.borderColor, 'stroke-width': 1 }, tempElem, innerLinesOptions = handlesOptions.innerLines, h = innerLinesOptions.height; // create the elements if (!scroller.rendered) { // the group handles[index] = renderer.g('navigator-handle-' + ['left', 'right'][index]) .css({ cursor: 'ew-resize' }) .attr({ zIndex: 10 - index }) .add(); // cirlce tempElem = renderer.circle(0, 0, radius) .attr(attr) .add(handles[index]); elementsToDestroy.push(tempElem); // inner lines tempElem = renderer.path([ 'M', -1.5, -h / 2, 'L', -1.5, h / 2, 'M', 1.5, -h / 2, 'L', 1.5, h / 2 ]) .attr({ stroke: innerLinesOptions.color, 'stroke-width': 1 }) .add(handles[index]); elementsToDestroy.push(tempElem); } // Place it handles[index][chart.isResizing ? 'animate' : 'attr']({ translateX: scroller.scrollerLeft + scroller.scrollbarHeight + parseInt(x, 10), translateY: scroller.top + scroller.height / 2 }); }; })(Highcharts); $('#container').highcharts('StockChart', { navigator: { handles: { backgroundColor: 'white', borderColor: 'grey', radius: 8, innerLines: { color: 'blue', height: 6 } } }, rangeSelector: { selected: 1 }, series: [{ name: 'USD to EUR', data: usdeur }] }); });

Dans les versions plus récentes (4.2.6, 4.2.7 et 5.0.0 – les plus récents) drawHandle a été déplacé, de sorte que le wrapper devrait commencer par: 

  HC.Navigator.prototype.drawHandle = function(x, index) {

Demo: http://jsfiddle.net/kuos06o5/2/