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

Question

我有两个不同的图表彼此相邻。第一个图表有一个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

Answer 1

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

1. 定义第一个图350的高度，以及JS代码
中第二个图的325
2. 修改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.

Answer 2

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

JSFiddle

＆＃13;

＆＃13;

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",
  }],
});

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;