首次使用Kendo for Angular，如何创建同平面多资产嵌套式图表？

核心思路 #

在同一个页面容器内创建多个独立的Kendo图表，通过CSS布局实现平面排列，同时配置共享X轴分类保证各资产数据维度对齐，每个图表对应单一资产的数据集。

具体实现步骤 #

1. 准备多资产数据集 #

按资产分组整理数据，确保共用统一的X轴维度：

// 多资产数据
const assetData = [
  {
    name: "资产A",
    data: [120, 130, 145, 160, 155]
  },
  {
    name: "资产B",
    data: [90, 95, 105, 110, 120]
  },
  {
    name: "资产C",
    data: [150, 140, 160, 170, 165]
  }
];
// 所有图表共用的X轴分类
const sharedCategories = ["1月", "2月", "3月", "4月", "5月"];

2. 创建图表容器布局 #

用CSS Grid实现多图表的平面排布，可灵活调整列数：

<div id="chart-container" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 20px;"></div>

3. 循环生成单资产图表 #

遍历资产数据，为每个资产创建独立的折线图，绑定对应数据集并配置共享X轴：

assetData.forEach(asset => {
  // 为每个资产创建图表容器
  $("#chart-container").append(`<div id="chart-${asset.name}"></div>`);
  
  // 初始化Kendo折线图
  $(`#chart-${asset.name}`).kendoChart({
    title: { text: asset.name },
    legend: { visible: false },
    series: [{
      type: "line",
      data: asset.data,
      name: asset.name
    }],
    categoryAxis: {
      categories: sharedCategories,
      labels: { rotation: -45 }
    },
    valueAxis: {
      labels: { format: "{0}" }
    },
    tooltip: { visible: true, format: "{0}" }
  });
});

4. 进阶：X轴联动高亮（可选） #

实现点击任一图表X轴分类，所有图表同步高亮对应维度：

// 绑定X轴点击事件
$(".k-chart").on("categoryAxisClick", function(e) {
  const targetIndex = e.categoryIndex;
  // 遍历所有图表更新高亮状态
  $(".k-chart").each(function() {
    const chart = $(this).data("kendoChart");
    chart.categoryAxis.options.select.from = targetIndex;
    chart.categoryAxis.options.select.to = targetIndex;
    chart.refresh();
  });
});

5. 统一视觉样式 #

添加CSS让所有图表视觉风格一致：

.k-chart {
  height: 300px;
  border: 1px solid #eee;
  border-radius: 4px;
}

关键注意事项 #

• 所有图表的categoryAxis.categories必须完全一致，确保数据维度对齐
• 通过CSS Grid/Flex布局可灵活调整图表的排列数量、间距和响应式表现
• 若资产数量过多，可搭配滚动容器或分页逻辑优化展示

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