如何调整Highcharts树形图矩形尺寸并修正分类区域L形为矩形

Hey there! Let's break down solutions to your two treemap problems clearly:

1. Convert L-Shaped Color-Coded Areas to Rectangles #

The root cause of the L-shaped regions is likely that your same-category items are placed directly under the root node without a shared parent. Highcharts' default squarified layout can spread these items out across the chart. To fix this:

• Group same-category items under a parent node: Create a parent entry for each category, then link all its child items using the parent property. This forces the parent node to occupy a solid rectangular area, with child items arranged inside it.
• Choose a layout algorithm that preserves rectangular parent regions: stripes or sliceAndDice work better than the default squarified for keeping parent nodes as clean rectangles.

Example Data Structure #

Highcharts.chart('treemap', {
  series: [{
    type: 'treemap',
    layoutAlgorithm: 'stripes', // Ensures parent regions stay rectangular
    allowDrillToNode: true,
    levels: [{
      level: 1, // Parent category level
      dataLabels: { enabled: true },
      borderWidth: 2,
      borderColor: '#fff'
    }],
    data: [
      // Category 1 (red) - parent node
      { id: 'cat1', name: 'Category 1', color: '#FF5733' },
      // Child items for Category 1
      { id: 'cat1-item1', parent: 'cat1', name: 'Item 1', value: 15 },
      { id: 'cat1-item2', parent: 'cat1', name: 'Item 2', value: 25 },
      
      // Category 2 (green) - parent node
      { id: 'cat2', name: 'Category 2', color: '#33FF57' },
      // Child items for Category 2
      { id: 'cat2-item1', parent: 'cat2', name: 'Item A', value: 20 },
      { id: 'cat2-item2', parent: 'cat2', name: 'Item B', value: 10 },
      
      // Repeat for your other 2 categories
      { id: 'cat3', name: 'Category 3', color: '#3357FF' },
      { id: 'cat3-item1', parent: 'cat3', name: 'Item X', value: 30 },
      
      { id: 'cat4', name: 'Category 4', color: '#FF33A6' },
      { id: 'cat4-item1', parent: 'cat4', name: 'Item Y', value: 5 },
      { id: 'cat4-item2', parent: 'cat4', name: 'Item Z', value: 12 }
    ]
  }]
});

2. Adjust Rectangle Sizes #

Rectangle dimensions in treemaps are primarily controlled by the value property in your data. Here's how to tweak them:

• Directly modify the value property: Larger values create larger rectangles. Adjust these numbers to set relative sizes between items.
• Fine-tune layout with algorithm parameters: If you want to adjust the aspect ratio of rectangles, use options specific to your chosen layout algorithm:
  • For squarified layout: Use the squarified.ratio option to control how close rectangles are to square (lower values = more square, higher = more elongated).
  • For stripes/sliceAndDice: Use layoutStartingDirection to switch between vertical or horizontal striping.

Example: Adjusting Sizes & Aspect Ratio #

series: [{
  type: 'treemap',
  layoutAlgorithm: 'squarified',
  squarified: {
    ratio: 0.3 // Makes rectangles more square than the default 0.5
  },
  layoutStartingDirection: 'horizontal',
  data: [
    { id: 'cat1', name: 'Category 1', color: '#FF5733' },
    { id: 'cat1-item1', parent: 'cat1', name: 'Item 1', value: 30 }, // Larger value = bigger rectangle
    { id: 'cat1-item2', parent: 'cat1', name: 'Item 2', value: 10 }, // Smaller value = smaller rectangle
    // ... rest of your data
  ]
}]

内容的提问来源于stack exchange，提问作者Asma Imtiaz