heightcharts點擊曲線圖獲取返回值的問題(ios點擊圖表第一次無法觸發點擊事件解決方法)

来源:https://www.cnblogs.com/yunyea/archive/2018/01/16/8297065.html
-Advertisement-
Play Games

需求:用的heightcharts插件,點擊曲線圖想獲得所點擊點的返回值,如圖 問題代碼: (function chart_line(){ var data={"title":["01","02","03","04","05","06","07","08","09","10","11","12"], ...


需求:用的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固定思維太可怕,以後遇到類似問題還是要多思考啊,哈哈哈


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 上次我們聊了《Html5前端如何實現文字陰影》,其實在開發中現在對於陰影效果的使用已經越來越廣泛了,那麼今天我們就來說一說用同樣的手法實現邊框陰影。 一.邊框陰影box-shadow 邊框陰影參數:參數1 x-shadow:設置對象的陰影水平偏移值,單位可以是px、em或百分比等,允許負值。參數2 ...
  • 21、數組 定義數組 * 字面量方式 var 數組名稱 = [ value,value,... ] * 構造函數方式 var 數組名稱 = new Array(value,value,...); var 數組名稱 = new Array(length) 創建對象方式創建數組分析圖 附:var num ...
  • 閱讀本書主要目的: 自從學會CSS以來,雖然熟練掌握了其使用方法和技巧,但對其底層的原理和實現並不清晰,閱讀本書想進一步系統化的學習和深入研究其本質,對這門前端基礎語言從熟練使用到真正理解。 第1章 CSS和文檔 1.1 WEB的衰落(為了表現增加很多標記元素如font等,這些阻礙了頁面的結構化) ...
  • 眾所周知,文本溢出顯示省略號用CSS就可以: 單行文本: 多行文本: 如果想中間顯示省略號呢?? 現在需求是,一段文本很長,但最後有一個關鍵詞很重要,而且改關鍵詞有括弧括起來的,需要顯示出來,所以如果文本過長,不單隻做省略號處理,還要把括弧裡面的內容顯示出來。 上面的代碼意思是:如果文本長度大於13 ...
  • 三種密碼強度的正則表達式: 較弱:全是數字或全是字母 6-16個字元:/^[0-9]{6,16}$|^[a-zA-Z]{6,16}$/; 中級:數字、26個英文字母 6-16個字元: /^[A-Za-z0-9]{6,16}$/; 較高:由數字、26個英文字母或者下劃線組成的字元串 6-16個字元: ...
  • 1、概述 簡單值(基本類型)通過值複製的方式來賦值/傳遞。 複合值(對象)通過引用複製的方式來賦值/傳遞。 結合記憶體示意圖,理解會更深刻。 簡單類型的值在常量池只有一份,變數a和變數b都是常量池中2的一個副本。 變數c和變數d都是指向堆中的一個數組對象。 ...
  • <! TOC "作用域與閉包" "什麼是作用域" "編譯器" "理解作用域" "嵌套的作用域" "詞法作用域" "詞法分析時" "欺騙詞法作用域" "函數與塊作用域" "函數中的作用域" "隱藏標識符於普通作用域" "函數作為作用域" "塊作為作用域" "提升" "先有雞還是先有蛋?" "編譯器再次 ...
  • 本文詳細介紹了table-layout的屬性值、定義和用法、固定表格佈局、自動表格佈局等……希望可以幫到你喲! ...
一周排行
    -Advertisement-
    Play Games
  • GoF之工廠模式 @目錄GoF之工廠模式每博一文案1. 簡單說明“23種設計模式”1.2 介紹工廠模式的三種形態1.3 簡單工廠模式(靜態工廠模式)1.3.1 簡單工廠模式的優缺點:1.4 工廠方法模式1.4.1 工廠方法模式的優缺點:1.5 抽象工廠模式1.6 抽象工廠模式的優缺點:2. 總結:3 ...
  • 新改進提供的Taurus Rpc 功能,可以簡化微服務間的調用,同時可以不用再手動輸出模塊名稱,或調用路徑,包括負載均衡,這一切,由框架實現並提供了。新的Taurus Rpc 功能,將使得服務間的調用,更加輕鬆、簡約、高效。 ...
  • 本章將和大家分享ES的數據同步方案和ES集群相關知識。廢話不多說,下麵我們直接進入主題。 一、ES數據同步 1、數據同步問題 Elasticsearch中的酒店數據來自於mysql資料庫,因此mysql數據發生改變時,Elasticsearch也必須跟著改變,這個就是Elasticsearch與my ...
  • 引言 在我們之前的文章中介紹過使用Bogus生成模擬測試數據,今天來講解一下功能更加強大自動生成測試數據的工具的庫"AutoFixture"。 什麼是AutoFixture? AutoFixture 是一個針對 .NET 的開源庫,旨在最大程度地減少單元測試中的“安排(Arrange)”階段,以提高 ...
  • 經過前面幾個部分學習,相信學過的同學已經能夠掌握 .NET Emit 這種中間語言,並能使得它來編寫一些應用,以提高程式的性能。隨著 IL 指令篇的結束,本系列也已經接近尾聲,在這接近結束的最後,會提供幾個可供直接使用的示例,以供大伙分析或使用在項目中。 ...
  • 當從不同來源導入Excel數據時,可能存在重覆的記錄。為了確保數據的準確性,通常需要刪除這些重覆的行。手動查找並刪除可能會非常耗費時間,而通過編程腳本則可以實現在短時間內處理大量數據。本文將提供一個使用C# 快速查找並刪除Excel重覆項的免費解決方案。 以下是實現步驟: 1. 首先安裝免費.NET ...
  • C++ 異常處理 C++ 異常處理機制允許程式在運行時處理錯誤或意外情況。它提供了捕獲和處理錯誤的一種結構化方式,使程式更加健壯和可靠。 異常處理的基本概念: 異常: 程式在運行時發生的錯誤或意外情況。 拋出異常: 使用 throw 關鍵字將異常傳遞給調用堆棧。 捕獲異常: 使用 try-catch ...
  • 優秀且經驗豐富的Java開發人員的特征之一是對API的廣泛瞭解,包括JDK和第三方庫。 我花了很多時間來學習API,尤其是在閱讀了Effective Java 3rd Edition之後 ,Joshua Bloch建議在Java 3rd Edition中使用現有的API進行開發,而不是為常見的東西編 ...
  • 框架 · 使用laravel框架,原因:tp的框架路由和orm沒有laravel好用 · 使用強制路由,方便介面多時,分多版本,分文件夾等操作 介面 · 介面開發註意欄位類型,欄位是int,查詢成功失敗都要返回int(對接java等強類型語言方便) · 查詢介面用GET、其他用POST 代碼 · 所 ...
  • 正文 下午找企業的人去鎮上做貸後。 車上聽同事跟那個司機對罵,火星子都快出來了。司機跟那同事更熟一些,連我在內一共就三個人,同事那一手指桑罵槐給我都聽愣了。司機也是老社會人了,馬上聽出來了,為那個無辜的企業經辦人辯護,實際上是為自己辯護。 “這個事情你不能怪企業。”“但他們總不能讓銀行的人全權負責, ...