chartScrollbar AmCharts

时间:2016-12-28 14:59:05

标签: scrollbar amcharts

我在AmCharts中有一个图表,我想在图表的顶部开始不在底部的滚动。

 var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "rotate":true,
  "maxSelectedSeries": 4,
  "mouseWheelScrollEnabled": true,
  "marginRight": 70,
  "dataProvider": [{
    "country": "USA",
    "visits": 3025,
    "color": "#FF0F00"
  }, {
    "country": "China",
    "visits": 1882,
    "color": "#FF6600"
  }, {
    "country": "Japan",
    "visits": 1809,
    "color": "#FF9E01"
  }, {
    "country": "Germany",
    "visits": 1322,
    "color": "#FCD202"
  }, {
    "country": "UK",
    "visits": 1122,
    "color": "#F8FF01"
  }, {
    "country": "France",
    "visits": 1114,
    "color": "#B0DE09"
  }, {
    "country": "India",
    "visits": 984,
    "color": "#04D215"
  }, {
    "country": "Spain",
    "visits": 711,
    "color": "#0D8ECF"
  }, {
    "country": "Netherlands",
    "visits": 665,
    "color": "#0D52D1"
  }, {
    "country": "Russia",
    "visits": 580,
    "color": "#2A0CD0"
  }, {
    "country": "South Korea",
    "visits": 443,
    "color": "#8A0CCF"
  }, {
    "country": "Canada",
    "visits": 441,
    "color": "#CD0D74"
  }],
  "valueAxes": [{
    "axisAlpha": 0,
    "position": "left",
    "title": "Visitors from country"
  }],
  "startDuration": 1,
  "graphs": [{
    "balloonText": "<b>[[category]]: [[value]]</b>",
    "fillColorsField": "color",
    "fillAlphas": 0.9,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits"
  }],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "country",
  "categoryAxis": {
    "gridPosition": "start",
    "labelRotation": 45
  },
  "chartScrollbar": {
    //"graph": "Not set",
    "backgroundColor":"#2f373e",
    "graphType": "smoothedLine",
    "resizeEnabled": false,
    "scrollbarHeight": 15,
    "scrollDuration": 0,
    "updateOnReleaseOnly": true
  }

});

jsfiddle

正如你在jsfiddle中看到的那样,滚动条从图形的底部开始,我必须滚动到图形的顶部才能看到第一个结果。

1 个答案:

答案 0 :(得分:2)

似乎图表缩放到最后因为设置了maxSelectedSeries属性 - 图表在初始化时缩放到最后的~x系列。您可以通过添加init侦听器来解决此问题,该侦听器通过调用zoomToIndexes在启动时将缩放设置为所需位置:

var chart = AmCharts.makeChart("chartdiv", {
  // ...
  "listeners": [{
    "event": "init",
    "method": function(e) {
      e.chart.zoomToIndexes(0, 4);
    }
  }]
});

Updated fiddle