如何解决如何在移动或触摸设备上使用amcharts 3单击图例
我正在使用Amcharts版本3,并在移动视图和Web视图上绘制一些图形,但无法在移动视图中单击图例。
我也尝试了事件监听器,但仍然只能在Web视图中单击才能获取事件。
$(document).ready(function() {
function handleLegendClick(graph) {
var chart = graph.chart;
var hidden = graph.hidden;
if (hidden) {
chart.showGraph(graph);
}
else {
chart.hideGraph(graph);
}
// return false so that default action is canceled
return false;
}
var chartdata = [{
"EntryDate": "2017-11-12T00:00:00","Propane": 575.0000,"Ethane": 1.7500,"FiscalPeriodText": "2017-Q4","polypropyleneLag": 1120.0000,"PPMargin": 310.00000,"PPMarginLag": 290.00000,"PPMarginHigh": 396.500000,"PPMarginLow": 343.2500000,"": 370,"PPMarginAvg": 311.250000,"PPMarginLagAvg": 300.000000,"PPMarginHighAvg": 408.750000,"PPMarginLowAvg": 354.3750000
},{
"EntryDate": "2017-11-19T00:00:00","polypropyleneLag": 1130.0000,"PPMarginLag": 300.00000,"PPMarginHigh": 406.500000,"PPMarginLow": 353.2500000,{
"EntryDate": "2017-11-26T00:00:00","polypropyleneLag": 1150.0000,"PPMarginLag": 320.00000,"PPMarginHigh": 426.500000,"PPMarginLow": 373.2500000,"PPMarginLowAvg": 354.3750000
}
];
var chartbar;
chartbar = AmCharts.makeChart('ChartDiv',{
'type': 'serial','dataProvider': chartdata,'valueAxes': [{
'id': 'v1','position': 'left','inside': false,'autoGridCount': false,'labelOffset': 15,'minHorizontalGap': 100,'gridCount': 8
}],'numberFormatter': {
'precision': 2,'decimalSeparator': '.','thousandsSeparator': ''
},'categoryField': 'EntryDate','graphs': [{
'id': 'g0','balloonText': '[[FiscalPeriodText]]:[[value]]','fillAlphas': 0.9,'lineAlpha': 0,'fillColors': '#7CB5EC','type': 'column','legendColor': '#7CB5EC','valueField': 'PPMarginLag','title': 'Weekly','valueAxis': 'v1'
},{
'id': 'g1','balloonText': '[[FiscalPeriodText]:[[value]]','bullet': 'round','bulletSize': 1,'fillAlphas': 0,'useLineColorForBulletBorder': true,'lineColor': '#F58220','lineThickness': 3,'legendColor': '#F58220','type': 'step',"title": 'Quarterly','valueField': 'PPMarginLagAvg','valueAxis': 'v6'
}
],'chartCursor': {
'categoryBalloonDateFormat': 'DD-MM-YYYY','cursorAlpha': 0,'valueLineEnabled': true,'valueLineBalloonEnabled': true,'valueLineAlpha': 0.5,'categoryBalloonColor': '#E2EEF6','color': '#000'
},'categoryAxis': {
'parseDates': true,'minHorizontalGap': 110,'axisColor': '#fff','labelRotation': 45,'minorGridEnabled': true,'gridCount': 8,'labelOffset': 10
},'legend': {
'position': 'bottom','equalWidths': false,'useGraphSettings': false,'clickMarker' : handleLegendClick,'clickLabel' : handleLegendClick,},});
});
.map_wrapper {
height: 300px;
width: 300px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/DataLoader/DataLoader.min.js"></script>
<div id="ChartDiv" class="map_wrapper"></div>
注意:我在移动视图中使用Bootstrap和CSS进行响应设计,一切正常,但是我无法单击图例,我尝试使用事件侦听器,但仍然无法从移动设备上单击图例来获取事件设备
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。