Problèmes de Highcharts synchronisés horizontalement

Question

Je cherche à implémenter des graphiques synchronisés dans mon application en utilisant le code d'exemple de Highcharts ici :

https://www.highcharts.com/demo/synchronized-charts

J'ai une mise en page en colonnes en utilisant le framework Materialize et les graphiques sont positionnés côte à côte dans une rangée. Après avoir joué un peu avec l'exemple de Highcharts, il semble que les graphiques ne se comportent pas de la même manière horizontalement que verticalement. Les étiquettes ne sont pas synchronisées entre les graphiques et les lignes de repère ne se déplacent pas en synchronisation non plus.

Après quelques lectures, j'ai trouvé une question similaire qui a déjà été posée :

Highcharts Sync charts horizontally

Cependant, comme quelqu'un l'a souligné dans les commentaires de la réponse "correcte" marquée, la solution ne fonctionne pas pour les graphiques responsives comme les miens. Cette personne a été conseillée de poser une question distincte sur SO, mais comme je ne la trouve pas, je la pose.

Jusqu'à présent, voici la meilleure solution que j'ai trouvée pour que mes graphiques fonctionnent correctement :

https://jsfiddle.net/6h7aL2rw/1/

Cependant, comme vous pouvez le voir lorsque vous déplacez le curseur jusqu'à la fin du premier graphique, l'infobulle et les lignes de repère ne sont pas entièrement synchronisées et elles sont en retard de quelques points sur chaque graphique.

Le code que j'ai modifié par rapport à l'exemple original est le suivant :

$('#container').bind('mousemove touchmove touchstart', function (e) {
            var chart,
                point,
                i,
                event;

            for (i = 0; i < Highcharts.charts.length; i = i + 1) {
                chart = Highcharts.charts[i];
                event = chart.pointer.normalize(e.originalEvent); // Trouver les coordonnées dans le graphique

                event.chartX = (event.chartX + 3 * $('.chart').width()) % $('.chart').width();

                point = chart.series[0].searchPoint(event, true); // Obtenir le point survolé
                if (point) {
                    point.highlight(e);
                }
            }
        });

Comme cela a été souligné dans la question originale, je ne comprends cependant pas la signification de ceci :

event.chartX + 3 * $('.chart').width()

Mais je pense que c'est cette partie de code qui pose problème et empêche les graphiques d'être synchronisés.

Answer 1

Ce problème est causé par les espaces entre les graphiques, veuillez vérifier un exemple sans eux: https://jsfiddle.net/BlackLabel/5Lgrc08z/

Comme solution, vous pouvez définir event.chartX à e.offsetX:

$('#container').bind('mousemove touchmove touchstart', function(e) {
    var chart,
        point,
        i,
        event;

    for (i = 0; i < Highcharts.charts.length; i = i + 1) {
        chart = Highcharts.charts[i];
        event = chart.pointer.normalize(e.originalEvent); // Trouver les coordonnées dans le graphique

        event.chartX = e.offsetX;

        point = chart.series[0].searchPoint(event, true); // Obtenir le point survolé
        if (point) {
            point.highlight(e);
        }
    }
});

---

Démonstration en direct: https://jsfiddle.net/BlackLabel/ts7w4kxu/