plotly.js條形圖需要點擊酒吧onclick事件

我一直在尋找一段時間才能運行一個特定的功能，當我點擊條形圖上的特定酒吧。該功能可以像打開鏈接或將圖形更改爲不同圖形一樣簡單。plotly.js條形圖需要點擊酒吧onclick事件

在html文件中，有一個滑塊（未顯示）可更改圖形數據。但是，圖表中的佈局和其他所有內容保持不變。

我想我想通了，我需要我的圖形的嵌入式鏈接，以便能夠在我的HTML中放入一個iframe標籤。

但是，我不確定如何做到這一點，如果有可能。

總之，我的HTML是：

<!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>

...

而且我的JavaScript：

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); 

}

來源

2016-09-12 VincFort

嘗試如下：

document.getElementById("myDiv").on('plotly_click', function(data){ 
    console.log(data.points[0].x); 
});

該函數將在圖形單擊上調用。記錄的數據是x軸上的條形的名稱。 data保存有關click事件的其他元數據。利用它來實現所需的功能。

來源

2016-09-12 16:47:32 Rambler

plotly.js條形圖需要點擊酒吧onclick事件

回答

相關問題