Tous les Skills vidéo Premium dans un seul abonnement. Résiliable à tout moment.Voir les offres
Halden Solace · 16:9

Rendu par ce Skill

Graphique barres et courbe v1.0.0

Un graphique barres et courbe de style éditorial se construit mois par mois : les barres montent, une courbe se trace par-dessus et chaque valeur grimpe.

Pas encore de note 0 téléchargements
Format
Vidéo · 16:9
Durée
0:15

Gratuit Gratuit avec un compte

Se connecter pour télécharger

Collez ceci dans votre agent. Il connecte la CLI si besoin, puis installe le Skill.

Un bloc HyperFrames gratuit pour 15 secondes de data storytelling façon presse. Le quadrillage et les mois apparaissent, les barres montent une à une avec leurs valeurs, puis une courbe se trace par-dessus avec ses propres pourcentages, sous un titre à empattements, un sous-titre, une légende et une ligne de source. Les mois, les deux séries de données, les échelles, les libellés et les titres se modifient dans le HTML.

Le plus souvent choisi par

Mis à jour le 3 nov. 2026

Ce que vous obtenez

  • Un graphique 1920×1080 de 15 secondes sur fond transparent
  • Des barres, une courbe et des valeurs qui se construisent dans l'ordre
  • Un titre à empattements, une légende et une ligne de source

Idéal pour

  • Résultats et histoires de croissance
  • Points d'étape pour investisseurs et conseils d'administration
  • Vidéos explicatives et rapports

Pas pour

  • Plus de six périodes
  • Les tableaux de bord chargés

À propos de ce Skill

Vous dites

/data-chart Fais un graphique barres et courbe : "Halden Solace: pairs sold vs. repeat buyers", de juin à novembre, paires vendues de 9 à 23 milliers et clients fidèles de 24% à 44%.

Deux chiffres qui évoluent ensemble racontent une histoire : ventes et clients fidèles, trafic et inscriptions, chiffre d'affaires et marge. Graphique barres et courbe montre les deux dans un graphique éditorial et posé qui se construit tout seul, pour que le public lise la tendance avant que la voix off ne l'explique.

Comment ça marche

  1. Demandez : donnez à votre agent six mois, les valeurs des barres et de la courbe, les unités et un titre.
  2. Remplissage : il inscrit vos textes et vos couleurs dans les variables du bloc, en gardant des textes proches de la longueur prévue par la mise en page.
  3. Rendu : il rend un brouillon avec npx hyperframes render, vérifie quelques images et rend le MP4 final.
  4. Réutilisation : les variables tiennent dans un petit fichier JSON ; la version suivante, c'est un rendu de plus.

Conseils

  • Gardez l'échelle de la courbe au-dessus de celle des barres pour que ses libellés ne les chevauchent jamais.
  • Indiquez les unités dans le sous-titre et la légende.
  • Le fond est transparent : rendez-le avec un canal alpha et superposez-le à votre propre vidéo, à une photo ou à une couleur unie ; le SKILL.md donne les deux commandes.
  • Il n'a pas de variables : votre agent modifie les textes et les chiffres directement dans le HTML, en suivant le SKILL.md.

Open source

C'est un bloc du registre HyperFrames, réalisé par HeyGen et les contributeurs de HyperFrames (heygen-com/hyperframes) et partagé sous Apache License 2.0. Le téléchargement contient le bloc, ses ressources et un SKILL.md rédigé par Reelity, pour que votre agent sache le remplir et le rendre ; HyperFrames lui-même s'exécute depuis npm.

Ce qu'il vous faut avant de commencer

Vous fournissez
Six périodes de données pour deux mesures, les unités et un titre.
Dépendances
Node.js 22 ou version ultérieure — requis · FFmpeg — requis
Coûts externes
Aucun. HyperFrames est gratuit et open source, et le rendu se fait sur votre propre machine.
Dernier test
v1.0.0 —

Avis des utilisateurs

Pas encore d'avis. Installez le Skill et soyez le premier à le noter.

FAQ

Puis-je utiliser d'autres périodes que des mois ?

Oui. Les libellés sont une liste dans le script ; trimestres, années ou semaines fonctionnent.

Comment éviter que les libellés se chevauchent ?

Réglez le maximum de la courbe plus bas que celui des barres pour que la courbe passe au-dessus ; c'est ce que fait notre exemple.

Pourquoi est-ce gratuit ?

C'est un bloc HyperFrames open source de HeyGen et des contributeurs de HyperFrames. Nous le proposons tel quel, avec un SKILL.md pour que votre agent puisse l'utiliser et un exemple réalisé avec l'une de nos marques maison, Halden Solace.

Guides

How to make an animated bar and line chart for a videoTwo measures moving together tell a story. How to build an editorial bar-and-line chart that animates itself, free, with the Bar and Line Chart block.

Skills similaires

Tout voir