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

Question

我有 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.

Answer 1

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

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

Answer 2

您可以将 addClassNames 参数设置为 true 以在图表上启用 class 名称。然后，您可以使用 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 个不同的图表？

How to align 2 different charts?

html

javascript

css

jquery

amcharts