Функция поиска для поиска определенной диаграммы среди нескольких диаграмм на панели инструментов - PullRequest
Новая
       13

Функция поиска для поиска определенной диаграммы среди нескольких диаграмм на панели инструментов

0 голосов
/ 06 мая 2020

Я делаю весеннее приложение с java и JSP. На панели инструментов я показываю несколько биржевых диаграмм с использованием диаграммы Highstock. Теперь у меня есть панель поиска над диаграммами, и я хочу найти конкретную диаграмму.

Я пробовал использовать Js, но безуспешно, поэтому, пожалуйста, помогите мне с этим и предложите подходы.

Ответы [ 2 ]

0 голосов
/ 06 мая 2020

Запустите приведенный ниже код в браузере. используйте для поиска 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>
0 голосов
/ 06 мая 2020

Все диаграммы Highcharts хранятся в глобально определенном массиве Highcharts.charts, который вы можете фильтровать, чтобы найти нужную диаграмму (например, по их идентификатору контейнера).

Демо: https://jsfiddle.net/BlackLabel/w29pL0zg/

console.log(Highcharts.charts)

Проверьте консоль.

...