Ödeme örneğinden başlayarak çapraz filtre (https://github.com/square/crossfilter/wiki/API-Reference) Her ödeme türü için bir Çizgi Çizelgesi olan bir Kompozit Grafiği nasıl oluşturabiliriz (sekme, vize, nakit)?Çaprazfiltreden Bileşik Grafik Örneği
9
A
cevap
1
type
numaralı her ödemede totals
numaralı ödemeyi (date
boyutu) görüntülemek istediğinizi varsayıyorum.
var payments = crossfilter([...]);
var dateDimension = payments.dimension(function(d) { return new Date(d.date); });
her ödeme türü için ödeme toplamları (sekme, vize, nakit)
var totalForType = function(type) {
return function(d) {
return d.type === type ? d.total : null;
};
};
var tabTotalsGroup = dateDimension.group().reduceSum(totalForType('tab'));
var visaTotalsGroup = dateDimension.group().reduceSum(totalForType('visa'));
var cashTotalsGroup = dateDimension.group().reduceSum(totalForType('cash'));
kompozit grafiği tanımlayın ve kompozit grafik kapsamında 3 çizgi grafikleri tanımlamak için grupları kullanabilirsiniz grubu oluşturun .
var compositeChart = dc.compositeChart('#composite-chart');
compositeChart
...
.x(d3.time.scale().domain([new Date("2011-11-14T16:15:00Z"), new Date("2011-11-14T17:45:00Z")]))
.dimension(dateDimension)
.compose([
dc.lineChart(compositeChart).group(tabTotalsGroup, 'tab').colors(['#ffaa00']),
dc.lineChart(compositeChart).group(visaTotalsGroup, 'visa').colors(['#aa00ff']),
dc.lineChart(compositeChart).group(cashTotalsGroup, 'cash').colors(['#00aaff'])
]);
dc.renderAll();
için tam bir örnek: http://plnkr.co/edit/rhDURrDfeSvVqEnQR9L1?p=preview
+0
Mükemmel, teşekkürler. Bu bağlamda biraz daha mantıklı bir çubuk grafiğe değiştirdim. Bu bir başlangıç noktası olarak, aslında gerçekleştirmeye çalıştığım şeye adapte edebildim. –
İlgili konular
- 1. Bileşik
- 2. Bileşik Endeksi
- 3. Facebook Grafik API'sı ile popup kimlik doğrulamanın basit bir örneği
- 4. D3.js'de basit bir dağılım örneği örneği?
- 5. Bileşik literalde eksik tür
- 6. Bileşik değişmezleri Standard C++?
- 7. Dizideki bileşik türünü güncelle
- 8. SQLite hatası: bileşik SELECT
- 9. Bileşik filtre desteği Nesne
- 10. Bileşik sınıf adları
- 11. JPA Bileşik Anahtar + Sıra
- 12. Apache Cassandra'daki Bileşik Endeksler
- 13. Bileşik anahtar, karşılaştırma
- 14. Postgres sıralama bileşik anahtar
- 15. Sayfalandırma ile bileşik filtreleme AngularJs
- 16. sınıf örneği örneği
- 17. örneği
- 18. SoapUI API: WsdlProject 'bileşik' proje yükleyemiyor
- 19. Bir yazım örneği örneği ve
- 20. Django: (yalnızca) bileşik anahtarın (yalnızca)
- 21. Bash testinde bileşik koşulların grupları
- 22. Bileşik benzersizliğini MySQL'de nasıl uygularım?
- 23. Bileşik doğal anahtar DbSet.AddOrUpdate içinde
- 24. Symfony2'nin bileşik formu, tarlalar
- 25. Mongo'daki Bileşik Dizinler ve sıralama
- 26. Bileşik anahtar sorunu Realm Swift
- 27. Google Grafik Araçları - yığılmış çubuk grafik
- 28. Scala'da iç içe sıfırlama örneği örneği
- 29. paylaşımı Grafik
- 30. grafik çizin
+1. Kompozit grafik kullanarak nasıl oluşturulacağı konusunda bir kayıp yaşıyorum. Sanırım bu seri grafiğini kullanarak yapılabilir. Ancak uzman tavsiyesi için bekleyeceğim –
Şu anda bir kompozit bir araba örneği arıyorum çünkü gerçekten istediğim şey iki diziyi grafiksel olarak çizmek ve .useRightYAxis (true) kullanarak farklı Y ile iki veri kümesini karşılaştırabiliyorum. eksen değerleri. –