Question

我必须在仪表板中设计两个饼图，第一个饼图应在页面的上半部分，第二个饼图应在页面的下半部分。我正在为此使用anychart，但无法理解如何为此使用piechart.bounds(0,0,0,0)。 anychart.bounds中的4个参数表示什么？

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

我希望我的图表在另一张下面并不能并排

Answer 1

尝试以下操作，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>

Answer 2

bounds（）函数将图表放置在阶段（基于阶段的布局）内的特定位置。 bounds（）函数获取4个参数：x，y，宽度，高度。用于参数的全部可以是用于相对定位的多个像素或百分比。 @shrys提供了很好的示例。您可以在API Reference中了解有关bounds（）函数的更多信息。关于stage-based layout in the Documentation。您会发现更多使用这种方法的示例。

anychart.bounds会做什么，以及它如何在特定位置配置图表

2 个答案: