我一直在寻找一种方法,能够在单击柱状图上的特定条时运行特定函数。该函数可以很简单,比如打开一个链接或将图形更改为不同的图形。
在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);
}
data.points[0].y > 0
,如果不是,则不执行任何操作。 - Jérôme Teisseire