Question

我想在页面上绘制图表，代码摘自示例https://www.amcharts.com/demos/date-based-data/。如果您使用一个图形-一切正常，如果发生更多错误，我不知道如何解决它，请帮忙。

据我所知，该错误是在调用zoomToIndexes方法后出现的，但我不明白这是怎么回事

这是另一个示例，我从演示中复制并尝试制作两个图表： https://codepen.io/VyacheslavY/pen/xaqPeG

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
    if (request.todo == "notification"){
        var notifOptions = {
            type: 'basic',
            iconUrl: 'icon48.png',
            title: request.ttl,
            message: request.msg
        };
        chrome.notifications.create(request.stamp, notifOptions);
    }
});

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

Answer 1

几件事...

首先，两个图表都使用相同的options对象。

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>

zoomToIndexes amcharts方法抛出错误

1 个答案: