Javascript plotly.js中的下拉菜单，用于在图表之间切换
我正在尝试创建一种方法，在在线仪表板上自动可视化许多不同类型的数据。我正在使用plotly.js（构建在d3之上）进行这些可视化。现在，在默认图表旁边，我想创建一个下拉框，允许您切换到其他图表类型，但我无法让它工作，也没有在plotly中找到类似的示例。任何帮助都会很好 下面是我的代码，它向服务器查询数据，然后将其绘制成直方图。我可以让单个图表工作，只是不使用下拉框。我甚至不确定我通过使下拉对象成为函数所做的事情是否被允许，以及我是否可以使用它来更改要绘制的数据Javascript plotly.js中的下拉菜单，用于在图表之间切换,javascript,d3.js,plotly,Javascript,D3.js,Plotly,我正在尝试创建一种方法，在在线仪表板上自动可视化许多不同类型的数据。我正在使用plotly.js（构建在d3之上）进行这些可视化。现在，在默认图表旁边，我想创建一个下拉框，允许您切换到其他图表类型，但我无法让它工作，也没有在plotly中找到类似的示例。任何帮助都会很好 下面是我的代码，它向服务器查询数据，然后将其绘制成直方图。我可以让单个图表工作，只是不使用下拉框。我甚至不确定我通过使下拉对象成为函数所做的事情是否被允许，以及我是否可以使用它来更改要绘制的数据 <!DOCTYPE htm
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Simple Bar Chart</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script> </script>
<style>
.bar {
fill: steelblue;
}
.bar:hover {
fill: brown;
}
</style>
</head>
<body>
<div id="chart" style="width:90%;height:600px;"></div>
<!-- For plotly code to bind to -->
<div id="drop-down"></div>
<script>
// set the dimensions and margins of the graph
var margin = { top: 20, right: 20, bottom: 80, left: 40 };
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
// append the svg object to the body of the page
// append a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// sends asynchronous request to the url
var HttpClient = function() {
this.get = function(aUrl, aCallback) {
var anHttpRequest = new XMLHttpRequest();
anHttpRequest.onreadystatechange = function() {
if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200) {
aCallback(anHttpRequest.responseText);
}
}
anHttpRequest.open("GET", aUrl, true);
anHttpRequest.send(null);
}
};
var client = new HttpClient();
//hard coded URL for now, will accept from UI later
myURL = "https://neel-dot-village-test.appspot.com/_ah/api/searchApi/v1/fetchChartData?chartSpecs=%7B%22axis1%22%3A+%22name%22%2C+%22axis2%22%3A%22cumulativeNumbers.totalBudget%22%7D&topicType=%2Ftype%2Ftata%2Fproject";
client.get(myURL, function(response) {
var jresp = JSON.parse(response); //get response as JS object
plotHist(JSON.parse(jresp.json));
});
var chooseChart = function(data){
buttons: [{
method: plotHist,
args: data,
label: 'Histogram'
}, {
method: plotBar,
args: data,
label: 'Bar Chart'
}]
};
var plotHist = function(data) {
var plotdata = [{
x: data.y.values,
type: 'histogram',
marker: {
//color: 'rgba(100,250,100,0.7)'
},
}];
var layout = {
xaxis: {
title: data.y.label,
rangeslider: {} }, //does not automatically adjust bin sizes though
yaxis: { title: "Count" },
updatemenus: chooseChart(data),
autobinx: true
};
Plotly.newPlot('chart', plotdata, layout);
};
var plotBar = function(data) { //using plotly (built on d3)
var plotdata = [{
x: data.x.values,
y: data.y.values,
type: 'bar'
}];
var layout = {
xaxis: { title: data.x.label },
yaxis: { title: data.y.label },
updatemenus: chooseChart(data)
};
Plotly.newPlot('chart', plotdata, layout);
};
</script>
</body>
简单条形图
.酒吧{
填充：钢蓝；
}
.bar:悬停{
填充物：棕色；
}
//设置图形的尺寸和边距
var-margin={顶部：20，右侧：20，底部：80，左侧：40}；
变量宽度=960-margin.left-margin.right；
变量高度=500-margin.top-margin.bottom；
//将svg对象附加到页面主体
//将“组”元素附加到“svg”
//将“组”元素移动到左上角
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//向url发送异步请求
var HttpClient=function（）{
this.get=函数（aUrl、aCallback）{
var anHttpRequest=newxmlhttprequest（）；
anHttpRequest.onreadystatechange=函数（）{
如果（anhtprequest.readyState==4&&anhtprequest.status==200）{
aCallback（anhtprequest.responseText）；
}
}
anhtprequest.open（“GET”，aUrl，true）；
anHttpRequest.send（空）；
}
};
var client=新的HttpClient（）；
//目前为硬编码URL，稍后将从UI接受
myURL=”https://neel-dot-village-test.appspot.com/_ah/api/searchApi/v1/fetchChartData?chartSpecs=%7B%22axis1%22%3A+%22name%22%2C+%22axis2%22%3A%22CumulativeEnumbers.totalBudget%22%7D&topicType=%2Ftype%2Ftata%2Fproject”；
get（myURL，函数（响应）{
var jresp=JSON.parse（response）；//将响应作为JS对象获取
plotHist（JSON.parse（jresp.JSON））；
});
var chooseChart=功能（数据）{
按钮：[{
方法：plotHist，
args：数据，
标签：“直方图”
}, {
方法：绘图栏，
args：数据，
标签：“条形图”
}]
};
var plotHist=函数（数据）{
变量plotdata=[{
x:data.y.值，
类型：'直方图'，
标记：{
//颜色：“rgba（100250100,0.7）”
},
}];
变量布局={
xaxis:{
标题：data.y.标签，
RangeSloider:{}，//但不会自动调整存储箱大小
yaxis:{标题：“计数”}，
更新：选择图表（数据），
autobinx：对
};
Plotly.newPlot（'图表'、绘图数据、布局）；
};
var plotBar=函数（数据）{//使用plotly（基于d3构建）
变量plotdata=[{
x:data.x.values，
y：数据y值，
类型：'bar'
}];
变量布局={
xaxis:{title:data.x.label}，
yaxis:{title:data.y.label}，
更新：选择图表（数据）
};
Plotly.newPlot（'图表'、绘图数据、布局）；
};