Görsel olarak anladın mı? ECharts 4.0 en kapsamlı teknik strateji
16 Ocak 2018'de Baidunun EFE ekibi, tanınmış açık kaynak ürünü EChartsın en son 4.0 sürümünü resmen yayınladı. Yeni sürüm, Baidunun görselleştirme alanındaki varlığını işaret ederek ürün performansı, işlevler ve kullanım kolaylığı açısından kapsamlı bir şekilde iyileştirildi. Bir başka çığır açan kilometre taşı daha geldi.
31 Mart'ta, Baidu Geliştirici Merkezi sponsorluğunda, Geekbang Technology ev sahipliğinde ve Baidu İnovasyon Merkezi sponsorluğunda 77. Baidu Teknoloji Salonu, Baidu'nun kıdemli teknik yöneticisi Zu Ming, Baidu'nun kıdemli ön uç Ar-Ge mühendisi Su Shuang ve Baidu'nun kıdemli front-end'i davet etti. Ar-Ge mühendisi Zhang Wenli, Baidunun kıdemli ön uç Ar-Ge mühendisi Wang Junting, Baidunun kıdemli ön uç Ar-Ge mühendisi Shen Yi ve Baidunun üst düzey ön uç Ar-Ge mühendisi Li Deqing, EChartsın ürün özellikleri, teknoloji uygulaması, görselleştirme uygulaması ve açık kaynak topluluk inşasının dört boyutundan başlayarak altı öğretim görevlisidir. Kullanıcıların verilerle ilgili içgörü kazanmalarına olanak sağlamak ve izleyiciler için ECharts'ı derinlemesine kavrayacak bir paylaşım ziyafeti getirmek için ECharts'ın nasıl daha iyi kullanılacağına dair kapsamlı bir giriş.
1 ECharts açık kaynak yolu
Baidu'nun kıdemli teknik müdürü Zu Ming açılış konuşması yaptı. İlk olarak Baidu'nun açık kaynaklı ECharts projesinin geliştirme geçmişini tanıttı. Haziran 2013'te ECharts 1.0'ın piyasaya sürülmesinden Ocak 2018'de ECharts 4.0'ın piyasaya sürülmesine kadar geçen dört yıl içinde, ECharts projesi yinelemeler biriktirdi 64 versiyonu bulunan Github'daki takipçi sayısı 26.530'a ulaştı ve bu da sektör yetkililerinden büyük ilgi ve ilgi gördü.
Haziran 2013'te ECharts 1.0 sürümünü yayınladı; Haziran 2014'te ECharts sürüm 2.0'ı yayınladı. 1.0 temelinde performans 3+ kat iyileştirildi, dikdörtgen sistemin tam tablosu eklendi, büyük ölçekli veriler desteklendi, zaman ekseni, Gösterge panosu, huni grafiği, anormal harita ve destek svg genişletmesi; daha sonra ekip, ön uç teknolojisi ve kullanıcı ihtiyaçlarının gelişim trendine göre, ekip ECharts'ın genel teknik mimarisinin büyük bir yeniden inşası ve optimizasyonunu gerçekleştirdi ve Ocak 2016'da yayınladı ECharts 3.0 ve 3.0, ürün stili ve etkileşim dahil olmak üzere işlev, performans açısından büyük ölçüde gelişti.
Bu yılın 16 Ocak'ında ECharts 4.0 doğdu ve sekiz yeni özellik ürünü daha yüksek bir seviyeye taşıdı.ECharts 4.0, daha fazla kişinin daha fazla senaryoda veri görselleştirmeden yararlanmasına olanak tanıyan bir sistem oluşturmayı umuyor. İnsanların dünyayı keşfetmesine ve gerçeği anlamasına yardımcı olmanın değeri.
ECharts 4.0'ın en büyük özelliği, "siyah teknoloji" olarak adlandırılabilecek 8 yeni özellik getirmesidir:
-
On milyonlarca veri görselleştirme oluşturma yeteneği
-
SVG + Canvas çift motor
-
Yeni Sunburst Grafiği
-
Veri ve stil ayrımı
-
Daha düz konfigürasyon öğeleri
-
Erişilebilirlik desteği
-
WeChat uygulama desteği
-
PowerPoint eklentisi
ECharts'ın geleceği
Kısa süre önce, dünyaca ünlü açık kaynak topluluğu Apache Foundation, "Baidu'nun açık kaynak ECharts projesinin Apache kuluçka makinesine girmesi onaylandı" duyurdu. Bu, Baidu'nun en iyi uluslararası açık kaynak topluluğuna giren ilk projesi ve aynı zamanda Baidu Açık Kaynak'ın açık kaynak geliştirmenin hızlı şeridine resmi girişini de işaret ediyor. Gelecekte, ECharts ekibi bunu sürdürmeye devam edecek ve geliştiricilere daha iyi bir deneyim sağlamak için daha fazla kişinin katılacağını umuyor.
2 ECharts 4.0 temel özellik analizi
ECharts'ın başarısı ve geniş uygulama alanı, yıkıcı fonksiyonel tasarımından ve teknik özelliklerinden ayrılamaz. ECharts'ın kıdemli Ar-Ge mühendisleri Su Shuang ve Zhang Wenli, büyük veri işleme, veri kümeleri, çapraz platform ve erişilebilirlik gibi birden çok teknik özelliğin yeni sürümünün kullanım senaryolarını ve tasarım ilkelerini tanıtmak için ECharts 4.0'ın yeni teknik özelliklerini bir başlangıç noktası olarak aldı.
Büyük miktarda veri işleme
Bu makaledeki büyük veri hacmi oluşturma, tarayıcıdaki binlerce ila on milyonlarca verinin işlenmesi ve etkileşimi ile ilgilidir. ECharts4.0, bunları optimize etmek için büyük çaba göstermiştir. Veri görselleştirme, tarayıcıları önemli bir çıktı yöntemi olarak kullanır, ancak tarayıcıların performans açısından belirli sınırlamaları vardır. Esas olarak aşağıdaki yönlerden:
-
Program yürütme süresi. Tarayıcıda, JS'nin yürütülmesi, oluşturmayı ve kullanıcı etkileşiminin yanıtını engelleyecektir.
-
Hafıza kullanımı. Büyük verilerin işlenmesi, tarayıcının çökmesine neden olabilir veya aşırı GC ek yükü nedeniyle sorunsuz çalışmayabilir.
-
Ağ yükleniyor. Yüzlerce megabayt ve gigabayt veri için, dosya boyutu onlarca, hatta yüzlerce MB olabilir.İnternette görüntüleniyorsa, tüm veriler indirildikten sonra işleme başlatılamaz.
ECharts bunlar için bir dizi optimizasyon yaptı: Sahnenin özelliklerine göre optimizasyon, program seviyesinin optimizasyonu, kullanıcı duyularının optimizasyonu, yükleme optimizasyonu:
Sahne özelliklerine göre optimizasyon
Örnek olarak grafik sadeleştirmeyi ele alarak, ECharts'ın sahne özelliklerine göre nasıl optimize edildiğini açıklar. Aşağıdaki şekil bir K-çizgisi grafiğidir.Her grafiğin karmaşık yapısının oluşturulması, basit grafiklerden daha uzun sürer ve bu, veri miktarı büyük olduğunda etkileşimli takılmalara neden olur. Gerçek yakınlaştırma belirli bir dereceye kadar olduğunda, bu grafikleri satırlar halinde basitleştirmek, işleme verimliliğini büyük ölçüde artıracaktır.
Program düzeyinde optimizasyon
Programın verimliliğini optimize etmek için temel olarak program yapısı ve kod ifadesinden başlayın.
Örneğin, yolları birleştirirken, Canvas esas olarak büyük miktarda veri işlenirken kullanılır. Canvas tarafından sağlanan API nispeten düşük seviyelidir ve karmaşık ve bakımı kolay uygulamalar oluşturmak için soyutlanması gerekir. ECharts'ın temel kitaplığı olan Zrender, oluşturulan ve yönetilen varlıkları nesneye yönelik bir şekilde grafik öğelerine özetler ve her grafik öğesi kendi sunumundan sorumludur. Soyutlamanın dezavantajı, belirli performansın feda edilmesidir: oluşturma sırasında, her grafik oluşturma işlemi önce stili ayarlamak için Canvas API'yi çağırmalı ve ardından yolu oluşturmalıdır, sık durum değiştirme performans kaybına neden olur. Bu nedenle, grafik öğelerini birleştirmek, stili bir kez ayarlamak ve büyük veri sahnesi için tüm yolları oluşturmak mümkündür.
Ek olarak, bellek kullanımıyla ilgili olarak, bir programın çok uzun GC zamanı, işlemenin donmasına neden olabilir.
Aşağıdaki ekran görüntüsünde gösterildiği gibi, tarayıcının 10M Minor GC gerçekleştirmesi 5 milisaniye sürdü. Süre çok uzun sürmüyor. Aslında, donma olmayacağı garanti edilebiliyorsa ve çerçeve başına izin verilen süre sadece onlarca milisaniyeyse, GC bunu harcayacaktır. Zaman oldukça önemli. Optimizasyon yöntemi, eski nesilde büyük nesnelerin sık sık geri dönüştürülmesini azaltmak için nesneleri yeniden kullanmak olabilir. Bellek kullanımını ve yeniden tahsisi azaltmak için Typed Array veya sabit uzunluklu Dizi de kullanabilirsiniz. Ancak sorun, dizi uzunluğunu kendiniz yönetmeniz, kapasiteyi artırmanız ve çok boyutlu diziyi manuel olarak tek bir boyuta indirmeniz gerektiğidir.
Bu nedenle, program düzeyinin optimizasyonu evrenseldir ancak okunabilirliğine zarar verecek ve programın sağlamlığını azaltacaktır, bu nedenle bu optimizasyon sadece gerektiğinde kullanılır.
Kullanıcı algısının optimizasyonu
Aşağıdaki ECharts3 işleme akış şemasına bakın: En soldaki orijinal verilerdir.Soldan sağa doğru işlemden sonra veriler işlenir, düzenlenir, oluşturulur ve son olarak ekrana çizilir. Etkileşim varsa, yeniden düzenlemeniz, yeniden oluşturmanız ve işlemi tekrar yapmanız gerekir. Büyük veri söz konusu olduğunda, genel süreci tamamlama süresi oldukça fazladır. Zamanın kısaltılması zor olduğunda, genel fikir akış yapmak veya aşamalı olarak oluşturmaktır.
Aşağıdaki, ECharts4'ün bir ardışık düzen diyagramıdır, en soldaki orijinal verilerdir ve ECharts tarafından otomatik olarak parçalara ayrılır, her Chunk, soldan sağa tam oluşturma sürecinden geçer ve tamamlandıktan sonra doğrudan SVG veya Canvas'ta oluşturulur. Sonra zaman çizelgesine göre aşağı inin ve bir sonraki Parça ile yürümeye devam edin. Bu sayede görev bloke edilmek yerine parçalara bölünerek kullanıcılara gecikme olmadığını hissettiriyor.
Veri yüklemesinin optimizasyonu
Yüzlerce megabaytlık veri için dosya boyutu onlarca veya hatta yüzlerce MB olabilir.
Optimizasyon yöntemi, her şeyden önce, bir metin dosyası yerine doğrudan ikili dosya olarak kaydetmek için Typed Array'i kullanabilir; bu, veri dosyasının hacmini büyük ölçüde sıkıştırabilir. ECharts, verileri aktarmak için Typed Array'i doğrudan desteklemektedir.
Ek olarak, İnternette görüntüleniyorsa, tüm veriler indirildikten sonra işlemeye başlanması tavsiye edilmez ECharts artımlı oluşturmayı destekledikten sonra, kullanıcılar dosyayı parçalar halinde yükleyebilir ve yüklenen dosya işleme için doğrudan ECharts'a aktarılır.
veri seti
Veri kümesi, veri girişi için yeni bir seçenek sunar: verileri iki boyutlu bir tablo (iki boyutlu dizi veya nesne dizisi) biçiminde doğrudan iletin ve ardından görsel eşlemeyi (yani, hangi satırların ve sütunların hangi eksenlere, renklere vb. Eşleneceğini) yapılandırın. ) Görselleştirme sonuçlarını almak için. Bu, veri görselleştirme üretimi ve keşfinin operasyonel düşüncesi ile daha uyumludur: bir veri parçasına dayalı olarak, eşleme kurallarını değiştirin ve bilgileri keşfedin. Bu aynı zamanda, program geliştirmeyi kolaylaştıran veri ve stillerin ayrı yönetimini kolaylaştırır.
Çapraz platform grafik arayüzü
Platformlar arası grafik arabirim nedir?
Bir 2B grafik arabirimi için, genellikle dikdörtgenler, daireler, yollar, vb. Gibi bazı grafik öğeleri içerir. Grafik öğeler ayrıca öznitelikler içerir ve grafik öğeler ve öğeler birbiriyle birleştirilebilir ve maskelenebilir. ECharts'ın çapraz platformu desteklediğini söylüyoruz, hangi platformları kastediyoruz? Aşağıdaki hususları göz önünde bulundurduk: İlk olarak, tarayıcı. Tarayıcı, Canvas, SVG ve VML gibi farklı yöntemlere göre oluşturulur. Bu senaryoda, farklı çözünürlükler için farklı düzen yöntemleri kullanmak isteyebiliriz. Alanın tarzı, alan kullanımını daha makul hale getirir. Sunucu oluşturma ve WeChat uygulaması gibi özel platformlar için de uyumludur. Ayrıca, görme engelli kişiler tarafından kullanılan okuma cihazları için engelsiz erişim ayarları da sağlanmıştır.
Platformlar arası bir grafik arayüze neden ihtiyacınız var?
Kullanıcı için, grafiğin Canvas veya SVG ile yapılıp yapılmadığını umursamıyor. Onun için iyi bir deneyim en önemli şeydir, sadece normal çizelgeleri görebilmeyi ve grafik oluşturma sonuçlarıyla ilgili iyi bir deneyim yaşamayı umuyor. Grafiklerin nasıl işlendiğine gelince, umursamıyor. Geliştiriciler için tüm platformları tek tek uygulaması gerekiyor.
Bu senaryoya göre farklı platformlarla uyumlu olmak gerekir ve farklı platformlardaki bazı cihazların bazı performans farklılıkları vardır.
ECharts çözümü-ZRender üç oluşturucu sağlar
ECharts, temeldeki ZRender oluşturucuyu kullanır. ZRender, Canvas, SVG ve VML olmak üzere üç oluşturucu sağlar. Üst tarafta render platformundan bağımsız bir grafik arayüzü sağlar ve alt tarafta farklı platformlarla uyumlu olan uygulama algoritmalarını kapsüller.
1. Birden çok işleme yöntemi nasıl desteklenir?
Baidu kıdemli kullanıcı arabirimi mühendisi Xian Che bir örnek verdi. İlk önce bir dikdörtgen bildirin. Ona yalnızca X koordinatı, Y koordinatı, genişlik ve yükseklik bilgilerini söylemeniz gerekir ve oluşturma motoru, belirli oluşturma platformuna göre farklı oluşturma alt katmanlarını uygulayacaktır. Alt katman PathProxy adı verilen bir sınıftır. Temel çizim talimatlarının kaydedilmesinden sorumlu olacaktır. Farklı oluşturuculara göre, alt katman farklı uygulamalar gerçekleştirir. Bu şekilde, sadece birleşik bir yol kullanılamaz, aynı zamanda farklı oluşturucular da oluşturulabilir. Ayrıca, Web Worker'ın toplu oluşturma için kullanıldığını varsayarsak, oluşturmanın bu diziye bağlı olarak da gerçekleştirilebilmesi avantajına sahiptir.
2. Olay işleme nasıl desteklenir
Farklı oluşturucuların aynı olay işleme mekanizmasına sahip olması için, olayları tüm grafik kabına bağlarız. Başka bir deyişle, SVG ve VML için, olayları DOM ağacının altındaki her öğeye bağlamıyoruz. Bu, Canvas ile birleşik bir olay işleme mekanizmasına sahip olacaktır.
Olayın hangi grafik elemanına cevap vereceğini belirlerken, işleme listesini tersine çevireceğiz, yani önce farenin ekranın önündeki grafikte olup olmadığını belirleyeceğiz. Karar verirken, önce fare koordinatlarını grafik koordinat sistemine dönüştürecektir. Bunun nedeni, grafiklerin çevirme, döndürme ve hatta grafikler ile grafikler arasındaki birleşik dönüşümlerle ölçeklenebilmesidir. Fareyi grafik koordinat sistemine dönüştürdükten sonra, ikisi arasındaki göreceli ilişkiyi öğrenebilir ve ardından sınırlayıcı kutuya göre kaba bir yargıya varabilir ve ardından yola bağlı olarak doğru bir karar verebiliriz. Fare grafikte ise, grafiğin olay dağıtımı ve köpürme yapmasına izin verin; yoksa ekranın arkasında bulunan öğeleri tek tek değerlendirin.
3. SVG oluşturma kısmen nasıl güncellenir?
Oluşturma sırasında tuval tamamen yeniden çizilir, ancak çok verimlidir. Örneğin SVG için, bin noktalı bir dağılım grafiği DOM'da karşılık gelen bin düğüme sahiptir. Tüm DOM öğelerinin silinmesi ve her çerçevenin yeniden eklenmesi gerekiyorsa, verimlilik çok düşüktür.
Bu nedenle, işleme nesnelerinin bir listesini tutarız ve yeni, değiştirilmiş ve silinmiş işleme nesnelerinin bir listesini elde etmek için her çerçevede yeni oluşturma nesnesi listesini önceki çerçeveyle farklılaştırırız ve ardından listeye göre DOM ile ilgili düğümleri ayarlarız.
4. SVG oluşturma için verimlilik nasıl optimize edilir
Örnek olarak derecelendirmeyi alın, çoklayıcı derecelendirme tanımının uygulama yöntemini benimseyin
-
Bir SVG tanımlayın
-
Gradyanlar, maskeler, gölgeler vb. Bu sınıfı miras alır
-
Her gradyan nesnesi bir tane paylaşır
-
Oluşturma nesnesini güncellerken
-
Gradyan nesnesinin DOM düğümleri oluşturup oluşturmadığını kontrol edin
Öyleyse, DOM kimliğine karşılık gelen url'ye dolgu veya kontur ayarlayın
Değilse, yeni bir DOM oluşturun ve gradyan nesnesinde buna referans verin
Oluşturma nesnesini güncellerken
-
Oluşturmadan önce tüm degradeleri kullanılmamış olarak işaretle
-
Bir nesneyi eklerken veya güncellerken, bir degrade varsa, onu kullanılmış olarak işaretleyin
-
Degrade niteliklerini güncelleyin (renk, konum vb.)
-
Oluşturulduktan sonra kullanılmayan gradyan DOM kaldırılacak
ECharts çözüme duyarlı tasarım desteği
ECharts, üç konumlandırma yöntemini destekler:
Piksel, yüzde, konum açıklaması konumlandırma
Ek olarak, ECharts aynı zamanda duyarlı bir düzen uygular, yani farklı çözünürlüklerdeki grafikler için farklı konfigürasyonlar ve düzenler kullanabilirsiniz. Bu nasıl başarılır, aşağıdaki resme bakın: Biri baseOption ve diğeri medya olmak üzere iki bölümden oluşur. baseOption, tüm çözünürlükler için kullanılacak yapılandırma öğelerini ifade eder ve ortam, her biri bir çözünürlüğü temsil eden yapılandırmayı içeren bir dizidir. Her öğe bir sorgu ve bir seçenek içerir; sorgu, her çözünürlük için bu yapılandırmayı almaktır ve seçenek, bu çözümlemede hangi yapılandırma öğesinin kullanılacağıdır. Sorgu genişliğini, yüksekliğini ve en boy oranını içerebilir ve maksimum ve minimum değerleri kullanabilir.
ECharts çözümü-özel platform ve özel ekipman
Özel platform işleme
-
Yargı platformu
-
Belirli yöntemlerle uyumlu
Ulaşılabilirlik
-
Grafik içeriğine göre açıklama oluşturun
-
Geliştiricilerin değiştirmesi için şablonlar sağlayın
Kör okuma cihazının kullandığı engelsiz erişim için W3C, standart bir engelsiz İnternet uygulama özellikleri seti geliştirmiştir. Amacı, web içeriğini ve uygulamalarını daha fazla engelli insan için erişilebilir hale getirmektir. ECharts için istenen etki, bir grafiğe dayalı olarak grafik hakkında veri oluşturmaktır ve bu açıklama kullanıcı tarafından yazılmaz, bunun yerine konfigürasyon öğelerine göre otomatik olarak oluşturulur. Bir arya etiketine bağlı olacak, bu özellik görme engellinin okuma cihazı tarafından tanınacak ve yüksek sesle okunacaktır. Ancak birçok zorluk da vardır: farklı grafik türlerinin farklı açıklama yöntemleri, farklı miktarları ve farklı veri tanımlama biçimleri vardır, oluşturulan açıklamaların dilbilgisi özelliklerine uyması gerekir, çizelgenin içeriğinin kısaca ifade edilmesi gerekir ve farklı dilleri destekleme ihtiyacı. Peki sonunda nasıl oldu? ECharts, şablon bloklarına dayalı bir dizi yöntem uygular.Farklı grafik türleri, veri hacimleri ve veri formları için farklı şablonlar kullanır.Kullanıcılar ayrıca şablonları farklı diller için özelleştirebilir.
3 ECharts size grafiğinizi nasıl seçip tasarlayacağınızı öğretir
Görselleştirme teorisine ve ECharts veri görselleştirme tasarım özelliklerine ve proje deneyimine dayanarak, Baidu kıdemli ön uç Ar-Ge mühendisi Wang Junting, farklı ihtiyaçlara ve amaçlara göre doğru görselleştirme grafiği türünün nasıl seçileceğini ve verileri doğru ve makul şekilde görüntülemek için grafiklerin nasıl kullanılacağını ayrıntılı olarak açıkladı. . Güncel endüstri vakalarını birleştirerek, herkesin daha iyi bir veri görüntüleme efekti elde etmesine yardımcı olmak için veri görselleştirme çalışma tasarımının yöntemlerini ve ilkelerini özetler.
Doğru grafiği seçin
Grafik veriler içindir ve veri türü, seçilebilecek grafik türünü belirler. Öncelikle verilerin kendisiyle başlamalı ve görüntüleme ihtiyaçlarını karşılayabilecek bir grafik türü seçmeliyiz. Her bir grafik türünün işlevine ve uygun veri türüne göre, grafik beş kategoriye ayrılır: karşılaştırma, ilişki, oran, dağılım ve eğilim ve her işlev türüne karşılık gelen grafiğin özet görünümü yapılır.
Kilit noktalara odaklanın
Kullanıcının dikkatini görselleştirmedeki en önemli alanlara odaklamak için bazı teknoloji ve tasarım yöntemlerini kullanın.Ana verilere odaklanmak için kontrast renkleri kullanabilir, farklı şekiller, konum değişiklikleri kullanabilir ve hareket efektleri ekleyebilirsiniz.
Makul ve ılımlı
Görselleştirme çizelgesine çok fazla dağınıklık ve anlamsız şey eklemekten kaçınmaya çalışın. Örneğin, çok fazla grafik öğesinden kaçının, aşırı tasarımdan kaçının ve çok fazla veriyi görüntülemek için uygun olmayan yöntemler kullanmaktan kaçının, bu da açıkça yorumlanamayan verilerle sonuçlanır.
Görsel eserlerin mekansal dengesini sağlamak
Verilerin grafik üzerinde nasıl sunulduğunu düşünün, görsel tasarım alanının etkin ve dengeli kullanımına dikkat edin, önemli unsurların merkez alanda olmasını sağlamaya çalışın, grafikteki elemanların boyutlarının makul olmasını ve grafik elemanlarının aralığının uygun olmasını sağlayın.
Örneğin, bir histogramın sütunları arasındaki makul genişlik ve boşluk, sütunlar arasındaki boşluğun tek bir sütunun genişliğinin iki katından daha az olmamalıdır.
Alışkanlıkları ve sağduyuyu takip edin
Verileri görüntülemek için simgeleri kullanırken, verileri yerleştirmek veya düzenlemek için bazı görsel alışkanlıkları izlemeniz gerekir, böylece kullanıcılar verileri daha doğru ve hızlı bir şekilde yorumlayabilir ve sağduyuyu ihlal eden bazı veri görüntüleme yöntemlerinden kaçınabilir.
Duygusal rezonans ve anlamsal rezonans kullanın
Renkler farklı duyguları iletmek için kullanılabilir, bu nedenle görselleştirmede satılan tatlıların oranı gibi farklı veri temaları için eşleşen renkleri seçin, tatlılar ve tatlı kullanıcı gruplarıyla eşleşen renkler kullanarak kullanıcının duygularını uygun şekilde uyandırabilir rezonans.
Rengin fonetik rezonansı, "Slupp etkisi" araştırmasına dayanmaktadır Sabit bir renge sahip nesneleri semantik rezonansla bir renge eşleştirmek, okuma verimliliğini ve doğruluğunu etkili bir şekilde artırabilir. Örneğin, kivi, muz, portakal ve çilekli dört çeşit meyvenin satışını göstermek için, meyve renkleri algımızla tutarlı olan sırasıyla dört yeşil, sarı, turuncu ve kırmızı rengi seçiyoruz. Dört meyvenin satışını göstermek için, sadece renge göre verileri hızlıca bulup okumamız gerekiyor.
Grafiğin "aldatıcı" olabileceğini unutmayın
Görselleştirme çalışmaları yaparken ve okurken, kullanıcıları yanlış yorumlamaya yönlendiren uygunsuz veri görüntüleme yöntemlerinden kaçınmaya özen gösterilmelidir.
sonuç olarak:
Yukarıdaki içerik, doğru grafiğin nasıl seçileceğine, daha iyi veri görüntüleme yöntemlerinin nasıl elde edileceğine, kullanıcının psikolojisinin ve kullanıcı alışkanlıklarının nasıl kullanılacağına ve bazı daha iyi veri ekranlarının özetlenmesine, kullanıcı deneyiminin daha iyi iyileştirilmesine ve daha iyi yorumlamaya yol gösterir. Veri yöntemleri ve öneriler. Bu öneriler ve teknikler, gelecekte görselleştirme çalışmalarının doğru seçilmesi ve tasarlanması için birçok yol gösterici öneme sahiptir.
Tema rengi
Ayrıca Wang Junting, ECharts'ın tema rengi eşleştirme tasarımındaki değerli deneyimini de paylaştı. Genel veri serilerinin beş ila altı renk kullanması gerekir ve kullanım senaryolarının çoğunu karşılamak için ECharts renginin çoğu ihtiyacı karşılamak için sekiz ila on iki renk sağlaması gerekir. Ve farklı veri serilerinin sayısı göz önüne alındığında, renk şemasıyla tutarlılık temelinde daha iyi bir görüntüleme yöntemi elde etmek için, karşılık gelen dokuz renkli şema ve altı renkli renk şemasının sırayla sağlanması önerilir. Ayrıca soğuk ve sıcak renkler sağlar. Ve verilerin artan değişimini temsil etmek için kullanılan gradyan rengi.
Özel dikkat gerektiren bir şey görme engelli kullanıcı grubunun ihtiyaçlarıdır Görme engelli grubun bu bölümünün doğru okuyabilmesi için görselleştirme şemasının ve görselleştirmenin çalışmasını sağlamalıyız.
Ek olarak, Wang Junting, renklerin çok yakın olduğu bazı mantıksız durumlar da gösterdi. Örneğin, birinci tür veri serilerinin renkleri çok yakındır, bu da tek bir veri serisinin tanımlanmasını imkansız hale getirir. İkinci veri dizisi arka plan rengine çok yakındır ve verinin kendisinin göze çarpması kolay değildir. Üçüncüsü, koordinat ekseni, performans başlığı, eksen ve arka plan renginin belirli verilerin boyutunu tanımlayamayacak kadar yakın olmasıdır.
Bu nedenle görsel renk seçiminin geniş bir parlaklık aralığına sahip olması önerilir. Açıklık ve renk aralığı ne kadar büyükse, o kadar fazla veri taşınabilir.
Stok verilerinin görüntülenmesi gibi bazı özel sektörlerin, milliyetlerin ve dinlerin veri gösterimi için kırmızı ve yeşilin özel anlamları vardır. Bu nedenle renk ve diğer unsurların kullanımında sektörün, etnisitenin veya dinin özelliklerinin sıkı bir şekilde takip edilmesi ve verilerin uygun ve makul bir şekilde sergilenmesi gerekmektedir.
4 WebGL, ECharts'a ne getiriyor
Son yıllarda, WebGL giderek daha popüler hale geldi Baidu kıdemli ön uç Ar-Ge mühendisi Shen Yi, ECharts GL'nin temel WebGL çerçevesi ClayGL ve gelecek için bazı planlara odaklanarak ECharts GL'de WebGL'deki girişimlerini paylaştı.
ClayGL
ClayGL, ECharts GL'nin temelini oluşturan grafik motoru ve aşamalı, yüksek performanslı bir WebGL geliştirme çerçevesidir. ClayGL'nin kullanımı kolaydır ve en az miktarda kodla hızlı bir şekilde 3B uygulamalar oluşturmanıza olanak tanıyan çok zengin bir özellik kümesi sağlar.Mikro çekirdek mekanizmasına bağlı olarak, en küçük paket boyutunun yüksek kaliteli oluşturmaya genişletilebilecek kadar küçük olması garanti edilebilir.
Kullanımı kolay
Boş satırları ve yorumları olan bu kod toplamda sadece 19 satırdır, dans eden bir robot modeli yükler ve ışıklar, gölgeler ve animasyonlarla 3 boyutlu bir uygulama oluşturur.
ClayGL çekirdek modülünün soyutlanması
Genel bir çerçeve olarak, ClayGL'nin ECharts GL gibi bir görselleştirme kitaplığı uygulama gibi çeşitli senaryoların ihtiyaçlarını karşılaması gerekir, ancak farklı senaryolar arasında kullanılabilecek işlevler tamamen farklıdır. Örneğin, görselleştirme bu 3B model yüklemesini gerektirmeyebilir Modül.
ClayGL, çekirdek modülleri özetler ve bu çekirdek modülleri daha sahne odaklı modüllerden ayırır.
ClayGL'deki temel işlevler şunları içerir:
-
Shader, Attribute Buffer ve diğer GPU kaynak yönetimi
-
Oluşturma yönetimi
-
Etkili çizim sağlayın
-
Matematik kütüphanesi
-
Matris, vektör, sınırlayıcı kutu hesaplama yapabilir
WebGL bir durum makinesi arabirimidir, WebGL arabirimlerinin çoğu yukarıdaki GPU kaynaklarını oluşturur ve sunar, çizim durumunu yönetir, vb. Bu durum makinesinin arabirimi çok karmaşık, ayrıntılıdır ve karmaşıksa çizim efektini yönetmek zordur. durum. Genellikle büyük bir kod parçasını yazmayı bitirdikten sonra, tarayıcı yenilenir ve hiçbir şey görmez ve hiçbir hata bildirilmez, bu nedenle neyin yanlış gittiğini görmek için yalnızca koda satır satır gidebiliriz.
ClayGL'in en önemli görevi bu kaynak ve durum yönetimi sorunlarını çözmektir. Örneğin, ana kod bir üçgen çizer ve en üst satır, oluşturucu gibi ES6 sözdizimi aracılığıyla bazı gerekli modülleri tanıtır. Ardından, esas olarak tüm işlemenin yönetiminden sorumlu olan bir oluşturucu oluşturun. Bir sonraki Geometri, tepe noktasının konumu gibi tüm köşe verilerinin yönetiminden sorumludur. Aşağıdaki Material ve Shader, köşe gölgelendiricisi ve piksel gölgelendiricisinin kodunu ve ayrıca dışarıya sağlanan bazı üniformaları yönetir. Son satır, bunları tüm oluşturucuya göndermek, oluşturucunun her tür önemsiz şeyle ilgilenmesine izin vermek ve grafikleri çizmektir.
Son olarak, Webpack 4 tarafından paketlenen kod gzip'den sonra yalnızca 22k'dir ve bu, THREE.js paketlendikten sonra yüzlerce K'dir.
En yaygın senaryoların entegrasyonu-App3D
Kutunun dışında kullanılmak isteyen birçok 3B uygulama için yalnızca yukarıdaki çekirdek modüller yeterli değildir.ChilGL, sahnedeki model yükleme, gölgeler, kamera kontrolü gibi belirli sorunları hızlı bir şekilde çözmek için çok sayıda işlevsel modül sağlar. Yerleşik malzemeler, iskelet animasyonu, vb. Arasında App3D, ortak sahnelerimiz için bu modüllerin bir entegrasyonudur. Yukarıdaki robot modelinin yüklenmesi App3D modülünü kullanır. Aşağıdakileri sağlar
-
Tüm uygulama döngüsünü yönetin
-
GPU kaynaklarının otomatik geri dönüşümü
-
Fare olaylarının tespiti ve yönetimi
-
Sahne nesnelerini, ışıkları, kameraları daha rahat bir şekilde oluşturun
-
Doku, model yükleme arayüzünü tanıtın
-
Dahili PBR malzemesi
-
Cubemap Ön Filtre
İşlevsel bekleme alanı, geliştiricilerin bir 3B uygulamayı daha havalı bir şekilde geliştirmelerine yardımcı olur.
ClayGL Gelişmiş Oluşturucu
Oluşturulan resmin daha zengin ışık ve gölgeye, daha zengin malzemelere, daha baştan çıkarıcı renklere, daha gerçekçi lenslere ve daha pürüzsüz resimlere sahip olması için. ClayGL, Advanced Renderer sağlar. Aşağıda, Advanced Renderer kullanılarak oluşturulan çeşitli materyallerin gölgelendiricilerini gösteren bir ekran bulunmaktadır.
5 VisualDL - ECharts ve Derin Öğrenme
VisualDL, Baidu tarafından yayınlanan bir derin öğrenme görselleştirme aracıdır. Model eğitmenlerinin daha iyi anlamasına ve hata ayıklamasına yardımcı olmak için model eğitim sürecindeki çeşitli parametreleri ve hesaplanan veri akış grafiğini (hesaplama grafiği) gerçek zamanlı olarak görselleştirebilir. Optimizasyon modeli. Baidu'da kıdemli bir ön uç Ar-Ge mühendisi olan Li Deqing, görselleştirmenin derin öğrenme alanındaki sorunları çözmek için nasıl kullanıldığını tanıtmak için VisualDL projesindeki pratik deneyimini birleştirdi.
VisualDL
VisualDL temelde derin öğrenme eğitim sürecinin "kara kutu" özelliğini çözer.Model eğitmenlerinin model yapısını anlamasına ve hatalarını gidermesine ve model eğitim süreci sırasında çeşitli hiperparametrelerin değişikliklerini görselleştirmesine yardımcı olmak için görselleştirmeyi kullanır.
VisualDL'nin dört işlevi
Skaler
Model eğitimi sırasında, eğitim süreci sırasında üretilen çeşitli sayısal bilgiler, parametrelerin genel değişim eğilimini gözlemlemek için uygun olan ve aynı görselleştirme görünümünde birden çok kesikli çizgi sunabilen bir çizgi grafik biçiminde görüntülenebilir; bu, kullanıcıların karşılaştırması ve analiz etmesi için uygundur. Birden çok parametre.
Aşağıdaki şekil, bir filtreleme işlevi içeren Skaler bir arayüzdür. Büyük bir model binden fazla katmana sahip olabileceğinden, birçok parametre olacaktır. Kullanıcılar yalnızca hata oranını veya doğruluk oranını görmek isteyebilir. VisualDL Bu nedenle, bir filtreleme işlevi sağlanır. İlk eğitim aşamasında gürültü parametresi değerlerini filtrelemek için yumuşak bir işlev de vardır.
Grafik
Kullanıcıların derin öğrenme modellerinin ağ yapısını anlamasına ve hata ayıklamasına yardımcı olun. Graph, farklı derin öğrenme çerçevelerinin model yapısının görselleştirme işlevini dolaylı olarak destekleyen ONNX'i destekler; bu, kullanıcıların ağ yapısı yapılandırma hatalarını gidermesi ve ağ yapısını anlamasına yardımcı olur.
Resim
Kullanıcılar, giriş görüntü verisi örneklerinin kalitesini ve evrişimli katmanın sonuçları veya GAN tarafından oluşturulan görüntüler gibi eğitimin ara sonuçlarını kolayca görüntüleyebilir.
Histogram
Histogram temel olarak, aşağıdaki şekilde gösterildiği gibi, zaman ve eğitim süreleri ile parametrelerin dağılımını görselleştirmek için kullanılır.
VisualDL'nin geleceği
Gelecekte, VisualDL, Etkileşimli Grafik, artı model yorumlanabilirliği, ses görselleştirme, metin görselleştirme vb. Uygulayacaktır. Aynı zamanda, ECharts ve PaddlePaddle arasındaki işbirliği, açık kaynak derin öğrenme alanında çaba göstermeye, daha zengin bir görselleştirme aracı ekosistemi oluşturmaya ve geliştiricilere gerçek pratik yardım sağlamaya devam edecek.
