Hallo iedereen
Om de statistieken van mijn website wat aangenamer te maken gebruik ik Morris.js :
http://morrisjs.github.io/morris.js/donuts.html
Wanneer ik over de 'donut' hover, verspringt de tekst in het midden een paar pixels :
http://jsbin.com/ukaxod/144/embed?js,output
Dat is in het origineel ook al het geval ... heeft iemand dat kunnen oplossen ?
Groeten
Wesley
- Grafieken morris.js > donut chart > label beweegt bij hover
-
08-01-2016, 10:50 #1
- Berichten
- 940
- Lid sinds
- 15 Jaar
Grafieken morris.js > donut chart > label beweegt bij hover
-
08-01-2016, 12:42 #2
- Berichten
- 878
- Lid sinds
- 15 Jaar
Re: Grafieken morris.js > donut chart > label beweegt bij hover
In het voorbeeld dat je stuurt ( http://jsbin.com/ukaxod/144/embed?js,output) komt het doordat de font van het label zichzelf aanpast aan de text-lengte. Probeer eens een 3-tal label die exact dezelfde tekst bevatten.
-
08-01-2016, 13:24 #3
- Berichten
- 940
- Lid sinds
- 15 Jaar
Re: Grafieken morris.js > donut chart > label beweegt bij hover
In het voorbeeld dat je stuurt ( http://jsbin.com/ukaxod/144/embed?js,output) komt het doordat de font van het label zichzelf aanpast aan de text-lengte. Probeer eens een 3-tal label die exact dezelfde tekst bevatten.
Alle labels zijn nu hetzelfde ... het aanpassen van de text-lengte is leuk, maar die verspringing niet :'(
Misschien lijkt het me beter om er toch maar genoegen mee te nemen in geval van langere labels dan ...
Code:Morris.Donut({ element: 'donut-example', data: [ {label: "label", value: 12}, {label: "label", value: 30}, {label: "label", value: 20} ] });
-
13-01-2016, 12:06 #4
- Berichten
- 94
- Lid sinds
- 17 Jaar
Re: Grafieken morris.js > donut chart > label beweegt bij hover
in de file morris.js staan de volgende textregels
Code:Donut.prototype.setLabels = function(label1, label2) { var inner, maxHeightBottom, maxHeightTop, maxWidth, text1bbox, text1scale, text2bbox, text2scale; inner = (Math.min(this.el.width() / 2, this.el.height() / 2) - 10) * 2 / 3; // maxWidth = 1.8 * inner; maxWidth = 800; maxHeightTop = inner / 2; maxHeightBottom = inner / 3; this.text1.attr({ text: label1, transform: '' });
Vergeet ook niet: bij elke update zul je dit aan moeten passen!
Bij meer vragen verneem ik graag bericht.
Maarten Verstraeten
-
13-01-2016, 22:47 #5
- Berichten
- 940
- Lid sinds
- 15 Jaar
Re: Grafieken morris.js > donut chart > label beweegt bij hover
in de file morris.js staan de volgende textregels
Code:Donut.prototype.setLabels = function(label1, label2) { var inner, maxHeightBottom, maxHeightTop, maxWidth, text1bbox, text1scale, text2bbox, text2scale; inner = (Math.min(this.el.width() / 2, this.el.height() / 2) - 10) * 2 / 3; // maxWidth = 1.8 * inner; maxWidth = 800; maxHeightTop = inner / 2; maxHeightBottom = inner / 3; this.text1.attr({ text: label1, transform: '' });
Vergeet ook niet: bij elke update zul je dit aan moeten passen!
Bij meer vragen verneem ik graag bericht.
Maarten Verstraeten
Bedankt voor u bericht !
Dat de tekst mogelijk over de donut gaat is niet gewenst.
Als ik moet kiezen tussen het bewegen of over de donut gaan ... dan kies ik bewegen.
Ik neem uw input zeker meer voor het geval het altijd een klein label is.
Met vriendelijke groeten
Wesley
-
14-01-2016, 18:14 #6
- Berichten
- 94
- Lid sinds
- 17 Jaar
Re: Grafieken morris.js > donut chart > label beweegt bij hover
Dat de text eroverheen valt is uiteraard een gevolg van de textlengte die je definieerd.
Wat je ook zou kunnen doen is de gehele donut wat "opblazen" waardoor je in het midden wat meer ruimte creeerd voor je text.
-
14-01-2016, 19:19 #7
- Berichten
- 416
- Lid sinds
- 15 Jaar
Re: Grafieken morris.js > donut chart > label beweegt bij hover
Hallo iedereen
Om de statistieken van mijn website wat aangenamer te maken gebruik ik Morris.js :
http://morrisjs.github.io/morris.js/donuts.html
Wanneer ik over de 'donut' hover, verspringt de tekst in het midden een paar pixels :
http://jsbin.com/ukaxod/144/embed?js,output
Dat is in het origineel ook al het geval ... heeft iemand dat kunnen oplossen ?
Groeten
Wesley
Plaats een
- + Advertentie
- + Onderwerp
Marktplaats
Webmasterforum
- Websites algemeen
- Sitechecks
- Marketing
- Domeinen algemeen
- Waardebepaling
- CMS
- Wordpress
- Joomla
- Magento
- Google algemeen
- SEO
- Analytics
- Adsense
- Adwords
- HTML / XHTML
- CSS
- Programmeren
- PHP
- Javascript
- JQuery
- MySQL
- Ondernemen algemeen
- Belastingen
- Juridisch
- Grafisch ontwerp
- Hosting Algemeen
- Hardware Info
- Offtopic