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

Question

I am using Amcharts v3, xy chart type, (This is the example I am using https://www.amcharts.com/demos-v3/scatter-chart-v3/ ) with chartScrollbar for both x and y axis. How do I set the values of min and max range of Scrollbar (for both x and y) so that when i load the chart, it shows at a certain zoom level by default.

I added two text boxes in html code to input values of x axis. and a function in ts file to call an api function with start end end values. but it does not trigger anything on the chart.

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

and in TS file

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

I expect the chartScrollbar to take the values from the text boxes and zoom to that level.

Answer 1

zoomToIndexes only works on categoryAxis objects, which a v3 XY chart does not have. You need to call zoomToValues on your chart's individual value axes, eg

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

Demo:

 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>