amcharts4 ColumnSeries 固定宽度答案

【问题标题】：amcharts4 ColumnSeries fixed widthamcharts4 ColumnSeries 固定宽度
【发布时间】：2019-01-17 21:05:36
【问题描述】：

我正在使用 AmCharts4 构建甘特图，基于此演示： https://www.amcharts.com/demos/gantt-chart/

它基本上是一个倒置条形图...我的问题是我在甘特图中有很多任务，所以水平条被挤压，我不得不在垂直轴上使用缩放。我想在垂直轴上有一个固定高度的条和一个 html 滚动条，而不需要缩放或平移。你有什么想法吗？

谢谢！

【问题讨论】：

我不确定我是否理解这个问题......您想要一个滚动条，但您不希望它在用户滚动时平移？那么它应该做什么呢？
我试图解释得更好，重点是让绿色条具有固定高度（比如 50px），我真正不想要的是缩放/缩放，如您在图片是默认视图。我更喜欢有一个具有固定条高度的原生 html 滚动条，但如果不可能，amcharts 的滚动条很好，只用于平移。
看标题，你的意思是甘特图行/条的“固定高度”吗？
这取决于观点:)你是对的，它是甘特图行的固定高度，但实际上是图表列的固定宽度，因为我使用 amcharts ColumnSeries

标签： amcharts

【解决方案1】：

我认为，使用普通 amcharts 是不可能的，因为图表是在您提供的区域中呈现的。我认为可以根据数据的大小动态设置图表的高度<div>。

图表应该重新渲染以适应新的高度。

const data = [{
    // your data
  }, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}];

// chart initialisation, etc.

// after setting data
document.getElementById('chart').style.height = `${data.length * 50}px`;

.container {
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
}

#chart {
  width: 100%;
  min-height: 200px;
  background-color: red;
}

<div class="container">
  <div id="chart"></div>
</div>

【讨论】：

好吧，这将是一个技巧。我愿意使用 amcharts 滚动条，但我想禁用缩放并只保持平移，你认为可能吗？无论如何，我认为 amcharts 可能是甘特图的不错选择......
我不知道该解决方案是否适用于 amcharts。可以通过设置cursor.behavior (docs) 来禁用缩放。如果您想禁用可轮式缩放（默认情况下在某些图表上启用），您可以使用chart.wheelable (docs)。希望对您有所帮助。