我正在用java和JSP制作一个spring应用程序,在Dashboard中,我使用Highstock图表显示多个股票图表。在Dashboard中,我使用Highstock图表显示多个股票图表。现在我有一个搜索栏上面的图表,我想搜索一个特定的图表。
我已经尝试使用Js,但不成功,所以请帮助我,并建议我的方法。
所有的Highcharts图表都存储在全局定义的Highcharts.charts数组中,你可以通过过滤来找到想要的图表(例如通过它们的容器ID)。
演示。https:/jsfiddle.netBlackLabelw29pL0zg
console.log(Highcharts.charts)
检查控制台。
在浏览器中运行以下代码,使用productId1、productId2或productId3进行搜索。
<!DOCTYPE html>
<html>
<head>
<script>
//create productid to chart containerid mappings (on server side itself)
const searchList = {
productId1: ["container11", "container13"],
productId2: ["container12", "container1"],
productId3: ["container2", "container3", "container13"]
}
// create list of all the chart container ids (on server side itself)
const chartList = ["container1","container2", "container3", "container11","container12","container13"];
// search function for searching productid (exact match)
function searchProduct() {
// take the user input value for the productid
const searchTerm = document.getElementById("searchBox").value;
console.log(searchTerm);
//get the list of all chart containerid list for productid user has searched
const chartListForProduct = searchList[searchTerm];
// hide all charts when user is searching
chartList.forEach((containerId) => {
const chartContainer = document.getElementById(containerId)
chartContainer.style.display = "none"
});
// mappings are available for given searched product id display only those charts
if(chartListForProduct){
chartListForProduct.forEach((containerId) => {
const chartContainer = document.getElementById(containerId)
chartContainer.style.display = "block"
});
}
}
</script>
</head>
<body>
<div>
<h1>
Search chart by productId
</h1>
<input type="text" id="searchBox" value="" />
<button name="search" onClick="searchProduct()"> Search</button>
</div>
<br/><br/><br/>
<div id="container11">Chart 11....</div>
<div id="container12">Chart 12....</div>
<div id="container13">Chart 13....</div>
<div id="container1">Chart 1....</div>
<div id="container2">Chart 2....</div>
<div id="container3">Chart 3....</div>
</body>
</html>