Question

我基本上是对此图表进行修改：https://www.amcharts.com/demos/reversed-value-axis/

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

有没有办法让我的序列图自定义y值，或者将引导标签放在它们的值行的最顶部？

Answer 1

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

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: