翻譯|使用教程|編輯:龔雪|2022-09-28 09:54:30.123|閱讀 145 次
概述:本文將介紹如何使用DevExtreme React控件輕松實(shí)現(xiàn)圖表的更新轉(zhuǎn)換,歡迎下載相關(guān)組件體驗(yàn)!
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
DevExtreme擁有高性能的HTML5 / JavaScript小部件集合,使您可以利用現(xiàn)代Web開發(fā)堆棧(包括React,Angular,ASP.NET Core,jQuery,Knockout等)構(gòu)建交互式的Web應(yīng)用程序,該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。
DevExtreme React Chart控件的動(dòng)畫插件支持更新過渡動(dòng)畫,將插件添加到圖表配置后,動(dòng)畫會(huì)自動(dòng)顯示在數(shù)據(jù)更新中。
您可以使用duration和easing這兩個(gè)屬性來自定義動(dòng)畫,easing是一個(gè)函數(shù),由package d3-ease提供,這是帶有自定義動(dòng)畫設(shè)置的示例圖表配置:
import { easeBounceOut } from 'd3-ease'; ... <Chart data={chartData}> <BarSeries ... > <Animation duration={2000} easing={easeBounceOut} /> </BarSeries> </Chart>
所有圖表系列類型都支持動(dòng)畫,下圖是一個(gè)配置了動(dòng)畫插件的餅圖。
DevExpress技術(shù)交流群6:600715373 歡迎一起進(jìn)群討論
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自:慧都網(wǎng)