{"id":5542,"date":"2025-02-26T12:37:30","date_gmt":"2025-02-26T11:37:30","guid":{"rendered":"https:\/\/spgoo.org\/?page_id=5542"},"modified":"2025-02-26T16:15:52","modified_gmt":"2025-02-26T15:15:52","slug":"highcharts","status":"publish","type":"page","link":"https:\/\/spgoo.org\/?page_id=5542","title":{"rendered":"Highcharts"},"content":{"rendered":"\n

Highcharts<\/a><\/h2>\n\n\n\n\n\n\n\n

Retour d’exp\u00e9rience dans la manipulation de la librairie<\/p>\n\n\n\n

Dans le contexte EMOLGINE, on a pu exp\u00e9rimenter cette librairie dans l’affichage des nuages de points repr\u00e9sentant les mol\u00e9cules, l’affichage d’un organigramme pour d\u00e9crire le protocole de traitement utilis\u00e9 et dans l’affichage des relations de similarit\u00e9s entre mol\u00e9cules. A chaque contexte son graphe le plus adapt\u00e9. Deux difficult\u00e9s \u00e0 surmonter : la premi\u00e8re difficult\u00e9 est le passage des donn\u00e9es et l’affichage des graphiques, la deuxi\u00e8me difficult\u00e9 est la r\u00e9cup\u00e9ration des interactions de l’utilisateur sur ces graphiques. L’usage de ces graphiques sert pour le repr\u00e9sentation d’un ensemble de donn\u00e9es et pour naviguer dans ces donn\u00e9es.<\/p>\n\n\n\n

Illustrations : nuage de points sous Highcharts <\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Exemple d’organigramme sous Highcharts :<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Exemple de repr\u00e9sentation de liens entre les mol\u00e9cules : <\/p>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

<\/p>\n\n\n\n

Exemple de la construction du premier graphe : <\/p>\n\n\n\n

Libraires JS \u00e0 inclure pour l’utilisation de ces graphes<\/p>\n\n\n\n

\n<script src=\"\/personnalisation\/code\/highcharts.js\"><\/script>\n<script src=\"\/personnalisation\/code\/modules\/exporting.js\"><\/script>\n<script src=\"\/personnalisation\/code\/modules\/sankey.js\"><\/script>\n<script src=\"\/personnalisation\/code\/modules\/arc-diagram.js\"><\/script>\n<script src=\"\/personnalisation\/code\/modules\/organization.js\"><\/script>\n<script src=\"\/personnalisation\/code\/modules\/heatmap.js\"><\/script>\n<script src=\"\/personnalisation\/code\/highcharts-more.js\"><\/script>\n<script src=\"\/personnalisation\/code\/modules\/treemap.js\"><\/script>\n<script src=\"\/personnalisation\/code\/modules\/treegraph.js\"><\/script>\n<script src=\"\/personnalisation\/code\/modules\/export-data.js\"><\/script>\n<script src=\"\/personnalisation\/code\/modules\/accessibility.js\"><\/script><\/code><\/pre>\n\n\n\n
Code pour le traitement du graphe<\/p>\n\n\n\n
Code<\/summary>\n
const trace_graphique_Nuage=function(KEY, Serie, Title,Source, fct, axes=[\"Affinity\",\"Efficiency\"]) {\n    const chart=Highcharts.chart('container_'+ KEY, {\n        width:500,\n\theight:500,\n\tchart: {type: 'scatter',zooming: {type: 'xy'}},\n\ttitle: {text: Title},\n\tsubtitle: {text: Source\t},\n\txAxis: {\n\t\ttitle: {text: axes[0]},\n\t\tlabels: {format: '{value} '},\n\t\tstartOnTick: true,\n\t\tendOnTick: true,\n\t\tshowLastLabel: true\n\t},\n\tyAxis: {\n\t\ttitle: {text: axes[1]},\n\t\tlabels: {format: '{value} '}\n\t},\n\tlegend: {enabled: true},\n\ttooltip: {\n          formatter: function () {\n             return `The value for <b>${this.key}<\/b> is <b>${this.id}<\/b>`;\n          }\n\t},\t\t\t\t\n\tplotOptions: {\n\t  scatter: {\n            \tcursor: 'pointer',\n            \tpoint: {\n                  events: {\n                    click: function () {\n\t\t\tfct(this.id);<\/strong>\n        \t    }\n            \t  }\n            \t},\t\t\t\t\n\t\tmarker: {\n\t\t\tradius: 2.5,\n\t\t\tsymbol: 'circle',\n\t\t\tstates: {\n\t\t    \t  hover: {\n\t\t\t\tenabled: true,\n\t\t\t\tlineColor: 'rgb(100,100,100)'\n\t\t\t  }\n\t\t\t}\n\t\t},\n\t\tstates: {\n\t\t\thover: {\n\t\t\t\tmarker: {enabled: false\t}\n\t\t\t}\n\t\t},\n\t\t  jitter: { x: 0.005 }\n\t\t}\n\t},\n\tseries:Serie<\/strong>\n   });\n   return chart;\n}<\/code><\/pre>\n<\/details>\n\n\n\n
Structure de la s\u00e9rie<\/summary>\n
\n
\n
<\/p>\n\n\n\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n<\/details>\n\n\n\n
Interaction avec ces objets graphiques : <\/p>\n\n\n\n
Comment g\u00e9rer l’\u00e9v\u00e9nementiel sur ce type de graphique ? <\/p>\n\n\n\n
En un mot quelles sont les possibilit\u00e9s d’interaction que l’on offre aux utilisateurs sur ce type de graphe.<\/p>\n\n\n\n
Quelles sont les interactions prises en compte par la librairie et quelles sont les interactions que l’on peut d\u00e9velopper ? <\/p>\n\n\n\n
Pris en compte par la librairie<\/p>\n\n\n\n
    \n
  • zoom =>  seul l’indication du type xy est \u00e0 indiquer dans le paragraphe chart. <\/li>\n\n\n\n
  • affichage et masquage des s\u00e9ries : \u00e0 l’aide de la l\u00e9gende. <\/li>\n\n\n\n
  • les d\u00e9placements de la souris au dessus du point du nuage =>  l’affichage associ\u00e9 est d\u00e9crit dans le paragraphe tooltip. <\/li>\n<\/ul>\n\n\n\n
    A compl\u00e9ter : <\/p>\n\n\n\n
    click : la gestion de l’\u00e9v\u00e9nement click sur le graphe est indiqu\u00e9 dans le paragraphe plotOptions et l’aiguillage vers le traitement  souhait\u00e9 dans la partie points \/ events. <\/p>\n\n\n\n
    \tpoint: {\n          events: {\n             click: function () {\n\t\tfct(this.id);\t\t\t\t\t\t\t\n       \t     }\n          }\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
    Highcharts Retour d’exp\u00e9rience dans la manipulation de la librairie Dans le contexte EMOLGINE, on a pu exp\u00e9rimenter cette librairie dans l’affichage des nuages de points repr\u00e9sentant les mol\u00e9cules, l’affichage d’un organigramme pour d\u00e9crire le protocole de traitement utilis\u00e9 et dans l’affichage des relations de similarit\u00e9s entre mol\u00e9cules. A chaque contexte son graphe le plus adapt\u00e9. Deux […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5542","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/5542","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5542"}],"version-history":[{"count":24,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/5542\/revisions"}],"predecessor-version":[{"id":5605,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/5542\/revisions\/5605"}],"wp:attachment":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}