Как я могу динамически установить maxItems для моего облака слов? - PullRequest
Новая
       56

Как я могу динамически установить maxItems для моего облака слов?

0 голосов
/ 26 апреля 2020

У меня есть простая диаграмма облака слов, которую я делаю: https://jsfiddle.net/kbhx64Ln/

Она начинается с 15 максимальных элементов в облаке. Тем не менее, я хотел бы динамически обновлять это число, основываясь на таймере. У меня есть: 

$(document).ready(function() {
  var cnt = 0;
  var interval = setInterval(function() {
    cnt += 1;
    console.log("drawing: " + cnt);
    draw(cnt);
  }, 3000);
});


anychart.onDocumentReady(function() {
  draw(15);
});

function draw(maxItems) {
  // create data
  var data = "Tyger, tyger, burning bright " +
    "In the forests of the night, " +
    "What immortal hand or eye " +
    "Could frame thy fearful symmetry? " +
    "In what distant deeps or skies " +
    "Burnt the fire of thine eyes? " +
    "On what wings dare he aspire? " +
    "What the hand dare seize the fire? " +
    "And what shoulder and what art " +
    "Could twist the sinews of thy heart? " +
    "And, when thy heart began to beat, " +
    "What dread hand and what dread feet? " +
    "What the hammer? what the chain? " +
    "In what furnace was thy brain? " +
    "What the anvil? what dread grasp " +
    "Dare its deadly terrors clasp? " +
    "When the stars threw down their spears, " +
    "And watered heaven with their tears, " +
    "Did He smile His work to see? " +
    "Did He who made the lamb make thee? " +
    "Tyger, tyger, burning bright " +
    "In the forests of the night, " +
    "What immortal hand or eye " +
    "Dare frame thy fearful symmetry? ";

  // create a chart
  var chart = anychart.tagCloud();

  // set the parsing mode and configure parsing settings
  chart.data(data, {
    mode: "by-word",
    maxItems: maxItems,
    ignoreItems: [
      "the",
      "and",
      "he",
      "or",
      "of",
      "in",
      "thy",
    ]
  });

  // set the chart title
  chart.title("Tag Cloud Chart: Data (Parsing Text)");

  // set the container id
  chart.container("container");

  // initiate drawing the chart
  chart.draw();
}

Кажется, что я могу начать с любого номера maxItems, но не могу обновить этот номер. Что я делаю не так?

РЕДАКТИРОВАТЬ: Кажется, я также не могу изменить ignoreItems. Любое решение для этого?

1 Ответ

2 голосов
/ 26 апреля 2020

Поместите облачный объект в контейнер. И каждый раз, когда вы обновляете sh, информация удаляет облачный объект, удаляет объект диаграммы, а затем снова добавляет облачный объект. (Перезапустите график) 

$(document).ready(function() {
  var cnt = 0;

  var interval = setInterval(function() {
    cnt += 1;
    draw(cnt);
  }, 300);
});


anychart.onDocumentReady(function() {
  draw(1);
});

function draw(maxItems) {
  // create data
  var data = "Tyger, tyger, burning bright " +
    "In the forests of the night, " +
    "What immortal hand or eye " +
    "Could frame thy fearful symmetry? " +
    "In what distant deeps or skies " +
    "Burnt the fire of thine eyes? " +
    "On what wings dare he aspire? " +
    "What the hand dare seize the fire? " +
    "And what shoulder and what art " +
    "Could twist the sinews of thy heart? " +
    "And, when thy heart began to beat, " +
    "What dread hand and what dread feet? " +
    "What the hammer? what the chain? " +
    "In what furnace was thy brain? " +
    "What the anvil? what dread grasp " +
    "Dare its deadly terrors clasp? " +
    "When the stars threw down their spears, " +
    "And watered heaven with their tears, " +
    "Did He smile His work to see? " +
    "Did He who made the lamb make thee? " +
    "Tyger, tyger, burning bright " +
    "In the forests of the night, " +
    "What immortal hand or eye " +
    "Dare frame thy fearful symmetry? ";

  // create a chart
  var chart = anychart.tagCloud();

  // set the parsing mode and configure parsing settings
  chart.data(data, {
    mode: "by-word",
    maxItems: maxItems,
    ignoreItems: [
      "the",
      "and",
      "he",
      "or",
      "of",
      "in",
      "thy",
    ]
  });

  // set the chart title
  chart.title("Tag Cloud Chart: Data (Parsing Text)");

  // set the container id
  document.getElementById("cloud").remove();

  var cloud = document.createElement("div");
  cloud.id = "cloud";
  document.getElementById("container").appendChild(cloud);

  chart.container("cloud");

  // initiate drawing the chart
  chart.draw();
}
html,
body,
#container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="container">
  <div id="cloud">
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.0.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-tag-cloud.min.js"></script>
...