Question

我有几个amCharts图表，我正在尝试设置默认缩放。在使用dataProvider时，我可以使用我的代码正常工作，例如：http://jsfiddle.net/f2s32ojL/7/

当我尝试在我自己的网站上执行此操作但使用数据库中的dataLoader时，它不起作用。它只是给我一个整个数据集的默认缩放，而不是我想要使用的时间范围。这是代码：

var chart = AmCharts.makeChart("chartdivFC", {
"type": "serial",
"dataLoader": {
    "url": "includes/fc-chart-data2.php",
    "format": "json"
 },
"theme": "light",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled":true,
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"valueAxes": [{
    "id": "v1",
    "axisAlpha": 0,
    "position": "left",
    "ignoreAxisWidth":true,
    "guides": [{
      "value": 0,
      "toValue": "<?=$min_FC?>",
      "fillColor": "#CC0000",
      "inside": true,
      "fillAlpha": 0.1,
      "lineAlpha": 0
    }]
}],
"balloon": {
    "borderThickness": 1,
    "shadowAlpha": 0
},
"graphs": [{
    "id": "g1",
    "balloon":{
      "drop":true,
      "adjustBorderColor":false,
      "color":"#ffffff"
    },
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "title": "red line",
    "useLineColorForBulletBorder": true,
    "valueField": "FC",
    "balloonText": "<span style='font-size:18px;'>[[FC]]</span>"
}],
"chartScrollbar": {
    "graph": "g1",
    "oppositeAxis":false,
    "offset":30,
    "scrollbarHeight": 50,
    "backgroundAlpha": 0,
    "selectedBackgroundAlpha": 0.1,
    "selectedBackgroundColor": "#888888",
    "graphFillAlpha": 0,
    "graphLineAlpha": 0.5,
    "selectedGraphFillAlpha": 0,
    "selectedGraphLineAlpha": 1,
    "autoGridCount":true,
    "color":"#AAAAAA"
},
"chartCursor": {
    "pan": true,
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true,
    "cursorAlpha":1,
    "cursorColor":"#258cbb",
    "limitToGraph":"g1",
    "valueLineAlpha":0.2,
    "valueZoomable":true
},
"categoryField": "date",
"categoryAxis": {
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true
},
"export": {
    "enabled": true
},
"listeners": [{
"event": "rendered",
"method": function(event) {
    event.chart.zoom(new Date(2017, 10, 1), new Date(2017, 11, 1));
}

}] }）;

dataLoader的json如下所示：

[{“date”：“2016-08-04 14:18:49”，“FC”：“9”}，{“date”：“2016-08-04 14:44:30”，“ FC“：”9“}，{”date“：”2016-08-04 20:33:11“，”FC“：”7.5“}，{.....

有没有人有任何想法如何使这项工作？

谢谢。

Answer 1

它不起作用的原因是因为rendered在dataLoader完成加载数据之前触发;呈现图表区域时会rendered触发，无论数据中是否存在数据，因此当您看到弹出的“正在加载数据”消息时，该事件已经被触发。

您有两种选择：

1）在加载数据后使用complete callback in the dataLoader调用缩放方法。请注意，您必须将缩放包装在setTimeout调用中：

  "dataLoader": {
    "url": "includes/fc-chart-data2.php",
    "complete": function(chart) {
      setTimeout(function() { 
        chart.zoom(new Date(2017, 10, 1), new Date(2017, 11, 1))
      });      
    }
  },

2）改为使用dataUpdated event。请注意，每次拨打validateData时都会触发，这可能不太理想。

"listeners": [{
  "event": "dataUpdated",
  "method": function(event) {
    event.chart.zoom(new Date(2017, 10, 1), new Date(2017, 11, 1));
  }
}]

AmCharts使用dataLoader放大渲染

1 个答案: