求助：如何为AnyChart 7.13的PERT Chart启用水平滚动

Hey Vikas, let's work through this horizontal scroll issue with your AnyChart 7.13 PERT chart—those truncated tasks on the right are definitely frustrating! Here's a step-by-step solution to get the scroll working properly:

1. First, Set Up Your Container Correctly #

Make sure your chart container has a fixed width (instead of 100% if that's what you're using) so there's a clear boundary for the scroll to trigger. Add this CSS to your container div:

#chart-container {
  width: 800px; /* Adjust this to your desired visible width */
  height: 500px;
  overflow: hidden; /* Let AnyChart handle the scrollbar instead of the browser */
}

2. Enable the Horizontal Scrollbar in AnyChart #

By default, the horizontal scrollbar might be disabled for PERT charts. Turn it on explicitly in your chart initialization code:

var chart = anychart.pert(yourPERTData);

// Enable the horizontal scrollbar
chart.horizontalScrollbar().enabled(true);

3. Ensure Your Chart Content Exceeds the Container Width #

This is the key part—if your chart's total width doesn't exceed the container's width, the scrollbar won't appear. You have two options here:

• Auto-size to content: Let AnyChart calculate the exact width needed to fit all tasks:

  chart.autoSize(true);
  

• Manual fixed width: Set a width large enough to fit all your tasks (adjust the value based on your data):

  chart.width(1400); // Pick a value that ensures all tasks fit without truncation
  

4. Fix the Timeline to Include All Tasks #

Sometimes truncation happens because the timeline isn't adjusted to cover all your tasks. Force it to fit every task in your dataset:

chart.timeline().fitAll();

Full Working Example #

Here's how all these pieces come together:

<div id="chart-container" style="width: 800px; height: 500px; overflow: hidden;"></div>

<script>
anychart.onDocumentReady(function() {
  // Sample PERT data with predecessor tasks
  var pertData = [
    {id: "A", name: "Requirements Gathering", start: "2024-03-01", end: "2024-03-08"},
    {id: "B", name: "Design Phase", start: "2024-03-09", end: "2024-03-20", predecessors: ["A"]},
    {id: "C", name: "Development", start: "2024-03-21", end: "2024-04-15", predecessors: ["B"]},
    {id: "D", name: "Testing", start: "2024-04-16", end: "2024-04-25", predecessors: ["C"]},
    {id: "E", name: "Deployment", start: "2024-04-26", end: "2024-04-30", predecessors: ["D"]}
  ];

  // Initialize PERT chart
  var chart = anychart.pert(pertData);

  // Enable horizontal scrollbar
  chart.horizontalScrollbar().enabled(true);

  // Auto-size chart to fit all content (or use chart.width(1400) instead)
  chart.autoSize(true);

  // Make sure timeline includes all tasks
  chart.timeline().fitAll();

  // Render the chart
  chart.container("chart-container");
  chart.draw();
});
</script>

Common Mistakes to Avoid #

• Don't set chart.width() to a percentage like 100%—this makes the chart match the container width, so no scroll is triggered.
• Forgetting to enable the scrollbar explicitly—AnyChart 7.x doesn't always turn this on by default for PERT charts.
• Not fitting the timeline to all tasks—if your last tasks are outside the timeline's default range, they'll get truncated even if the scrollbar is enabled.

Give these steps a try, and your truncated tasks should become accessible via horizontal scroll!

内容的提问来源于stack exchange，提问作者Vikas Handa