• 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固定思维太可怕,以后遇到类似问题还是要多思考啊,哈哈哈

  • 相关阅读:
    11.爱吃皮蛋的小明(斐波那契数列)
    10.二叉树最大宽度和高度
    9.二叉树的序遍历
    8.递归第一次
    6.数的计算(递归算法)
    5.十进制转m进制
    数论——快速幂(C++)
    最短路径——SPFA算法(C++)
    最小环——Floyd变种算法(C++)
    数论——质因数分解(C++)
  • 原文地址:https://www.cnblogs.com/yunyea/p/8297065.html
Copyright © 2020-2023  润新知