久久精品国产亚洲高清|精品日韩中文乱码在线|亚洲va中文字幕无码久|伊人久久综合狼伊人久久|亚洲不卡av不卡一区二区|精品久久久久久久蜜臀AV|国产精品19久久久久久不卡|国产男女猛烈视频在线观看麻豆

    1. <style id="76ofp"></style>

      <style id="76ofp"></style>
      <rt id="76ofp"></rt>
      <form id="76ofp"><optgroup id="76ofp"></optgroup></form>
      1. 千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

        手機(jī)站
        千鋒教育

        千鋒學(xué)習(xí)站 | 隨時隨地免費(fèi)學(xué)

        千鋒教育

        掃一掃進(jìn)入千鋒手機(jī)站

        領(lǐng)取全套視頻
        千鋒教育

        關(guān)注千鋒學(xué)習(xí)站小程序
        隨時隨地免費(fèi)學(xué)習(xí)課程

        當(dāng)前位置:首頁  >  技術(shù)干貨  > 如何在使用visx做出反應(yīng)中創(chuàng)建瀑布圖

        如何在使用visx做出反應(yīng)中創(chuàng)建瀑布圖

        來源:千鋒教育
        發(fā)布人:syq
        時間: 2022-09-19 10:49:22 1663555762

          有關(guān)如何使用Airbnb的 visx 庫為 React Web 應(yīng)用程序創(chuàng)建瀑布圖的教程。

          介紹

          在本教程中,我們將介紹如何為 React Web 應(yīng)用程序創(chuàng)建瀑布圖。首先,讓我們了解什么是瀑布圖。

        使用visx做出反應(yīng)中創(chuàng)建瀑布圖

          什么是瀑布圖?

          瀑布圖與條形圖類似,只是其累積性質(zhì)不同。它顯示一系列步驟,以便在每個步驟中增加或減去當(dāng)前值,以顯示累積結(jié)果。圖表的最后一個條表示總值。

        1

          我們將要構(gòu)建的瀑布圖

          技術(shù)

          我們將使用由Airbnb構(gòu)建的visx庫。Visx 是一組低級視覺基元,它使用 d3 進(jìn)行數(shù)學(xué)運(yùn)算,使用 React 進(jìn)行高效的 DOM 管理。與電子圖表、Recharts 和類似庫不同,它不提供一組即用型圖表。盡管它們提供了高質(zhì)量的可自定義圖表,但不可能構(gòu)建一種與這些庫提供的完全不同的全新可視化類型。另一方面,visx 提供了一組方便的構(gòu)建基塊來創(chuàng)建任何自定義可視化效果。

          項(xiàng)目設(shè)置

          1. 創(chuàng)建一個新的 React 項(xiàng)目

          使用創(chuàng)建-反應(yīng)-應(yīng)用 CLI 初始化“反應(yīng) + 類型腳本”項(xiàng)目。

        2

          2. 安裝依賴項(xiàng)

          安裝所需的 visx 和 d3 數(shù)組依賴項(xiàng)。

        3

          3. 創(chuàng)建項(xiàng)目框架

          我們將從為我們的瀑布圖創(chuàng)建基礎(chǔ)開始。在 src 文件夾下創(chuàng)建以下文件:

        4

          項(xiàng)目樣板

          該代碼使用包中的組件,其目的是測量其父元素的尺寸并將其提供給子組件。ParentSize @visx/responsiveWaterfallChart

          構(gòu)建瀑布圖

          在以下步驟中,我們將設(shè)計(jì)組件 API,并從軸和網(wǎng)格開始逐步構(gòu)建圖表,最后以呈現(xiàn)數(shù)據(jù)標(biāo)簽結(jié)束。

          1. 定義組件接口

          我們的圖形應(yīng)該支持可視化任意數(shù)據(jù)集。為了通過類型安全支持它,讓我們使用描述數(shù)據(jù)形狀的類型參數(shù)使組件成為通用組件。我們還需要指定訪問器函數(shù)來從單個數(shù)據(jù)點(diǎn)檢索 X 和 Y 值。TDatum

        5

          WatercallChart component API

          2. 計(jì)算瀑布條

          下一步是根據(jù)原始數(shù)據(jù)計(jì)算瀑布步數(shù)。這可以通過具有累積值跟蹤的數(shù)據(jù)順序枚舉來完成。在每個步驟中,上一個累積值表示列的起點(diǎn),終點(diǎn)表示為添加或減去當(dāng)前數(shù)據(jù)點(diǎn)值。

        6

          從原始數(shù)據(jù)計(jì)算瀑布步驟

          3. 構(gòu)建圖表刻度

          現(xiàn)在,當(dāng)我們有實(shí)際值要呈現(xiàn)時,我們可以計(jì)算圖表刻度。Scale是一種將數(shù)據(jù)集值映射到可視值(在本例中為坐標(biāo))的函數(shù)。

          對于我們的域是一組瀑布步驟,這些步驟將映射到 的坐標(biāo)范圍。該參數(shù)定義條形之間的間距。xScale[0, innerWidth]padding

          另一方面,要計(jì)算Y軸域,我們需要迭代起始值和結(jié)束值,找到其中的最小值和最大值。然后,我們將它映射到 .該參數(shù)擴(kuò)大域間隔以使用舍入值,以便更好地理解圖形。[innerHeight, 0]nice

        7

          創(chuàng)建圖表比例函數(shù)

          4. 渲染圖表軸

          使用縮放函數(shù),我們能夠渲染圖表軸和背景網(wǎng)格。visx 庫為我們將要使用的組件提供了即用型可配置組件。

        8

        9

          圖表軸和背景網(wǎng)格

          5. 渲染瀑布步驟

          使用圖表刻度和先前計(jì)算的步驟,我們可以計(jì)算圖表?xiàng)l的坐標(biāo)及其高度,如下所示。

        10

          渲染瀑布步驟

        11

          幾乎準(zhǔn)備就緒的瀑布圖

          6. 添加標(biāo)簽和步驟連接

          可以通過添加數(shù)據(jù)標(biāo)簽來提高圖表的可讀性。下面的代碼將正值呈現(xiàn)在其條形上方,將負(fù)值呈現(xiàn)在其條形下方。作為最后點(diǎn)睛之筆,讓我們用虛線連接條形圖。

        12

          帶有數(shù)據(jù)標(biāo)簽的渲染條

        13

          最終結(jié)果

          結(jié)論

          在本指南中,我們介紹了什么是瀑布圖,以及使用 visx 的低級基元如何幫助為 React 應(yīng)用程序創(chuàng)建瀑布圖。

        tags:
        聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
        10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
        請您保持通訊暢通,專屬學(xué)習(xí)老師24小時內(nèi)將與您1V1溝通
        免費(fèi)領(lǐng)取
        今日已有369人領(lǐng)取成功
        劉同學(xué) 138****2860 剛剛成功領(lǐng)取
        王同學(xué) 131****2015 剛剛成功領(lǐng)取
        張同學(xué) 133****4652 剛剛成功領(lǐng)取
        李同學(xué) 135****8607 剛剛成功領(lǐng)取
        楊同學(xué) 132****5667 剛剛成功領(lǐng)取
        岳同學(xué) 134****6652 剛剛成功領(lǐng)取
        梁同學(xué) 157****2950 剛剛成功領(lǐng)取
        劉同學(xué) 189****1015 剛剛成功領(lǐng)取
        張同學(xué) 155****4678 剛剛成功領(lǐng)取
        鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
        董同學(xué) 138****2867 剛剛成功領(lǐng)取
        周同學(xué) 136****3602 剛剛成功領(lǐng)取
        相關(guān)推薦HOT
        抖店入駐收費(fèi)多少?開抖店費(fèi)用是多少?

        如果要開通抖音小店,需要先把抖音賬號開通商品櫥窗功能。入駐之后,可以選擇頭條賬號、抖音賬號、火山賬號任一類型注冊或登錄。那開個抖店要多...詳情>>

        2023-09-19 07:50:26
        想做直播帶貨的貨源哪里來?怎么找貨源?

        現(xiàn)如今直播推廣的方式是非?;鸬模兄浅6嗟馁u家都是利用直播推廣店鋪產(chǎn)品,效果也是非常不錯。但很多賣家想要了解現(xiàn)在直播帶貨的話什么產(chǎn)品...詳情>>

        2023-09-19 07:47:16
        適合三農(nóng)領(lǐng)域的名字?有何技巧?

        現(xiàn)在在抖音上很多博主會選擇直播來賺取更多的流量以及利潤,直播間的東西也有很多讓消費(fèi)者信任并且喜歡的,而且隨著越來越多人直播,很多農(nóng)產(chǎn)品...詳情>>

        2023-09-19 07:06:05
        抖店商品發(fā)布違規(guī)怎么申訴?有何規(guī)則?

        抖店服務(wù)市場服務(wù)商發(fā)布違禁信息如何處理?情節(jié)嚴(yán)重程度判定原則:違規(guī)嚴(yán)重等級主要通過服務(wù)商違規(guī)次數(shù)、造成后果的嚴(yán)重程度、獲利或?qū)е聯(lián)p失的...詳情>>

        2023-09-19 06:59:55
        “泛垂直起號”可能是2023年最高效的起號方式

        這可能是明年最好用的旗號方式了,今天教大家一個很野,但是可以讓你三天漲1000粉的偏方。去年前年啊,每個人都教你,誰知七號對著自己的產(chǎn)品拍...詳情>>

        2023-09-19 06:37:38
        開班信息
        北京校區(qū)
        • 北京校區(qū)
        • 大連校區(qū)
        • 廣州校區(qū)
        • 成都校區(qū)
        • 杭州校區(qū)
        • 長沙校區(qū)
        • 合肥校區(qū)
        • 南京校區(qū)
        • 上海校區(qū)
        • 深圳校區(qū)
        • 武漢校區(qū)
        • 鄭州校區(qū)
        • 西安校區(qū)
        • 青島校區(qū)
        • 重慶校區(qū)
        • 太原校區(qū)
        • 沈陽校區(qū)
        • 南昌校區(qū)
        • 哈爾濱校區(qū)
        屏东市| 奉化市| 大宁县| 绥阳县| 谢通门县| 永昌县| 濮阳市| 汤原县| 同江市| 武夷山市| 丹凤县| 多伦县| 金寨县| 高淳县| 古田县| 宁武县| 鹤岗市| 文水县| 邛崃市| 思茅市| 庆云县| 上饶县| 镶黄旗| 崇阳县| 阿鲁科尔沁旗| 山西省| 陆河县| 仲巴县| 久治县| 施秉县| 景东| 鸡西市| 京山县| 滕州市| 鞍山市| 北京市| 石柱| 武川县| 嘉禾县| 怀宁县| 英山县|