如何将自定义 y 轴标签添加到 amcharts 中的序列图？答案

【问题标题】：How can I add custom y axis labels to serial chart in amcharts?如何将自定义 y 轴标签添加到 amcharts 中的序列图？
【发布时间】：2017-01-28 15:02:33
【问题描述】：

我基本上是在制作这张图表的变体：https://www.amcharts.com/demos/reversed-value-axis/

浏览文档，除了创建“指南”之外，我找不到添加我自己的自定义 y 轴步骤和标签的方法。但是 y 值和标签仍然存在，即使我隐藏它们，我添加的“指南”标签的位置也是在值的中间，而不是在线条所在的位置。

有没有办法给我的序列图自定义 y 值或将指南标签放在其值所在行的最顶部？

【问题讨论】：

标签： charts amcharts

【解决方案1】：

如果您在特定点需要自定义标签或需要创建自己的步骤，那么指南就是您的最佳选择。

要使指南标签显示在指南线的顶部，请将指南的 inside 属性设置为 true。这会将标签带入图表区域并位于行的顶部。如果您希望标签出现在图表区域之外，请将labelOffset 设置为负值。

"valueAxes": [{
  // ...
  "guides": [{
    "value": 1.5,
    "lineAlpha": 1,
    "label": "1.5",
    "inside": true,
    "labelOffset": -35
  }]
}]

这是您链接到的图表的修改演示，说明了这一点：

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "legend": {
    "useGraphSettings": true
  },
  "dataProvider": [{
    "year": 1930,
    "italy": 1,
    "germany": 5,
    "uk": 3
  }, {
    "year": 1934,
    "italy": 1,
    "germany": 2,
    "uk": 6
  }, {
    "year": 1938,
    "italy": 2,
    "germany": 3,
    "uk": 1
  }, {
    "year": 1950,
    "italy": 3,
    "germany": 4,
    "uk": 1
  }, {
    "year": 1954,
    "italy": 5,
    "germany": 1,
    "uk": 2
  }, {
    "year": 1958,
    "italy": 3,
    "germany": 2,
    "uk": 1
  }, {
    "year": 1962,
    "italy": 1,
    "germany": 2,
    "uk": 3
  }, {
    "year": 1966,
    "italy": 2,
    "germany": 1,
    "uk": 5
  }, {
    "year": 1970,
    "italy": 3,
    "germany": 5,
    "uk": 2
  }, {
    "year": 1974,
    "italy": 4,
    "germany": 3,
    "uk": 6
  }, {
    "year": 1978,
    "italy": 1,
    "germany": 2,
    "uk": 4
  }],
  "valueAxes": [{
    "integersOnly": true,
    "maximum": 6,
    "minimum": 1,
    "reversed": true,
    "axisAlpha": 0,
    "dashLength": 5,
    "autoGridCount": false,
    "gridCount": 10,
    "position": "left",
    "title": "Place taken",
    "guides": [{
      "value": 1.5,
      "lineAlpha": 1,
      "label": "1.5",
      "inside": true,
      "labelOffset": -35
    }]
  }],
  "startDuration": 0.5,
  "graphs": [{
    "balloonText": "place taken by Italy in [[category]]: [[value]]",
    "bullet": "round",
    "hidden": true,
    "title": "Italy",
    "valueField": "italy",
    "fillAlphas": 0
  }, {
    "balloonText": "place taken by Germany in [[category]]: [[value]]",
    "bullet": "round",
    "title": "Germany",
    "valueField": "germany",
    "fillAlphas": 0
  }, {
    "balloonText": "place taken by UK in [[category]]: [[value]]",
    "bullet": "round",
    "title": "United Kingdom",
    "valueField": "uk",
    "fillAlphas": 0
  }],
  "chartCursor": {
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "year",
  "categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0,
    "fillAlpha": 0.05,
    "fillColor": "#000000",
    "gridAlpha": 0,
    "position": "top"
  },
  "export": {
    "enabled": true,
    "position": "bottom-right"
  }
});

<script src="https://www.amcharts.com/lib/3/amcharts.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>
<div id="chartdiv" style="width: 100%; height: 350px;"></div>

【讨论】：

完美！我可以将其与隐藏标签选项结合使用并更改线条的不透明度，以便仅显示指南。谢谢！