如何对齐 2 个不同的图表？答案

【问题标题】：How to align 2 different charts?如何对齐 2 个不同的图表？
【发布时间】：2017-07-15 04:08:25
【问题描述】：

我有 2 个彼此相邻的不同图表。第一个图表有 x 轴，第二个图表没有：

如何让它们的高度相同？

这是所需的输出：

这是一些示例代码，我是如何创建图表的：

var chart = AmCharts.makeChart("mydia", {
  "type": "xy",
  "dataProvider": data,
  "valueAxes": [{
    "id": "v1",
    "position": "left"
  }, {
    "id": "v2",
    "position": "right"
  }, {
    "id": "v3",
    "position": "bottom",
    "title": "Some text"
  }],
  "graphs": [{
    "balloonText": "x:[[x]] y:[[y]]",
    "xField": "ax",
    "yField": "ay",
  }, {
    "balloonText": "x:[[x]] y:[[y]]",
    "xField": "bx",
    "yField": "by",
  }],
});

Here is a fiddle.

【问题讨论】：

您可以在准备好的文档上使用jQuery来检查两个图表的高度并将它们的高度设置为最高的吗？没有写在答案中，因为据我所知，您将能够管理它。 stackoverflow.com/questions/11688250/… 粗略回答。

标签： javascript jquery html css amcharts

【解决方案1】：

您可以将addClassNames 参数设置为true 以在图表上启用类名。然后，您可以使用 css 隐藏轴标签。

JSFiddle

data = [{
  "ax": "1",
  "ay": "2"
}, {
  "ax": "3",
  "ay": "4"
}, {
  "ax": "5",
  "ay": "6"
}];

var chart = AmCharts.makeChart("mydia", {
  "type": "xy",
  "dataProvider": data,
  "valueAxes": [{
    "id": "v1",
    "position": "left"
  }, {
    "id": "v2",
    "position": "right"
  }],
  "graphs": [{
    "balloonText": "x:[[x]] y:[[y]]",
    "xField": "ax",
    "yField": "ay",
  }, {
    "balloonText": "x:[[x]] y:[[y]]",
    "xField": "bx",
    "yField": "by",
  }],
});

var chart = AmCharts.makeChart("mydia2", {
	"addClassNames": true,
  "type": "xy",
  "dataProvider": data,
  "valueAxes": [{
    "id": "v1",
    "position": "left"
  }, {
    "id": "v2",
    "position": "right"
  }, {
    "id": "v3",
    "position": "bottom",
  }],
  "graphs": [{
    "xField": "ax",
    "yField": "ay",
  }, {
    "xField": "bx",
    "yField": "by",
  }],
});

.diagram {
  width: 45%;
  height: 300px;
  display: inline-block;
}

.value-axis-v3 .amcharts-axis-label {
  visibility: hidden;
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/xy.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>

<div id="mydia" class="diagram"></div>
<div id="mydia2" class="diagram"></div>

【讨论】：

【解决方案2】：

问题是由于第二张图缺少底部标签造成的。要使它们具有相同的高度，您可以执行以下操作：

在 JS 代码中定义第一个图 350 和第二个图 325 的高度
修改 CSS 以将图形垂直对齐到顶部

JS 示例：

var chart = AmCharts.makeChart("mydia", {
  "type": "xy",
  "dataProvider": data,
  "height": 350,
  "valueAxes": [{
  ...rest of the code

CSS：

.diagram {
   width: 45%;
   vertical-align: text-top;
   display: inline-block;
}

Fixed fiddle here.

【讨论】：