Метод zoomToIndexes amcharts выдает ошибку - PullRequest
Новая
       8

Метод zoomToIndexes amcharts выдает ошибку

0 голосов
/ 02 сентября 2018

Хочу сделать диаграммы на странице, код взят из примера https://www.amcharts.com/demos/date-based-data/. Если вы используете один график - все работает, если возникает больше ошибок, не могу разобраться, как это исправить, пожалуйста помощь.

Ошибка, как я понимаю, появляется после вызова метода zoomToIndexes, но я не понимаю, в чем дело

Вот еще один пример, где я скопировал из демо-версии и попытался сделать две диаграммы: https://codepen.io/VyacheslavY/pen/xaqPeG

var chartsOptions = new Object();
chartsOptions = {
    "type": "serial",
    "theme": "light",
    "marginRight": 40,
    "marginLeft": 40,
    "autoMarginOffset": 20,
    "mouseWheelZoomEnabled": true,
    "dataDateFormat": "YYYY-MM-DD",
    "valueAxes": [{
        "id": "v1",
        "minimum": 0,
        "maximum": 100,
        "autoGridCount": false,
        "axisAlpha": 0,
        "position": "left",
        "ignoreAxisWidth": true
    }],
    "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": "value",
        "balloonText": "<span style='font-size:18px;'>[[value]]</span>"
    }],
    "chartScrollbar": {
        "graph": "g1",
        "oppositeAxis": false,
        "offset": 30,
        "scrollbarHeight": 80,
        "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
    },
    "valueScrollbar": {
        "oppositeAxis": false,
        "offset": 50,
        "scrollbarHeight": 10
    },
    "categoryField": "date",
    "categoryAxis": {
        "parseDates": true,
        "dashLength": 1,
        "minorGridEnabled": true
    },
    "export": {
        "enabled": true
    }
}

var charts = []
$('.amchart').each(function (i) {
    var newChartoptions = chartsOptions;
    newChartoptions["dataProvider"] = getData(5, 100)
    charts[i] = AmCharts.makeChart($(this).attr("id"), newChartoptions);
    charts[i].addListener("rendered", zoomChart(charts[i]));
    zoomChart(charts[i]);
})



function zoomChart(chart) {
    chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}


function getData(max, min) {
    var Data = [];
    var date1 = new Date(2017, 6, 27);
    var date2 = new Date();
    var timeDiff = Math.abs(date2.getTime() - date1.getTime());
    var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
    while (date1 <= date2) {
        var mm = ((date1.getMonth() + 1) >= 10) ? (date1.getMonth() + 1) : '0' + (date1.getMonth() + 1);
        var dd = ((date1.getDate()) >= 10) ? (date1.getDate()) : '0' + (date1.getDate());
        var yyyy = date1.getFullYear();
        var date = yyyy + "-" + mm + "-" + dd; //yyyy-mm-dd
  
        Data.push({
            "date": date,
            "value": (Math.random() * (max - min) + min).toFixed()
        })
        date1 = new Date(date1.setDate(date1.getDate() + 1));
        
    }
    return Data;
}
.amchart {
width: 100%;
height: 500px;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

<div id="uptime" class="amchart"></div>
<div id="power" class="amchart"></div>

1 Ответ

0 голосов
/ 02 сентября 2018

пара вещей ...

сначала вы используете один и тот же объект параметров для обеих диаграмм. 

var chartsOptions = new Object();
chartsOptions = {  // <-- this overrides the line above and just makes one object
    ...

вместо этого поместите параметры в функцию и верните их,
это назначит различный объект каждому графику,
см getOptions ниже ...

далее при назначении обработчика события необходимо передать ссылку на функцию, 

charts[i].addListener("rendered", function () {zoomChart(charts[i])});

здесь вы передаете результат функции ... 

charts[i].addListener("rendered", zoomChart(charts[i]));

см. Следующий рабочий фрагмент ... 

var charts = []
$('.amchart').each(function (i) {
    var newChartoptions = getOptions();
    newChartoptions["dataProvider"] = getData(5, 100)
    charts[i] = AmCharts.makeChart($(this).attr("id"), newChartoptions);
    charts[i].addListener("rendered", function () {zoomChart(charts[i])});
    zoomChart(charts[i]);
})



function zoomChart(chart) {
    chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}

function getOptions() {
    return {
        "type": "serial",
        "theme": "light",
        "marginRight": 40,
        "marginLeft": 40,
        "autoMarginOffset": 20,
        "mouseWheelZoomEnabled": true,
        "dataDateFormat": "YYYY-MM-DD",
        "valueAxes": [{
            "id": "v1",
            "minimum": 0,
            "maximum": 100,
            "autoGridCount": false,
            "axisAlpha": 0,
            "position": "left",
            "ignoreAxisWidth": true
        }],
        "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": "value",
            "balloonText": "<span style='font-size:18px;'>[[value]]</span>"
        }],
        "chartScrollbar": {
            "graph": "g1",
            "oppositeAxis": false,
            "offset": 30,
            "scrollbarHeight": 80,
            "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
        },
        "valueScrollbar": {
            "oppositeAxis": false,
            "offset": 50,
            "scrollbarHeight": 10
        },
        "categoryField": "date",
        "categoryAxis": {
            "parseDates": true,
            "dashLength": 1,
            "minorGridEnabled": true
        },
        "export": {
            "enabled": true
        }
    };
}

function getData(max, min) {
    var Data = [];
    var date1 = new Date(2017, 6, 27);
    var date2 = new Date();
    var timeDiff = Math.abs(date2.getTime() - date1.getTime());
    var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
    while (date1 <= date2) {
        var mm = ((date1.getMonth() + 1) >= 10) ? (date1.getMonth() + 1) : '0' + (date1.getMonth() + 1);
        var dd = ((date1.getDate()) >= 10) ? (date1.getDate()) : '0' + (date1.getDate());
        var yyyy = date1.getFullYear();
        var date = yyyy + "-" + mm + "-" + dd; //yyyy-mm-dd

        Data.push({
            "date": date,
            "value": (Math.random() * (max - min) + min).toFixed()
        })
        date1 = new Date(date1.setDate(date1.getDate() + 1));

    }
    return Data;
}
.amchart {
width: 100%;
height: 500px;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

<div id="uptime" class="amchart"></div>
<div id="power" class="amchart"></div>
...