jquery - zoomToIndexes amcharts 方法抛出错误
问题描述
我想在页面上制作图表，代码取自示例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>解决方案
几件事...
首先，您对两个图表使用相同的选项对象。
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>推荐阅读
- javascript - 更新状态 onClick 事件中的每个项目
- three.js - 如何消除立方体中的一个维度
- c++ - 使用链表实现堆栈时出错
- marklogic - MarkLogic Corb 如何配置以启用 Web UI
- python - 将视频从 python 服务器流式传输到 Web 客户端
- ios - 在自定义单元格中获取 tableView rowHeight（以编程方式）
- php - 不同名称路径中的 Laravel 7 ReflectionException
- javascript - 开玩笑的单元测试使用关于“导入”的解构分配
- thunderbird - Thunderbird 68 不会从 ~/.thunderbird 文件夹导入旧帐户
- algorithm - 计算调查中下一个最佳问题的算法