amCharts zoomtodates没有加载

时间:2018-02-07 00:03:11

标签: amcharts

堆栈上的第一个问题。试图让zoomToDates在amCharts中工作我正在开发中。我已经尝试过我能找到的其他解决方案'问题,没有任何效果。所以没有进一步的... ...

Resources:
//www.amcharts.com/lib/3/amcharts.js
//www.amcharts.com/lib/3/serial.js
//www.amcharts.com/lib/3/amstock.js
//www.amcharts.com/lib/3/themes/black.js
//www.amcharts.com/lib/3/plugins/export/export.min.js
//www.amcharts.com/lib/3/plugins/export/export.css
//www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js

HTML:
<div id="$CHART$" style="width: 100%; height: 450px;"></div>

JS:
AmCharts.makeChart( "$CHART$", {
    "type": "stock",
    "theme": "black",
    "categoryAxesSettings.equalSpacing": true,
    "dataDateFormat":"YYYY-MM-DD",
    "valueAxes": [ {
      "position": "left",
    } ],

    "dataSets": [ {
            "title": "Bond",
            "fieldMappings": [ {
                "fromField": "open",
                "toField": "open"
            }, {
                "fromField": "high",
                "toField": "high"
            }, {
                "fromField": "low",
                "toField": "low"
            }, {
                "fromField": "close",
                "toField": "close"
            } ],
            "dataLoader": {
                    "url": "removed for stackoverflow post"
            },
            "categoryField": "date"
        },
    ],

    panels: [ {
            title: "Security",
            percentHeight: 100,
            stockGraphs: [ {
                "valueField": "security",
                "type": "candlestick",
                "showBalloon": true,
                                "proCandlesticks": true,
                        "balloonText": "Open:<b>[[open]]</b><br>Low:<b>[[low]]</b><br>High:<b>[[high]]</b><br>Close:<b>[[close]]</b><br>",
                        "closeField": "close",
                        "fillColors": "#7f8da9",
                        "highField": "high",
                        "lineColor": "#7f8da9",
                        "lineAlpha": 1,
                        "lowField": "low",
                        "fillAlphas": 0.9,
                        "negativeFillColors": "#db4c3c",
                        "negativeLineColor": "#db4c3c",
                        "openField": "open",
            } ],

            stockLegend: {
                periodValueTextRegular: "[[security.close]]"
            }
        }
    ],
    chartScrollbarSettings: {
        graph: "g1"
    },
    chartCursorSettings: {
        valueBalloonsEnabled: true
    },


chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
    event.chart.zoomToDates(new Date(2017, 10, 22), new Date(2017, 10, 25));
}
});

任何帮助都会非常感激。我已经在这方面工作了很长时间才承认。感谢。

1 个答案:

答案 0 :(得分:0)

看起来你正在使用$CHART idenfitier的AmCharts Wordpress插件。主要问题是AmCharts.makeChart调用的语法 - 当addListener代码完全在调用之外时,你的addListener代码在config中。您也没有提到实际的图表实例,也没有正确使用事件参数,例如:

var $CHART$ = AmCharts.makeChart("$CHART$", {
  // ...
});

$CHART$.addListener("rendered", zoomChart);

function zoomChart(event) {
    event.chart.zoom(new Date(2017, 10, 22), new Date(2017, 10, 25));
};

您还必须使用zoom作为库存图表,因为zoomToDates无效。

理想情况下,您应该使用listeners数组而不是addListener,因为在调用addListener之前,rendered之类的事件可能会触发计时问题:

AmCharts.makeChart("$CHART$", {
  // all of your other config and data omitted
  "listeners": [{
    "event": "rendered",
    "method": function(event) {
      event.chart.zoom(new Date(2017, 10, 22), new Date(2017, 10, 25));
    }
  }]
});