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>

在AmChart中设置默认缩放

1 个答案: