zoukankan      html  css  js  c++  java
  • heightcharts点击曲线图获取返回值的问题(ios点击图表第一次无法触发点击事件解决方法)

    需求:用的heightcharts插件,点击曲线图想获得所点击点的返回值,如图

    问题代码:

    (function chart_line(){
      var data={"title":["01","02","03","04","05","06","07","08","09","10","11","12"],"data":[10,30,50,65,98,0,0,0,80,340,70,40]};
      var chart = new Highcharts.Chart('lineGraph1',{
        chart: {
          type: 'spline'
        },
        title: {
          text: 'demo'
        },
        xAxis: {
          categories: data.title
        },
        yAxis: {
          title: {
            text: ''
          }
        },
        legend:{
          enabled: false
        },
        credits:{
          enabled: false
        },
        plotOptions: {
          spline: {
            dataLabels: {
              enabled: true // 开启数据标签
            },
            enableMouseTracking: true // 关闭鼠标跟踪,对应的提示框、点击事件会失效
          },
          series: {
            cursor: 'pointer',
            events: {
              click: function(event) { //正常情况下在pc端和安卓上用该点击事件就可以

                document.getElementById('month').innerText =event.point.x + 1 + ‘月’;

                document.getElementById('num').innerText = this.data[event.point.x].y;

              },
            },  
          }
        },
        series: [{
          name: name,
          data: data.data
        }]
      });
    })()

    该代码实在click事件中获取x,y值,运行时会发现在ios上第一次点击的时候不会触发这个click事件,第二次开始才会触发

    在heightcharts文档几乎试了一遍发现了point.events.mouseOver这个属性,添加上后简直完美达到了预想效果,以下是代码

    (function chart_line(){
      var data={"title":["01","02","03","04","05","06","07","08","09","10","11","12"],"data":[10,30,50,65,98,0,0,0,80,340,70,40]};
      var chart = new Highcharts.Chart('lineGraph1',{
        chart: {
          type: 'spline'
        },
        title: {
          text: 'demo'
        },
        xAxis: {
          categories: data.title
        },
        yAxis: {
          title: {
            text: ''
          }
        },
        legend:{
          enabled: false
        },
        credits:{
          enabled: false
        },
        plotOptions: {
          spline: {
            dataLabels: {
              enabled: true // 开启数据标签
            },
            enableMouseTracking: true // 关闭鼠标跟踪,对应的提示框、点击事件会失效
          },
          series: {
            cursor: 'pointer',
            point:{
              events:{
                mouseOver: function () {
                  document.getElementById('month').innerText = this.x + 1 + '月';
                  document.getElementById('num').innerText = this.y;
                }
              }
            },
          }
        },
        series: [{
          name: name,
          data: data.data
        }]
      });
    })()

    总结:一开始的想法就是点击以后获取到返回值,所以一直在考虑点击事件而忽略了其他属性,so固定思维太可怕,以后遇到类似问题还是要多思考啊,哈哈哈

  • 相关阅读:
    ansible 使用密码登录
    shell脚本报错:-bash: xxx: /bin/bash^M: bad interpreter: No such file or directory
    配置永久生效(登陆shell和非登陆shell)、I/O重定向、Here Docunmet 此处文档、管道、tee
    Navicat for PostgreSQL 序列详解
    flask第十五篇——Response
    Centos防火墙及SELINUX关闭
    linux查看网卡信息的几种方法(命令)
    Python之在函数中调用import语句
    python基础_格式化输出(%用法和format用法)
    Python中怎样简单地用一行写if-then语句?
  • 原文地址:https://www.cnblogs.com/yunyea/p/8297065.html
Copyright © 2011-2022 走看看