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

heightcharts点击曲线图获取返回值的问题(ios点击图表第一次无法触发点击事件解决方法)的更多相关文章

  1. Java--FutureTask原理与使用(FutureTask可以被Thread执行,可以被线程池submit方法执行,并且可以监控线程与获取返回值)

    package com; import java.util.concurrent.Callable; import java.util.concurrent.ExecutionException; i ...

  2. 工作随笔——Java调用Groovy类的方法、传递参数和获取返回值

    接触Groovy也快一年了,一直在尝试怎么将Groovy引用到日常工作中来.最近在做一个功能的时候,花了点时间重新看了下Java怎么调用Groovy的方法.传递参数和获取返回值. 示例Groovy代码 ...

  3. iframe无刷新跨域上传文件并获取返回值

    通常我们会有一个统一的上传接口,这个接口会被其他的服务调用.如果出现不同域,还需要无刷新上传文件,并且获取返回值,这就有点麻烦了.比如,新浪微博启用了新域名www.weibo.com,但接口还是使用原 ...

  4. [Python陷阱]os.system调用shell脚本获取返回值

    当前有shell个脚本/tmp/test.sh,内容如下: #!/bin/bashexit 11 使用Python的os.system调用,获取返回值是: >>> ret=os.sy ...

  5. Yii2.0调用sql server存储过程并获取返回值

    1.首先展示创建sql server存储过程的语句,创建一个简单的存储过程,测试用. SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE P ...

  6. JAVA中执行JavaScript代码并获取返回值

    JAVA中执行JavaScript代码并获取返回值 场景描述 实现思路 技术要点 代码实现 测试方法 运行结果 改进空间 场景描述 今天在CSDN上偶然看到一个帖子对于一段字符串 “var p=‘xx ...

  7. 自己遇到的ajax调用ashx文件无法获取返回值的一种情况

    无法获取返回值的ashx文件大致如下: public void ProcessRequest (HttpContext context) { context.Response.ContentType ...

  8. 第18课 类型萃取(2)_获取返回值类型的traits

    1. 获取可调用对象返回类型 (1)decltype:获取变量或表达式的类型(见第2课) (2)declval及原型 ①原型:template<class T> T&& d ...

  9. python执行系统命令后获取返回值

    import os, subprocess # os.system('dir') #执行系统命令,没有获取返回值,windows下中文乱码 # result = os.popen('dir') #执行 ...

随机推荐

  1. 初识mango DB

    换工作了,第一次接触到mango数据库,有点云里雾里,整理一篇最基本的增删该查语句 百度百科说mango DB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据 ...

  2. WEBLOGIC 11G (10.3.6) windows PSU 升级10.3.6.0.171017(Java 反序列化漏洞升级)

    10.3.6版本的weblogic需要补丁到10.3.6.0.171017(2017年10月份的补丁,Java 反序列化漏洞升级),oracle官方建议至少打上2017年10月份补丁. 一.查看版本 ...

  3. 测试驱动开发实践2————从testList开始

    内容指引 1.测试之前 2.改造dto层代码 3.改造dao层代码 4.改造service.impl层的list方法 5.通过testList驱动domain领域类的修改 一.测试之前 在" ...

  4. 01_搭建Linux虚拟机(下)_我的Linux之路

    原文发布在特克斯博客www.susmote.com ​ 上一节已经给大家讲解了如何用VMware安装虚拟机,但是只讲了在VMware里面的操作 接下来我们讲在Linux内部的安装步骤 首先我们启动Li ...

  5. 以太坊开发DApp实战教程——用区块链、星际文件系统(IPFS)、Node.js和MongoDB来构建电商平台(一)

    第一节 简介 欢迎和我们一起来用以太坊开发构建一个去中心化电商DApp!我们将用区块链.星际文件系统(IPFS).Node.js和MongoDB来构建电商平台类似淘宝的在线电商应用,卖家可以自由地出售 ...

  6. 【R语言系列】read.table报错incomplete final line found by readTableHeader

    文件内容: id,SGBH,DMSM1,SGDO,SGFSSJ 1,310117620,伤人事故,上海市,2018-03-02 20:04:00 2,310117621,死亡事故,杭州市,2018-0 ...

  7. 微信APP简要分析

    Part1 走进微信APP 很明显,微信是很成功的APP. 微信 (WeChat) 是腾讯公司于2011年1月21日推出的一个为智能终端提供即时通讯服务的免费应用程序,现已是超过九亿人使用的手机应用. ...

  8. iOS开发-即时通信XMPP

    1. 即时通信 1> 概述 即时通讯(Instant Messaging)是目前Internet上最为流行的通讯方式,各种各样的即时通讯软件也层出不穷,服务提供商也提供了越来越丰富的通讯服务功能 ...

  9. SDVN

    Software Defined Vehicular Networks VANET 车载自组网(VANET)是指在交通环境中车辆之间.车辆与固定接入点之间及车辆与行人之间相互通信组成的开放式移动Ad ...

  10. git(一)快速入门

    1.设置用户名 git config --global user.name '你的用户名' ​ 2.设置用户名邮箱 git config --global user.email '你的邮箱' ​ 3. ...