在AmChart中設置默認縮放

Question

我想知道在AmCharts中生成amchart圖時是否有設置默認縮放的方法。

下面是代碼：

AmCharts.makeChart("chartdiv", { 
    type: "serial", 
    mouseWheelZoomEnabled: true, 
    fontFamily: "Montserrat", 
    path: "lib/amcharts/", 
    theme: "light", 
    fontSize: 12, 
    categoryField: "category", 
    precision: 0, 
    decimalSeparator: ",", 
    thousandsSeparator: ".", 
    plotAreaFillAlphas: 0.11, 
    plotAreaFillColors: "#61a1e6", 
    zoomOutButtonColor: "#D6E7F9", 
    sequencedAnimation: true, 
    startDuration: 1, 
    startEffect: "easeOutSine", 
    balloonText: "[[title]] [[category]]:[[value]]", 
    urlTarget: "#drill", 
    categoryAxis: { 
    autoRotateAngle: 0, 
    autoWrap: false, 
    gridPosition: "start", 
    axisAlpha: 0.16, 
    color: "#054bff", 
    gridAlpha: 0, 
    title: "" 
    }, 
    chartScrollbar: { 
    "enabled": true 
    }, 
    trendLines: [], 
    graphs: [ 
    [LEGEND] 
    ], 
    guides: [], 
    valueAxes: [{ 
    [STACKED] 
    id: "ValueAxis-1", 
    axisAlpha: 0, 
    axisThickness: 0, 
    color: "#ff4444", 
    fillAlpha: 1, 
    gridAlpha: 0.17, 
    integersOnly: true, 
    title: "" 

    }], 
    allLabels: [], 
    balloon: { 
    fillAlpha: 0.95, 
    shadowAlpha: 0.11, 
    borderThickness: 5, 
    animationDuration: 2, 
    cornerRadius: 5 
    }, 
    legend: { 
    markerBorderThickness: 4, 
    markerSize: 15, 
    markerType: "circle", 
    position: "right", 
    useGraphSettings: true, 
    valueText: "" 
    }, 
    titles: [{ 
     font: "Segoe UI", 
     bold: true, 
     color: "#17baef", 
     id: "Title-1", 
     size: 25, 
     text: "[TITLE]" 
    }, 
    { 
     color: "#7adaf9", 
     id: "Title-2", 
     size: 15, 
     text: "[SUBTITLE1]" 
    }, 
    { 
     color: "#7adaf9", 
     id: "Title-3", 
     size: 15, 
     text: "[SUBTITLE2]" 
    } 
    ], 

    export: { 
    enabled: true, 
    } 
}) 

Answer 1

可以使用監聽器如init來呼籲圖表初始化圖表的縮放方法。例如，使用zoomToIndexes

listeners: [{ 
    event: "init", 
    method: function(e) { 
     e.chart.zoomToIndexes(4, 7); //set default zoom 
    } 
    }] 

演示：

var data = [ 
 
    { 
 
     "category": "cat-1", 
 
     "value3": 4, 
 
     "value2": 2, 
 
     "value1": 6 
 
    }, 
 
    { 
 
     "category": "cat-2", 
 
     "value3": 1, 
 
     "value2": 3, 
 
     "value1": 5 
 
    }, 
 
    { 
 
     "category": "cat-3", 
 
     "value3": 3, 
 
     "value2": 4, 
 
     "value1": 6 
 
    }, 
 
    { 
 
     "category": "cat-4", 
 
     "value3": 1, 
 
     "value2": 3, 
 
     "value1": 3 
 
    }, 
 
    { 
 
     "category": "cat-5", 
 
     "value3": 5, 
 
     "value2": 4, 
 
     "value1": 4 
 
    }, 
 
    { 
 
     "category": "cat-6", 
 
     "value3": 4, 
 
     "value2": 2, 
 
     "value1": 6 
 
    }, 
 
    { 
 
     "category": "cat-7", 
 
     "value3": 4, 
 
     "value2": 2, 
 
     "value1": 4 
 
    }, 
 
    { 
 
     "category": "cat-8", 
 
     "value3": 1, 
 
     "value2": 4, 
 
     "value1": 4 
 
    }, 
 
    { 
 
     "category": "cat-9", 
 
     "value3": 4, 
 
     "value2": 3, 
 
     "value1": 6 
 
    }, 
 
    { 
 
     "category": "cat-10", 
 
     "value3": 3, 
 
     "value2": 3, 
 
     "value1": 3 
 
    } 
 
]; 
 

 
AmCharts.makeChart("chartdiv", { 
 
    type: "serial", 
 
    dataProvider: data, 
 
    mouseWheelZoomEnabled: true, 
 
    fontFamily: "Montserrat", 
 
    //path: "lib/amcharts/", 
 
    theme: "light", 
 
    fontSize: 12, 
 
    categoryField: "category", 
 
    precision: 0, 
 
    decimalSeparator: ",", 
 
    thousandsSeparator: ".", 
 
    plotAreaFillAlphas: 0.11, 
 
    plotAreaFillColors: "#61a1e6", 
 
    zoomOutButtonColor: "#D6E7F9", 
 
    sequencedAnimation: true, 
 
    startDuration: 1, 
 
    startEffect: "easeOutSine", 
 
    balloonText: "[[title]] [[category]]:[[value]]", 
 
    urlTarget: "#drill", 
 
    categoryAxis: { 
 
    autoRotateAngle: 0, 
 
    autoWrap: false, 
 
    gridPosition: "start", 
 
    axisAlpha: 0.16, 
 
    color: "#054bff", 
 
    gridAlpha: 0, 
 
    title: "" 
 
    }, 
 
    chartScrollbar: { 
 
    "enabled": true 
 
    }, 
 
    trendLines: [], 
 
    graphs: [{ 
 
     title: "Graph 1", 
 
     type: "column", 
 
     fillAlphas: .8, 
 
     valueField: "value1" 
 
    }, 
 
    { 
 
     title: "Graph 2", 
 
     type: "column", 
 
     fillAlphas: .8, 
 
     valueField: "value2" 
 
    }, 
 
    { 
 
     title: "Graph 3", 
 
     type: "column", 
 
     fillAlphas: .8, 
 
     valueField: "value3" 
 
    } 
 
    ], 
 
    guides: [], 
 
    valueAxes: [{ 
 
    stackType: "stacked", 
 
    id: "ValueAxis-1", 
 
    axisAlpha: 0, 
 
    axisThickness: 0, 
 
    color: "#ff4444", 
 
    fillAlpha: 1, 
 
    gridAlpha: 0.17, 
 
    integersOnly: true, 
 
    title: "" 
 

 
    }], 
 
    allLabels: [], 
 
    balloon: { 
 
    fillAlpha: 0.95, 
 
    shadowAlpha: 0.11, 
 
    borderThickness: 5, 
 
    animationDuration: 2, 
 
    cornerRadius: 5 
 
    }, 
 
    legend: { 
 
    markerBorderThickness: 4, 
 
    markerSize: 15, 
 
    markerType: "circle", 
 
    position: "right", 
 
    useGraphSettings: true, 
 
    valueText: "" 
 
    }, 
 
    titles: [{ 
 
     font: "Segoe UI", 
 
     bold: true, 
 
     color: "#17baef", 
 
     id: "Title-1", 
 
     size: 25, 
 
     text: "[TITLE]" 
 
    }, 
 
    { 
 
     color: "#7adaf9", 
 
     id: "Title-2", 
 
     size: 15, 
 
     text: "[SUBTITLE1]" 
 
    }, 
 
    { 
 
     color: "#7adaf9", 
 
     id: "Title-3", 
 
     size: 15, 
 
     text: "[SUBTITLE2]" 
 
    } 
 
    ], 
 

 
    export: { 
 
    enabled: true, 
 
    }, 
 
    listeners: [{ 
 
    event: "init", 
 
    method: function(e) { 
 
     e.chart.zoomToIndexes(4, 7); //set default zoom 
 
    } 
 
    }] 
 
});

<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script> 
 
<div id="chartdiv" style="width: 100%; height: 300px;"></div>