plotly.js bargraph brauchen onclick event beim Klicken auf bar

Ich habe eine Weile gesucht, um eine bestimmte Funktion ausführen zu können, wenn ich auf einen bestimmten Balken im Balkendiagramm klicke. Die Funktion wäre entweder so einfach wie das Öffnen einer Verknüpfung oder das Ändern der Grafik in eine andere Grafik.plotly.js bargraph brauchen onclick event beim Klicken auf bar

In der HTML-Datei gibt es einen Schieberegler (nicht abgebildet), der die Grafikdaten ändert. Das Layout und alles andere im Diagramm bleibt jedoch gleich.

Ich denke, ich habe herausgefunden, dass ich einen eingebetteten Link meines Graphen brauche, um ein iframe-Tag in meinen HTML-Code einfügen zu können.

Allerdings bin ich mir nicht sicher, wie das geht und ob es möglich ist.

Kurz gesagt, mein HTML ist:

<!DOCTYPE html> 

<html> 


<head> 

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
<script src="graphing_barchart.js"></script> 
<script src="graphing_heatmap.js"></script> 
<link rel="stylesheet" href="style.css"> 


</head> 

<body onload="barchart_graph()"> 
<div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>

...

Und mein Javascript ist:

function create_graph_barchart(matrix_list){ 
switch(matrix_list) { 

var zValues=[]; 
    var date_list; 

    case "0": 
     zValues = [-2.45,-0.4,1.3, 
       2.9,3.9,-5.66, 
       0.5,-2.6,-3.2, 
       -8.3,-0.5,-3.0]; 
     date_list = "January 2015" 
     break; 
    case "1": 
     zValues = [3.75,6.6,-2.5, 
       6.2,1.3,6.3, 
       0.2,7.5,7.3, 
       7.7,4.4,5.6]; 
     date_list = "Febuary 2015" 
     break;

.....

var data = [{ 

    x: x_text, // X axis (names) 
    y: zValues, // Values (y axis) 
    hoverinfo: zValues, 
    type: 'bar', 
    orientation:"v", 
    marker: { 
    color: color_list, // Color of bars 
    opacity: 0.6, 
    line: { 
     color: 'rbg(8,48,107)', 
     width: 1 
    }}, 
    yauto: false, 
    showscale: true, 
    }]; 

    var layout = { 
    font:{ 
     // Text size and color 
     size:16, 
     family:'helvetica', 
     color: "white" 
    }, 
    annotations: [], 
    xaxis: { 
     side: 'bottom', 
     orientation: "right" 
    }, 
    yaxis: { 
     autosize: true, 
     tickfont: "white", 
     ticksuffix: "%", 
     // Y axis scale 
     autorange: false, 
     range :[-20,20] 
    }, 
    // Graph position 
    margin: { 
    l: 90, 
    r: 90, 
    b: 120, 
    t: 20, 
    pad: 10 
    }, 
    // Graph background colors 
    paper_bgcolor: "transparent", 
    plot_bgcolor:"transparent", 
    }; 


Plotly.newPlot('myDiv',data,layout); 

}

Quelle

2016-09-12 VincFort

Try Folgendes:

Diese Funktion wird beim Klicken auf die Grafik aufgerufen. Die protokollierten Daten sind der Name der Leiste auf der X-Achse. data enthält andere Metadaten bezüglich des Ereignisses click. Nutzen Sie es, um die gewünschte Funktionalität zu erreichen.

Quelle

2016-09-12 16:47:32 Rambler

plotly.js bargraph brauchen onclick event beim Klicken auf bar

Antwort

Verwandte Themen