微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在移动或触摸设备上使用amcharts 3单击图例

如何解决如何在移动或触摸设备上使用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 举报,一经查实,本站将立刻删除。