Graphiques de séries temporelles interactifs en R avec echarts4r

Q: Comment placer de vraies dates sur l’axe des x dans echarts4r ?

Faites de la colonne x une véritable Date (ou POSIXct) et passez-la à e_charts(). echarts4r construit alors automatiquement un axe temporel — espacé selon la distance calendaire avec des graduations de date pertinentes. Un x numérique ou de type caractère donne à la place un simple axe de valeurs ou de catégories, alors convertissez-le d’abord avec as.Date(...).

Q: Comment dessiner un theme river sans le group_by() de dplyr ?

Gardez les données au format large — une colonne de date plus une colonne de valeur par groupe — et ajoutez un appel e_river() par colonne. C’est l’idiome R de base qu’utilise cette leçon, et il reflète l’ajout d’un e_line() par colonne pour un graphique en courbes multi-séries. Aucun group_by() requis.

Q: En quoi echarts4r diffère-t-il de ggiraph pour les séries temporelles ?

ggiraph rend vos séries temporelles ggplot2 existantes interactives en les représentant en SVG, si bien que l’apparence est identique à ggplot2 et que le widget est 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 déplaçable, un véritable axe temporel, des theme rivers animés — 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.

Placez de vraies dates sur l’axe des x : une courbe datée avec un curseur de zoom, et un theme river des parts de chaque groupe au fil du temps

Placez de vraies dates sur l’axe des x avec echarts4r — une courbe datée avec un curseur de zoom déplaçable, et un theme river qui montre comment un total se répartit entre les groupes au fil du temps, le tout depuis un flux de travail avec pipe familier. Chaque graphique se charge à la demande pour que la page reste rapide.

Date de publication

9 juillet 2026

Modifié

9 juillet 2026

Points clés

echarts4r enveloppe Apache ECharts, une bibliothèque de graphiques JavaScript libre et open source, dans un pipe R épuré — e_charts() démarre un graphique, e_line() ajoute une courbe.
Une série temporelle place de vraies dates sur l’axe des x. Donnez une colonne Date à e_charts() et echarts4r construit un véritable axe temporel ; ajoutez e_datazoom() pour un curseur de zoom déplaçable afin de vous concentrer sur n’importe quelle période.
Un theme river (e_river()) montre comment un total se répartit entre les groupes au fil du temps — chaque bande colorée est un groupe, et son épaisseur est la part de ce groupe pour cette période.
Sur cette page, chaque graphique interactif se cache derrière une image statique que vous cliquez pour charger — la lourde bibliothèque de graphiques ne se télécharge qu’à la demande, pour que la page reste dans le budget de performance mobile.
L’image statique est un simple graphique ggplot2, produit par du code que vous pouvez copier et exécuter — la version interactive représente les mêmes données, rendues explorables.

Introduction

Vous réalisez déjà des graphiques de séries temporelles avec ggplot2 : geom_line(), une Date sur l’axe des x avec scale_x_date(), et c’est fait. Ce graphique statique est parfait pour un rapport ou un article. Mais une longue série datée appelle souvent à être explorée — lire la valeur exacte à un jour donné, ou zoomer sur une année d’une décennie. 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 en pipe qui semble familier si vous connaissez le tidyverse.

Cette leçon construit deux graphiques datés. D’abord une courbe datée avec un curseur de zoom : deux indices boursiers sur plusieurs années, avec un véritable axe temporel que vous pouvez faire glisser pour zoomer. Puis un theme river, une vue empilée et fluide qui montre comment un total mensuel se répartit entre quelques groupes au fil du temps. Chacun est construit deux fois — une fois en tant qu’image statique ggplot2 (la référence reproductible que la page charge en premier), une fois en tant que widget echarts4r interactif que vous ouvrez d’un clic.

Pourquoi chaque graphique se charge au clic

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.

La référence statique : une courbe ggplot2 datée

Nous allons représenter deux indices boursiers européens — le DAX allemand et le FTSE britannique — à partir de la série intégrée EuStockMarkets. Elle ne possède pas de dates propres, nous attachons donc une date quotidienne séquentielle à chaque observation, ce qui nous donne un véritable axe temporel. D’abord, construisez le data frame en R de base et tracez les deux courbes 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)

# Attach a daily date to each observation (base R — no dplyr needed)
idx <- data.frame(
  day  = as.Date("1991-01-01") + seq_len(nrow(EuStockMarkets)) - 1,
  DAX  = as.numeric(EuStockMarkets[, "DAX"]),
  FTSE = as.numeric(EuStockMarkets[, "FTSE"])
)

# Long form so ggplot draws one coloured line per index
idx_long <- data.frame(
  day   = rep(idx$day, 2),
  level = c(idx$DAX, idx$FTSE),
  index = rep(c("DAX", "FTSE"), each = nrow(idx))
)

ggplot(idx_long, aes(day, level, colour = index)) +
  geom_line(linewidth = 0.6) +
  scale_colour_manual(values = c(DAX = "#3a86d4", FTSE = "#f5a524")) +
  scale_x_date(date_labels = "%Y") +
  labs(x = NULL, y = "Index level", colour = NULL,
       title = "European stock indices over time") +
  theme_minimal(base_size = 13) +
  theme(legend.position = "top")

Two stock indices, DAX in azure and FTSE in amber, plotted over several years with dates on the x-axis, both trending upward.

Les deux courbes utilisent l’azur de marque #3a86d4 et l’ambre #f5a524, scale_x_date() met en forme l’axe en années, et theme_minimal() le garde épuré. C’est un graphique prêt à publier. Rendons maintenant la même série explorable.

Une courbe datée avec un curseur de zoom

echarts4r lit un data frame, vous nommez la colonne x dans e_charts(), puis ajoutez une courbe avec e_line(). Lorsque cette colonne x est une Date, echarts4r construit automatiquement un axe temporel — régulièrement espacé selon la distance calendaire réelle, avec des graduations de date pertinentes. Comme il s’agit d’une longue série (plus de 1 800 jours), nous ajoutons un curseur de zoom avec e_datazoom() pour que le lecteur puisse se concentrer sur n’importe quelle portion. Nous assignons le graphique à line plutôt que de l’imprimer en ligne, pour que la page reste légère — puis nous le chargeons derrière l’image statique ci-dessous.

invisible(Sys.setlocale("LC_TIME", "C"))   # locale-neutral English date labels (axis + poster)
library(echarts4r)

idx <- data.frame(
  day  = as.Date("1991-01-01") + seq_len(nrow(EuStockMarkets)) - 1,
  DAX  = as.numeric(EuStockMarkets[, "DAX"]),
  FTSE = as.numeric(EuStockMarkets[, "FTSE"])
)

line <- idx |>
  e_charts(day) |>                       # a Date column -> a time axis
  e_line(DAX) |>                         # one line series per index column
  e_line(FTSE) |>
  e_color(c("#3a86d4", "#f5a524")) |>    # azure + amber, matching the static chart
  e_tooltip(trigger = "axis") |>         # one tooltip showing both indices at a date
  e_datazoom(type = "slider")            # a draggable zoom slider below the axis

Lisez le pipe de haut en bas : démarrez un graphique sur day, ajoutez une courbe DAX et une courbe FTSE, colorez-les en azur et ambre, affichez une infobulle partagée au survol, et ajoutez le curseur. Deux appels e_line() donnent deux séries — le même idiome R de base, un appel par colonne, que la leçon sur les graphiques en courbes utilise pour des données groupées, sans besoin de dplyr. Enregistrez maintenant le widget et affichez-le derrière une image statique.

Deux indices boursiers représentés sur plusieurs années avec des dates sur l’axe des x. Survolez une date pour comparer les deux indices ; faites glisser le curseur pour zoomer sur une période.

Survolez n’importe quelle date et ECharts affiche les deux valeurs d’indice ensemble ; faites glisser les poignées du curseur pour zoomer sur une seule année de cotation — les interactions que vous ne pouvez pas obtenir d’un PNG statique. Tout le reste, ce sont les mêmes données et la même palette azur-et-ambre.

Un theme river : les parts d’un total au fil du temps

Un theme river (aussi appelé stream graph) montre comment un total se répartit entre les groupes au fil du temps. Chaque bande colorée est un groupe ; l’épaisseur de la bande est la valeur de ce groupe pour cette période, et les bandes s’empilent pour former le total global. Il se lit comme un graphique en aires fluide et convient naturellement aux questions du type « comment le mélange a-t-il changé au fil du temps ». echarts4r en dessine un avec e_river().

L’idiome R de base reflète le motif multi-courbes : gardez les données au format large (une colonne de date plus une colonne de valeur par groupe) et ajoutez un appel e_river() par groupe — sans besoin du group_by() de dplyr. Ici, nous utilisons un petit tableau fixe de trois groupes sur six mois.

invisible(Sys.setlocale("LC_TIME", "C"))   # locale-neutral English month labels (axis + poster)
library(echarts4r)

# A small wide table: one Date column + one value column per group (base R)
mo <- seq(as.Date("2023-01-01"), by = "month", length.out = 6)
rv <- data.frame(
  month = mo,
  A = c(10, 12, 15, 14, 18, 20),
  B = c( 8,  9,  7, 11, 10, 12),
  C = c( 5,  6,  8,  7,  9, 11)
)

river <- rv |>
  e_charts(month) |>
  e_river(A) |>                              # one river band per group column
  e_river(B) |>
  e_river(C) |>
  e_color(c("#440154", "#21918c", "#fde725")) |>  # viridis, colourblind-safe
  e_tooltip(trigger = "axis")                      # all three shares at the hovered date

Chaque groupe obtient son propre appel e_river() sur sa propre colonne et sa propre couleur viridis. e_tooltip(trigger = "axis") rapporte les trois parts à la fois lorsque vous survolez un mois. Enregistrez-le et affichez l’image statique.

Un theme river montrant comment un total mensuel se répartit entre trois groupes au fil du temps. Chaque bande est un groupe ; son épaisseur est la part de ce groupe pour ce mois.

Dans le graphique chargé, les bandes s’écoulent et s’animent, et survoler un mois liste la part de chaque groupe à la fois — le genre d’exploration qui transforme un empilement statique en une histoire que vous pouvez lire à travers le temps.

Afficher les données sous-jacentes

La courbe datée représente EuStockMarkets — les niveaux des indices DAX et FTSE — avec une date quotidienne séquentielle attachée à chacune de ses lignes. Le theme river utilise ce petit tableau fixe de trois groupes sur six mois :

Monthly values for three groups (A, B, C) — the theme-river data.
month	A	B	C
2023-01-01	10	8	5
2023-02-01	12	9	6
2023-03-01	15	7	8
2023-04-01	14	11	7
2023-05-01	18	10	9
2023-06-01	20	12	11

Problèmes fréquents

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(line) (ou en laissant line comme dernière ligne d’un chunk) affiche le widget directement, sans image statique.

Mon axe des x affiche des nombres, pas des dates. echarts4r déduit le type d’axe à partir de la colonne. Un x numérique donne un simple axe de valeurs ; seule une véritable colonne Date (ou POSIXct) donne un véritable axe temporel avec des graduations de date. Construisez la colonne x avec as.Date(...) avant de l’insérer dans e_charts().

Mon theme river n’affiche qu’une seule bande, ou renvoie une erreur. e_river() dessine une bande par appel, à partir d’un tableau large (une colonne de date plus une colonne de valeur par groupe). Ajoutez un e_river() par colonne de groupe, comme dans la leçon — n’ayez pas recours au group_by() de dplyr. Si vos données sont au format long (une colonne de groupe plus une colonne de valeur), remodelez-les d’abord au format large avec reshape(long, idvar = "date", timevar = "group", direction = "wide").

Questions fréquentes

echarts4r est-il gratuit à utiliser, même sur un site web commercial ?

Oui. echarts4r est publié sous la licence Apache 2.0 et enveloppe Apache ECharts, également sous Apache 2.0 — une licence permissive, libre et open source, sans frais par site ni frais commercial. Vous pouvez l’utiliser dans des rapports, des tableaux de bord et des sites publics sans licence payante.

Comment placer de vraies dates sur l’axe des x dans echarts4r ?

Faites de la colonne x une véritable Date (ou POSIXct) et passez-la à e_charts(). echarts4r construit alors automatiquement un axe temporel — espacé selon la distance calendaire avec des graduations de date pertinentes. Un x numérique ou de type caractère donne à la place un simple axe de valeurs ou de catégories, alors convertissez-le d’abord avec as.Date(...).

Qu’est-ce qu’un theme river et quand faut-il l’utiliser ?

Un theme river (ou stream graph) est un graphique en aires empilées et fluide : chaque bande colorée est un groupe, son épaisseur est la valeur de ce groupe au fil du temps, et les bandes s’empilent pour former le total. Utilisez-le pour montrer comment un mélange change au fil du temps — part de marché par marque, trafic par source, budget par catégorie. Pour lire une valeur exacte par date, il est moins précis que des courbes séparées, alors associez-le à une infobulle.

Comment dessiner un theme river sans le group_by() de dplyr ?

Gardez les données au format large — une colonne de date plus une colonne de valeur par groupe — et ajoutez un appel e_river() par colonne. C’est l’idiome R de base qu’utilise cette leçon, et il reflète l’ajout d’un e_line() par colonne pour un graphique en courbes multi-séries. Aucun group_by() requis.

En quoi echarts4r diffère-t-il de ggiraph pour les séries temporelles ?

ggiraph rend vos séries temporelles ggplot2 existantes interactives en les représentant en SVG, si bien que l’apparence est identique à ggplot2 et que le widget est 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 déplaçable, un véritable axe temporel, des theme rivers animés — 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.

Testez vos connaissances

À votre tour : construire une courbe datée avec un curseur de zoom

En utilisant la série intégrée AirPassengers (144 totaux mensuels à partir de janvier 1949), attachez une véritable Date mensuelle à chaque valeur, puis dessinez une courbe datée interactive avec echarts4r : une seule courbe azur, une infobulle au survol, et un curseur de zoom. Assignez le graphique à une variable et imprimez-le pour le visualiser.

Indice

Construisez la colonne de date avec seq(as.Date("1949-01-01"), by = "month", length.out = 144) et associez-la à as.numeric(AirPassengers) dans un data frame. Puis enchaînez e_charts(date), e_line(passengers), e_color("#3a86d4"), e_tooltip(), et e_datazoom(type = "slider").

Solution

library(echarts4r)

# Base-R data prep: a monthly Date column + the values
ap <- data.frame(
  date       = seq(as.Date("1949-01-01"), by = "month", length.out = 144),
  passengers = as.numeric(AirPassengers)
)

ap |>
  e_charts(date) |>
  e_line(passengers, name = "Passengers") |>
  e_color("#3a86d4") |>
  e_tooltip() |>
  e_datazoom(type = "slider")

Comme date est une véritable Date, echarts4r construit un axe temporel ; le curseur vous permet de zoomer sur n’importe quelle suite de mois.

Vérification rapide. Vous avez un tableau large avec une colonne date et trois colonnes de groupe, et vous voulez un theme river avec une bande pour chaque groupe. Combien d’appels e_river() écrivez-vous ?

Afficher la réponse

Trois — un par colonne de groupe. e_river() dessine une seule bande par appel, en lisant un tableau large, donc trois groupes signifient e_river(A) |> e_river(B) |> e_river(C). C’est le même motif un-appel-par-colonne que e_line() pour les courbes multi-séries.

Conclusion

echarts4r transforme une série temporelle familière en une série explorable : donnez une colonne Date à e_charts() pour un véritable axe temporel, ajoutez e_line() et e_datazoom() pour une courbe datée zoomable, ou e_river() pour un theme river des parts de chaque groupe au fil du temps. 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 d’ici, la même grammaire en pipe s’étend aux barres, aux nuages de points et à bien d’autres types de graphiques.

Leçons connexes

Graphiques en courbes et en aires interactifs avec echarts4r — le même pipe pour les courbes non datées, les aires remplies et plusieurs séries ; Graphiques en courbes en R avec ggplot2 et Tracer plusieurs courbes — la base des séries temporelles statiques ; Graphiques interactifs avec ggiraph — rendez vos graphiques ggplot2 existants interactifs.
Pour aller plus loin : echarts4r — la série complète. · Visualisation de données — le pilier.

Cette page vous a-t-elle été utile ?

Prouvez que vous savez le faire. Maîtrisez toute la série echarts4r — suivez votre parcours, construisez des projets et obtenez un certificat.

Commencer gratuitement →

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

Passer à Pro →

✓ Vous êtes Pro — continuez. The runtime is the judge.

Prêt à passer à la vitesse supérieure ?

Essayez sur vos propres données avec Prova — the runtime is the judge.Ouvrir Prova →

Réutilisation

CC BY-NC-SA 4.0

Citation

BibTeX

@online{2026,
  author = {},
  title = {Graphiques de séries temporelles interactifs en R avec
    echarts4r},
  date = {2026-07-09},
  url = {https://www.datanovia.com/learn/data-visualization/echarts4r/interactive-time-series},
  langid = {fr}
}

Veuillez citer ce travail comme suit :

“Graphiques de séries temporelles interactifs en R avec echarts4r.” 2026. July 9. https://www.datanovia.com/learn/data-visualization/echarts4r/interactive-time-series.