Kuinka tehdään interaktiivinen kaavio?

Anonyymi-ap

Kuten Ylen sivustolla oleva "Sähkön hinta tänään" kaavio?

https://yle.fi/a/74-20003500

Kun siinä siirtää hiirtä päällä, niin näytetään pystyviivalla kyseisen hetken hinta.

Joku hiiren "hoover"-juttu varmaan käytössä? Millähän hakusanoilla vastaavan tekemiseen löytyisi lisätietoa?

5

346

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • Anonyymi

      Kyllähän tuo onnistuu vaikka ihan vaan seuraamalla hiiren liikettä (mousemove event) ja piirtämällä kaavio uudestaan aina kun hiiri liikkuu.

      Tuossa on näköjään käytetty hienosti SVG:tä niin ei tarvitse koko kaaviota piirrellä uudestaan, muuttaa vain tarvittavien elementtien parametreja.

      • Anonyymi

        Ja tuo SVG elementtien parametrien muuttaminen tapahtuu tietenkin JavaScriptillä.

        Eli mousemove event joka käynnistää JavaScript pätkän joka muuttaa kaaviota.


      • Anonyymi

        Kokeille hirttosilmukkaa!


    • Anonyymi

    Ketjusta on poistettu 0 sääntöjenvastaista viestiä.

    Luetuimmat keskustelut

    1. Koko familia taas lehdissä jauhamassa vanhoja asioitaan

      Nyt menee familialla lujaa. Martina ja äiti MeNaisissa (taas) ja Esko IS:ssa. Kuinkakohan monta kymmentä kertaa nuo sam
      Kotimaiset julkkisjuorut
      377
      1616
    2. Minkä ikäistä ikävöit?

      Minkä ikäinen hän on ja mitä hän sinulle merkitsee/merkitsi?
      Ikävä
      81
      1592
    3. Teemu Keskisarja (ps) loisti- ja hurmasi MTV:n tentissä.

      https://www.mtvuutiset.fi/artikkeli/kommentti-keskisarja-sekoitti-pakan-suomiareenan-puheenjohtajatentissa/9180380 Kuten
      Maailman menoa
      378
      1568
    4. Olet hirvein ihminen kenet olen tavannut.

      Olet järkyttävä.
      Ikävä
      81
      1338
    5. Taas syytöntä ja rehellisintä rangaistiin

      Ja vielä 13 000 euroa kaupungin oikeudenkäyntikuluja maksuun. Lisää tällaisia päätöksiä.😀
      Haapavesi
      48
      1241
    6. Aika pieni se on

      Joku sanoo että matala on suihku. Säätöä tarviaa nyt ruisku, että se ruiskuaa korkeudelle valopylvään Näin saamme näht
      Haapavesi
      37
      1095
    7. Heh, Irvi-Riikka vie duunareilta nyt arkipyhätkin

      Voihan saksilla näköjään leikellä kalenteriakin. Irvi-Riikalla ne osuivat arkipyhiin. Että sellainen duunaripuolue 😆
      Maailman menoa
      256
      1051
    8. vinkki miehille

      Jos on ollut erimielisyyksiä ja sun käytös on satuttanut naisya, et voi palata takaisin kevyesti niin kuin mitään ei oli
      Ikävä
      163
      918
    9. Kiitos siitä

      Kiitos siitä hahmosta jonka loit, ja jonka sain tuntea, ja kutsua ystäväksi. Se oli hyvä tyyppi ja siihen oli helppo rak
      Ikävä
      40
      895
    10. Ilouutinen: Teini-ikään ehtinyt Osmo Peltola TV:ssä! Tätä tiedossa Peltsi-isän kanssa tällä kertaa

      Mikä upea parivaljakko: Peltsi-isä ja Osmo-poika. Peltsin toisen luonto starttaa televisiossa ja mukana muutamassa jakso
      Tv-sarjat
      20
      887
    Aihe