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
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...