在仪表盘的多个图表中搜索特定图表的功能。

问题描述 投票:0回答:1

我正在用java和JSP制作一个spring应用程序,在Dashboard中,我使用Highstock图表显示多个股票图表。在Dashboard中,我使用Highstock图表显示多个股票图表。现在我有一个搜索栏上面的图表,我想搜索一个特定的图表。

我已经尝试使用Js,但不成功,所以请帮助我,并建议我的方法。

javascript ajax spring-mvc jsp highcharts
1个回答
0
投票

所有的Highcharts图表都存储在全局定义的Highcharts.charts数组中,你可以通过过滤来找到想要的图表(例如通过它们的容器ID)。

演示。https:/jsfiddle.netBlackLabelw29pL0zg

console.log(Highcharts.charts)

检查控制台。


0
投票

在浏览器中运行以下代码,使用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>
© www.soinside.com 2019 - 2024. All rights reserved.