代码之家 › 专栏 › 技术社区 › CDevMort

amCharts zoomtodates未加载

amcharts

CDevMort · 技术社区 · 7 年前

有史以来第一个问题。试图让zoomToDates在我正在开发的图表中工作。我尝试了其他我能找到的解决其他人问题的方法,但没有任何效果。所以不用再多说了。。。

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 回复 | 直到 7 年前

xorspark 7 年前

看起来您正在使用AmCharts Wordpress插件 $CHART idenfitier。主要问题是 AmCharts.makeChart call-addListener代码位于配置中,而它应该完全位于调用之外。您也没有引用实际的图表实例,也没有正确使用事件参数,例如:

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,因为您有时会遇到计时问题,例如 rendered 可以在调用addListener之前触发:

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));
    }
  }]
});