如何在AmChart中上下展示日K与周K蜡烛图并调整周K水平占比

以下两种方案都可以满足你周K占据更多水平空间的需求，不需要使用全局scale属性避免XY轴同时缩放：

方案一：单图表内调整周轴配置（推荐，保留时间联动能力） #

你当前用的单图表双X轴结构可以直接修改配置实现需求，DateAxis的独立缩放接口只会作用于水平轴，不会影响纵轴展示，同时可以调整周K的宽度让展示更饱满：

1. 给周线日期轴添加独立缩放配置，压缩周K之间的空白
2. 调整周K蜡烛的宽度占比，避免展示过窄
3. 可选择性隐藏周轴的重复日期标签，让界面更简洁

关键修改代码如下，直接加在你现有dateAxis2配置的后面即可：

// 仅对周线X轴做水平缩放，不影响纵轴
dateAxis2.zoom({
  start: 0,
  end: 1
});
// 调整周K蜡烛宽度为单元格的80%，可根据展示效果自定义
series2.columns.template.width = am4core.percent(80);
// 可选：隐藏周轴的日期标签，避免和上方日线轴标签重复
dateAxis2.labels.template.disabled = true;

方案二：拆分独立双图表（最高自由度） #

如果不需要两个K线严格对齐时间刻度，希望周线完全占满可用水平空间，可以拆分为两个独立的图表容器：

1. HTML部分拆分两个独立的图表节点，上下排列

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://www.amcharts.com/lib/4/core.js"></script>
<script src="http://www.amcharts.com/lib/4/charts.js"></script>
</head>
<body>
  <div id="chartdiv-day" style="width: 100%; height: 300px; background-color: #FFFFFF;"></div>
  <div id="chartdiv-week" style="width: 100%; height: 300px; background-color: #FFFFFF; margin-top: 20px;"></div>
</body>
</html>

2. JS部分分别初始化两个图表实例，各自配置对应的轴、系列和数据即可，两个图表的水平缩放、宽度完全独立，不会互相影响。

额外优化建议 #

你当前的周线数据是直接和日线存在同一条数据中，建议提前把日线数据按周聚合后再传入周线系列，避免AmCharts自动聚合出现计算误差，展示精度更高。

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