что делает anychart.bounds и как настраивает диаграмму в определенном месте - PullRequest
Новая
       52

что делает anychart.bounds и как настраивает диаграмму в определенном месте

0 голосов
/ 24 июня 2019

Мне нужно спроектировать две круговые диаграммы на приборной панели, и первая круговая диаграмма должна быть в верхней половине страницы, а вторая диаграмма - в нижней половине страницы. Я использую anychart для этого, но я не могу понять, как использовать piechart.bounds(0,0,0,0) для этого. Что означают 4 параметра в anychart.bounds. 

pieChart.bounds(0, 0, "50%", "100%");

Я хочу, чтобы мои диаграммы одна под другой, а не рядом

Ответы [ 2 ]

0 голосов
/ 25 июня 2019

Функция bounds () размещает диаграмму в определенном месте внутри сцены (макет на основе этапа). Функция bounds () получает 4 аргумента: x, y, width, height. Все для аргументов может быть количеством пикселей или процентов для относительного позиционирования. @shrys предоставил хороший пример этого. Вы можете узнать больше о функции bounds () в Справочнике по API . А про поэтапный макет в документации . Там вы найдете больше примеров использования этого подхода.

0 голосов
/ 24 июня 2019

Попробуйте следующее, bounds решит, где ваша диаграмма должна быть размещена в div: 

anychart.onDocumentReady(function() {

  // create a stage
  var stage = anychart.graphics.create("container");

  // create data
  var data = [{
      x: "A",
      value: 637166
    },
    {
      x: "B",
      value: 721630
    },
    {
      x: "C",
      value: 148662
    },
    {
      x: "D",
      value: 78662
    },
    {
      x: "E",
      value: 90000
    }
  ];

  // create and configure the first pie chart
  var pie1 = anychart.pie(data);
  pie1.bounds(0, 0, "50%", "50%");
  // disable the legend
  pie1.legend(false);
  // set the chart container
  pie1.container(stage);
  // initiate drawing the chart
  pie1.draw();

  // create and configure the second pie chart
  var pie2 = anychart.pie(data);
  pie2.bounds("0", "50%", "50%", "50%");
  // set the radius
  pie2.radius("30%");
  // disable the legend
  pie2.legend(false);
  // set the chart container
  pie2.container(stage);
  // initiate drawing the chart
  pie2.draw();
});
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://cdn.anychart.com/releases/8.6.0/js/anychart-base.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<script src="https://cdn.anychart.com/releases/8.6.0/js/anychart-exports.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<script src="https://cdn.anychart.com/releases/8.6.0/js/anychart-ui.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<div id="container" style="height: 500px; width: 500px;"></div>
...