Question

我们正在使用Anychart版本7.13在我们的应用程序中创建PERT图表。我们的数据有一系列任务，前辈需要图表水平滚动。我们的图表被截断了，我们尝试在％和PX中调整chart.width但不能启用水平滚动。

非常感谢任何帮助。

由于

维卡斯Screenshot showing truncation on right

Answer 1

此外，您应该调整里程碑和里程碑大小之间的间距（％）。这将允许pert图表适合阶段宽度。我在下面为你准备了一个样本，图表是可滚动的。请注意CSS样式，舞台设置和大小/间距设置。也许，您应该在％图表中尝试其他值。

anychart.onDocumentReady(function () {

  // create data
  var data = [
    {id: "1", duration: 1, name: "Task A"},
    {id: "2", duration: 3, name: "Task B", dependsOn:["1"]},
    {id: "3", duration: 4, name: "Task C", dependsOn:["2"]},
    {id: "4", duration: 1, name: "Task D", dependsOn:["3"]},
    {id: "5", duration: 2, name: "Task E", dependsOn: ["4"]},
    {id: "6", duration: 2, name: "Task F", dependsOn: ["5"]},
    {id: "7", duration: 1, name: "Task G", dependsOn: ["6"]},
    {id: "8", duration: 2, name: "Task H", dependsOn: ["7"]},
    {id: "9", duration: 3, name: "Task I", dependsOn: ["8"]},
    {id: "10", duration: 2, name: "Task J", dependsOn: ["9"]}
  ];

  // create a chart
  var chart = anychart.pert();
  //create stage
  var  stage = anychart.graphics.create("container");
  //set stage width
   stage.width(2000);
 
  // adjsut milestones size in %   
  chart.milestones().size('5%');
  //adjust spacing in %
  chart.horizontalSpacing("9%");

  // set chart data
  chart.data(data, "as-table");
  //render chart
  chart.container(stage).draw();  
});

     html, body,   #container {
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow-x: scroll;
        }

<script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-pert.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-ui.min.js"></script>
<link href="https://cdn.anychart.com/releases/8.1.0/css/anychart-ui.min.css" rel="stylesheet"/>


<div id="container"></div>

ANYCHART - PERT图表，如何添加水平滚动

1 个答案: