Ajoutez des infobulles au survol, un curseur de zoom, des aires remplies et plusieurs séries à un graphique en courbes de style ggplot
Transformez un graphique en courbes ggplot2 statique en un graphique interactif avec echarts4r — ajoutez des infobulles au survol, un curseur de zoom pour les longues séries temporelles, des aires remplies, et plusieurs séries que vous pouvez basculer dans la légende, le tout depuis un flux de travail avec pipe familier. Chaque graphique se charge à la demande pour que la page reste rapide.
e_charts() démarre un graphique, e_line() ajoute une courbe.Vous créez déjà des graphiques en courbes avec ggplot2 : geom_line(), une couleur, une date sur l’axe des x, et c’est fait. Ce graphique statique est parfait pour un rapport ou un article. Mais parfois vous voulez que le lecteur l’explore — lire la valeur exacte au survol, zoomer sur une année d’une longue série, ou activer et désactiver un groupe. C’est là qu’intervient echarts4r : il apporte Apache ECharts — une bibliothèque de graphiques mature, libre et open source — dans R avec un flux de travail avec pipe qui semble familier si vous connaissez le tidyverse.
Cette leçon construit le même graphique en courbes deux fois : d’abord comme figure ggplot2 statique (la référence reproductible, et l’image à chargement rapide que vous voyez sur la page), puis comme widget echarts4r interactif que vous chargez d’un clic. Nous commençons par une seule courbe, ajoutons un curseur de zoom et une aire remplie, puis représentons plusieurs séries à la fois.
Un widget ECharts interactif embarque environ 1 Mo de JavaScript et dessine sur un canvas HTML (la surface de dessin en pixels du navigateur). En charger plusieurs à la fois ralentirait la page sur un téléphone — cela ferait exploser le budget des Core Web Vitals (les métriques de vitesse de page de Google, dont le LCP, le temps de peinture du plus grand élément, est celui qu’un widget lourd pénalise le plus). Ainsi, sur cette page, chaque graphique interactif est d’abord représenté par une image statique ; cliquer sur ▶ Charger le graphique interactif insère le véritable widget echarts4r, entièrement interactif. Vous obtenez la vitesse d’une page statique et l’interactivité complète à la demande. Dans votre propre rapport ou application Shiny, vous imprimeriez simplement le widget directement — le code est identique.
Nous allons représenter le nombre mensuel de passagers aériens à partir de la série intégrée AirPassengers — 144 totaux mensuels de 1949 à 1960, une classique tendance à la hausse avec saisonnalité. D’abord, transformez la série temporelle en un simple data frame avec R de base et tracez une courbe avec ggplot2. Cette figure statique est la référence reproductible — et, sur cette page, l’image principale que la page charge en premier.
library(ggplot2)
# Turn the built-in time series into a data frame (base R — no dplyr needed)
ap <- data.frame(
month = seq_along(AirPassengers), # 1..144, one per month
passengers = as.numeric(AirPassengers)
)
ggplot(ap, aes(month, passengers)) +
geom_line(colour = "#3a86d4", linewidth = 1) +
labs(x = "Month (1 = Jan 1949)", y = "Passengers (thousands)",
title = "Monthly airline passengers, 1949–1960") +
theme_minimal(base_size = 13)
La courbe unique utilise l’azur de la marque #3a86d4, et theme_minimal() la garde épurée. C’est un graphique prêt à publier. Rendons maintenant la même tendance explorable.
echarts4r lit un data frame, vous nommez la colonne x dans e_charts(), puis vous ajoutez une courbe avec e_line(). Le pipe (|>) enchaîne les étapes, exactement comme l’ajout de couches dans ggplot2. Comme il s’agit d’une longue série (144 points), nous ajoutons aussi un curseur de zoom avec e_datazoom() pour que le lecteur puisse se concentrer sur n’importe quelle période. Nous assignons le graphique à basic plutôt que de l’imprimer en ligne, pour que la page reste légère — puis nous le chargeons derrière l’image ci-dessous.
library(echarts4r)
ap <- data.frame(
month = seq_along(AirPassengers),
passengers = as.numeric(AirPassengers)
)
basic <- ap |>
e_charts(month) |> # the x axis (ordered months)
e_line(passengers, name = "Passengers") |> # a line series from the passengers column
e_color("#3a86d4") |> # brand azure, matching the static chart
e_tooltip() |> # show a tooltip on hover
e_datazoom(type = "slider") |> # a draggable zoom slider below the axis
e_legend(show = FALSE) # one series — no legend neededLisez le pipe de haut en bas : démarrez un graphique sur month, ajoutez une courbe passengers nommée « Passengers », colorez-la en azur, activez les infobulles au survol, et ajoutez un curseur. e_datazoom(type = "slider") est l’interaction qu’un PNG statique ne peut pas vous donner — faites glisser ses poignées pour zoomer sur une seule année. Enregistrez maintenant le widget et affichez-le derrière une image.
Graphique en courbes du nombre mensuel de passagers aériens, en hausse de 1949 à 1960. Survolez la courbe pour lire le nombre de passagers de n’importe quel mois ; faites glisser le curseur pour zoomer sur une période.
Survolez la courbe et ECharts affiche la valeur exacte dans une infobulle flottante ; faites glisser les poignées du curseur pour vous concentrer sur une portion de mois — les interactions que vous ne pouvez pas obtenir d’un PNG statique. Tout le reste est la même donnée et la même palette azur.
Quand l’histoire est un total croissant au fil du temps, remplir la région sous la courbe rend la tendance lisible d’un coup d’œil. echarts4r le fait avec e_area() — le même appel que e_line(), mais rempli. Remplacez une fonction et gardez le reste du pipe.
ap <- data.frame(
month = seq_along(AirPassengers),
passengers = as.numeric(AirPassengers)
)
area <- ap |>
e_charts(month) |>
e_area(passengers, name = "Passengers") |> # e_area fills under the line
e_color("#3a86d4") |>
e_tooltip() |>
e_datazoom(type = "slider") |>
e_legend(show = FALSE)e_area() dessine la même courbe mais ombre tout ce qui se trouve en dessous, de sorte que le volume croissant est sans équivoque. Utilisez-le pour une seule quantité qui s’accumule ; pour comparer plusieurs séries, une simple courbe (section suivante) se lit généralement plus clairement que des aires empilées.
Graphique en aires du nombre mensuel de passagers aériens avec la région sous la courbe remplie. L’aire remplie met en évidence la tendance croissante au fil du temps.
Le widget chargé conserve l’infobulle au survol et le curseur de zoom — seul le remplissage a changé. C’est le bénéfice de la grammaire de pipe : un simple changement de fonction vous fait passer d’un type de graphique à un autre en gardant tout le reste intact.
Les courbes tirent vraiment parti de leur interactivité lorsque vous comparez plusieurs séries à la fois. Ici, nous suivons le poids moyen des poussins au fil du temps par régime, à partir du jeu de données intégré ChickWeight. L’idiome est le R de base : moyennez les poids par point temporel et par régime avec aggregate(), remodelez en une table large (une colonne par régime) avec le reshape() de base, puis ajoutez un e_line() par régime. La légende est interactive — cliquez sur un nom de régime dans le graphique rendu pour le basculer.
# Mean weight per time point x diet (base R — no dplyr)
cw <- aggregate(weight ~ Time + Diet, data = ChickWeight, FUN = mean)
# Reshape long -> wide: one row per Time, one column per Diet
w <- reshape(cw, idvar = "Time", timevar = "Diet", direction = "wide")
names(w) <- c("Time", "Diet1", "Diet2", "Diet3", "Diet4")
multi <- w |>
e_charts(Time) |>
e_line(Diet1) |>
e_line(Diet2) |>
e_line(Diet3) |>
e_line(Diet4) |>
e_color(c("#440154", "#31688e", "#35b779", "#fde725")) |> # viridis, colourblind-safe
e_tooltip(trigger = "axis") # one tooltip for all seriesChaque régime obtient son propre appel e_line() et sa propre couleur du vecteur e_color(). e_tooltip(trigger = "axis") affiche les quatre valeurs au point temporel survolé, pour que vous puissiez comparer les régimes directement. Enregistrez-le et affichez l’image.
Quatre courbes montrant le poids moyen des poussins au fil du temps, une par régime. Survolez un point temporel pour comparer les quatre régimes ; cliquez sur une entrée de la légende pour basculer un régime.
Dans le graphique chargé, cliquez sur un régime dans la légende pour masquer ou afficher sa courbe — l’axe se remet à l’échelle automatiquement. Ce basculement de légende est une fonctionnalité réellement interactive qu’une figure statique ne peut pas offrir.
Les graphiques à courbe unique et en aires représentent AirPassengers : 144 lignes de month (1–144, une par mois à partir de janvier 1949) et passengers (totaux mensuels en milliers). Le graphique multi-séries utilise le poids moyen des poussins par temps et par régime :
| Time | Diet1 | Diet2 | Diet3 | Diet4 |
|---|---|---|---|---|
| 0 | 41.4 | 40.7 | 40.8 | 41.0 |
| 2 | 47.2 | 49.4 | 50.4 | 51.8 |
| 4 | 56.5 | 59.8 | 62.2 | 64.5 |
| 6 | 66.8 | 75.4 | 77.9 | 83.9 |
| 8 | 79.7 | 91.7 | 98.4 | 105.6 |
| 10 | 93.1 | 108.5 | 117.1 | 126.0 |
| 12 | 108.5 | 131.3 | 144.4 | 151.4 |
| 14 | 123.4 | 141.9 | 164.5 | 161.8 |
| 16 | 144.6 | 164.7 | 197.4 | 182.0 |
| 18 | 158.9 | 187.7 | 233.1 | 202.9 |
| 20 | 170.4 | 205.6 | 258.9 | 233.9 |
| 21 | 177.8 | 214.7 | 270.3 | 238.6 |
Le graphique n’apparaît pas / la page n’affiche que l’image statique. C’est voulu sur ce site — cliquez sur ▶ Charger le graphique interactif et le véritable widget se charge. Dans votre propre document, print(basic) (ou en laissant basic comme dernière ligne d’un chunk) affiche le widget directement, sans image statique.
Mes courbes multiples sortent toutes de la même couleur, ou la légende est vide. Chaque série a besoin de son propre appel e_line() sur sa propre colonne, et les données doivent être larges (une colonne par groupe). Si vos données sont longues (une colonne de groupe plus une colonne de valeur), remodelez-les d’abord avec reshape(..., direction = "wide") comme dans la leçon, puis ajoutez un e_line() par colonne résultante.
Mon axe des x traite le temps comme des catégories, et non comme une échelle continue. echarts4r déduit le type d’axe à partir de la colonne. Un x numérique (comme month ici) donne un axe de valeurs continu ; un x de type caractère ou facteur donne un axe de catégories. Gardez la colonne x numérique (ou un vrai Date) pour un axe temporel régulièrement espacé.
Oui. echarts4r est publié sous licence Apache 2.0 et enveloppe Apache ECharts, également en Apache 2.0 — une licence permissive, libre et open source, sans frais par site ni frais commerciaux. Vous pouvez l’utiliser dans des rapports, des tableaux de bord et des sites publics sans licence payante.
Elles dessinent la même courbe ; e_area() remplit aussi la région en dessous. Utilisez e_area() pour une seule quantité qui s’accumule et dont le volume rempli raconte l’histoire, et e_line() lorsque vous comparez plusieurs séries (les aires qui se chevauchent deviennent confuses). Tout le reste du pipe — infobulle, couleur, zoom — reste identique.
L’idiome tidy d’echarts4r est group_by(), mais vous pouvez rester en R de base : remodelez vos données en large avec reshape(long, idvar = "x", timevar = "group", direction = "wide") pour que chaque groupe devienne sa propre colonne, puis ajoutez un e_line() par colonne. C’est exactement le motif multi-séries de cette leçon.
Ajoutez e_datazoom(type = "slider") chaque fois que la série est assez longue pour que les points individuels se serrent les uns contre les autres — une série mensuelle ou quotidienne sur plusieurs années, par exemple. Pour une série courte (une poignée de points), le curseur ajoute de l’encombrement sans bénéfice, alors ne le mettez pas.
ggiraph rend votre graphique en courbes ggplot2 existant interactif en l’affichant en SVG, de sorte que l’apparence est identique à ggplot2 et que le widget reste léger. echarts4r dessine avec un moteur différent (Apache ECharts sur un canvas HTML) qui offre des interactions intégrées plus riches — un curseur de zoom, des transitions animées, des basculements de légende — au prix d’une charge JavaScript plus lourde. Utilisez ggiraph pour votre apparence ggplot de publication avec une interactivité légère ; optez pour echarts4r lorsque vous avez besoin de ces contrôles intégrés plus riches.
À partir du jeu de données intégré EuStockMarkets, représentez deux indices — le DAX et le FTSE — comme des courbes distinctes au fil du temps, en azur et ambre, avec une infobulle déclenchée par l’axe et un curseur de zoom. Assignez le graphique à une variable et imprimez-le pour le visualiser.
EuStockMarkets est une série temporelle multivariée. Transformez-la d’abord en data frame, ajoutez un index day, puis enchaînez e_charts(day) avec un e_line() par colonne d’indice. Colorez avec e_color(c("#3a86d4", "#f5a524")), l’infobulle avec e_tooltip(trigger = "axis"), et le curseur avec e_datazoom(type = "slider").
library(echarts4r)
# Base-R data prep: matrix -> data frame + a day index
eu <- as.data.frame(EuStockMarkets)
eu$day <- seq_len(nrow(eu))
eu |>
e_charts(day) |>
e_line(DAX) |>
e_line(FTSE) |>
e_color(c("#3a86d4", "#f5a524")) |>
e_tooltip(trigger = "axis") |>
e_datazoom(type = "slider")Deux appels e_line() donnent deux séries ; trigger = "axis" affiche les deux valeurs au jour survolé, et le curseur vous permet de zoomer sur n’importe quelle portion de jours de cotation.
Vérification rapide. Vous voulez remplir la région sous une seule série temporelle pour mettre en évidence sa croissance. Optez-vous pour e_line() ou e_area() ?
e_area(). Il dessine la même courbe que e_line() mais ombre tout ce qui se trouve en dessous, de sorte qu’un total croissant se lit d’un coup d’œil. Remplacez e_line() par e_area() et gardez le reste du pipe inchangé.
echarts4r transforme un graphique en courbes familier en un graphique explorable : e_charts() définit l’axe des x, e_line() (ou e_area()) ajoute la tendance, et un court pipe ajoute une infobulle au survol, un curseur de zoom et plusieurs séries basculables. L’image statique ggplot2 garde la page rapide ; un clic révèle le graphique interactif complet. Chaque résultat de cette page a été produit par le code montré — copiez n’importe quel bloc et exécutez-le pour les reproduire. À partir de là, la même grammaire de pipe s’étend aux diagrammes en barres, aux nuages de points et à bien d’autres types de graphiques.
Prouvez que vous savez le faire. Maîtrisez toute la série echarts4r — suivez votre parcours, construisez des projets et obtenez un certificat.
Passez à Pro — Prova illimité sur vos propres données et un certificat vérifiable qui atteste la compétence.
dès 15 $/mois facturé annuellement
✓ Vous êtes Pro — continuez. The runtime is the judge.
Prêt à passer à la vitesse supérieure ?
@online{2026,
author = {},
title = {Graphiques en courbes et en aires interactifs en R avec
echarts4r},
date = {2026-07-09},
url = {https://www.datanovia.com/learn/data-visualization/echarts4r/interactive-line-charts},
langid = {fr}
}