如何在 XY 图表类型中设置 x 和 y 轴的范围值最小值/最大值答案

【问题标题】：How to set range values min/max for x and y axis in XY chart type如何在 XY 图表类型中设置 x 和 y 轴的范围值最小值/最大值
【发布时间】：2019-07-27 06:35:31
【问题描述】：

我正在使用 Amcharts v3，xy 图表类型，（这是我使用 https://www.amcharts.com/demos-v3/scatter-chart-v3/ 的示例）和 chartScrollbar 用于 x 和 y 轴。如何设置滚动条的最小和最大范围的值（对于 x 和 y），以便当我加载图表时，它默认显示在某个缩放级别。

我在 html 代码中添加了两个文本框来输入 x 轴的值。以及 ts 文件中的一个函数，用于调用具有起始结束值的 api 函数。但它不会触发图表上的任何内容。

<input type="number" [(ngModel)]="startIndexa" name="startIndexa">
<input type="number" [(ngModel)]="endIndex" name="endIndex">
<button class="btn" type="submit" (click)="zoomXYChart()">Soom</button>

在 TS 文件中

    zoomXYChart() {       
        this.chart.zoomToIndexes(this.startIndex, this.endIndex)       
    }

我希望 chartScrollbar 从文本框中获取值并缩放到该级别。

【问题讨论】：

标签： javascript angular amcharts

【解决方案1】：

zoomToIndexes 仅适用于 categoryAxis 对象，而 v3 XY 图表没有。您需要在图表的各个值轴上调用 zoomToValues，例如

//assuming index 0 is your X axis and index 1 is your Y axis
chart.valueAxes[0].zoomToValues(xminvalue, xmaxvalue)
chart.valueAxes[1].zoomToValues(yminvalue, ymaxvalue)

演示：

var chart = AmCharts.makeChart("chartdiv", {
  "type": "xy",
  "theme": "none",
  "marginRight": 80,
  "marginTop": 17,
  "dataProvider": [{
    "y": 10,
    "x": 14,
    "value": 59,
    "y2": -5,
    "x2": 0,
    "value2": 44
  }, {
    "y": 5,
    "x": 3,
    "value": 50,
    "y2": -15,
    "x2": -8,
    "value2": 12
  }, {
    "y": -10,
    "x": -3,
    "value": 19,
    "y2": -4,
    "x2": 6,
    "value2": 35
  }, {
    "y": -6,
    "x": 5,
    "value": 65,
    "y2": -5,
    "x2": -6,
    "value2": 168
  }, {
    "y": 15,
    "x": -4,
    "value": 92,
    "y2": -10,
    "x2": -8,
    "value2": 102
  }, {
    "y": 13,
    "x": 1,
    "value": 8,
    "y2": -2,
    "x2": -3,
    "value2": 41
  }, {
    "y": 1,
    "x": 6,
    "value": 35,
    "y2": 0,
    "x2": 1,
    "value2": 16
  }],
  "valueAxes": [{
    "position": "bottom",
    "axisAlpha": 0
  }, {
    "minMaxMultiplier": 1.2,
    "position": "left"
  }],
  "startDuration": 1.5,
  "graphs": [{
    "valueField": "value",
    "bullet": "round",
    "xField": "x",
    "yField": "y"

  }, {
    "valueField": "value2",
    "bullet": "round",
    "xField": "x2",
    "yField": "y2"

  }],
  "marginLeft": 46,
  "marginBottom": 35,
  "chartScrollbar": {},
  "chartCursor": {},
  "listeners": [{
    "event": "init",
    "method": function(e) {
      e.chart.valueAxes[0].zoomToValues(4, 15);
      e.chart.valueAxes[1].zoomToValues(0, 11);
    }
  }]
});

#chartdiv {
  width: 100%;
  height: 500px;
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/xy.js"></script>
<div id="chartdiv"></div>

【讨论】：