Highcharts : faire en sorte que la barre de défilement couvre uniquement la zone de dessin

Question

Voici un exemple de graphique, basé sur le didacticiel de barre de défilement de la documentation des highcharts ici : https://jsfiddle.net/zao68u2k/1/ La seule modification que j'ai apportée à la démo par défaut a été de supprimer le masque via :

scrollablePlotArea: {
  opacity: 1,
}

Maintenant que le masque a disparu, cela n'a aucun sens que la barre de défilement occupe toute la largeur du graphique. Je souhaite raccourcir la barre de défilement pour qu'elle corresponde uniquement à la largeur du tracé lui-même, sans inclure les axes, comme je l'ai simulé dans l'image. Est-il possible?

Answer 1

Dans ce cas, vous devez utiliser xAxis.scrollbar 属性以及 xAxis.min 和 xAxis，而不是 chart.scrollablePlotArea。最大 :

xAxis: {
    min: Date.UTC(2023, 6, 1),
    max: Date.UTC(2023, 6, 1, 3),
    scrollbar: {
        enabled: true
    }
}

Cependant, il s'agit d'une fonctionnalité fournie par Stock, vous devez donc disposer d'une licence pour ce produit et importer la bibliothèque correspondante dans votre projet :

<script src="https://code.highcharts.com/stock/highstock.js"></script>

Démo : https://jsfiddle.net/BlackLabel/rvm1s67w/
API : https://api.highcharts.com/highstock/xAxis .Scrollbars