Extension:Graph
Uyarı: Burada açıklanan kod veya yapılandırma, bir büyük güvenlik riski oluşturur. Sistem hizmetlileri: Bu güvenlik sorunu çözülene kadar kullanmamanız önerilir. Sorun: Siteler arası betik çalıştırma saldırısına açıktır, çünkü kullanıcı girdisini doğrudan tarayıcıya iletir. Bu kullanıcı hesaplarının kaçırılmasına yol açabilir, diğer şeylerin yanında. See görev T336556 for more information. Çözüm: özel bir anlamı olan HTML, kullanıcı girişini kesin olarak doğrulayın ve/veya tüm karakterlere kaçmayı uygulayın |
Bu uzantı şu anda etkin bir şekilde korunmuyor! Yine de çalışabilse de, hata raporları veya özellik istekleri büyük olasılıkla göz ardı edilir. Bu uzantıyı geliştirme ve sürdürme görevini üstlenmek istiyorsanız, depo sahipliği isteyebilirsiniz. Nezaket gereği yazarla iletişime geçmek isteyebilirsiniz. Ayrıca bu şablonu kaldırmalı ve kendinizi sayfanın {{Extension }} bilgi kutusunda uzantıyı korurken listelemelisiniz. |
Graph Sürüm durumu: bakımsız |
|
---|---|
Uygulama | Etiket , ContentHandler |
Açıklama | Veriye dayalı grafikler |
Yazar(lar) | |
MediaWiki | >= 1.43 |
Lisans | MIT Lisansı |
İndir | |
|
|
Quarterly downloads | 32 (Ranked 108th) |
Public wikis using | 884 (Ranked 281st) |
Translatewiki.net adresinde mevcutsa, Graph uzantısını çevirin | |
Sorunlar | Açık görevler · Hata bildir |
Graph uzantısı, <graph>
bir etiketin çubuk grafikler, pasta grafikler, zaman çizelgeleri ve histogramlar (demo) gibi veri görselleştirmelerini Vega tabanlı grafik.
Genel bilgi
Graph uzantısı, güçlü Vega tabanlı grafiklerin viki sayfalarına eklenmesini sağlar. Grafikler etkileşimli olabilir. Graphs can be interactive.
Grafik eklemenin en kolay yolu, {{Graph:Chart}} gibi hazır bir şablon kullanmaktır. Bu şablonlar tüm Vega karmaşıklıklarını gizler. Deneyimli kullanıcılar, grafikler geliştirmek için Graph Deneme Tahtası kullanabilir. Graph deneme tahtası, JSON'a ek olarak viki şablonu sözdizimine izin verir. The extension integrates with VisualEditor, providing a simple tool/wizard which generates basic graphs, by entering values directly to the editor.
Yararlı bağlantılar
- Vega 2 belgesi – Vega 2 belge sayfalarını geri yükledi.
- Kılavuz - vikide grafiklerin nasıl kullanılacağına dair genel öneriler.
- Etkileşimli Eğitim - sıfırdan karmaşık bir etkileşimli grafiğin nasıl oluşturulacağı adım adım talimatlar
- Demo sayfası - birçok örnek ve kullanım hilesi için.
- TechTalk Video - Lyra editörünün harika bir demosunu içeren Graph uzantısını tartışan bir WMF teknoloji tartışması (ayrıca laboratuarlara yüklenmiştir).
- Vega gelecek yetenekleri (Keynote, Jeffrey Heer) ile de ilgilenebilirsiniz.
- Geliştiriciler için Vega - tüm Vega kaynakları arasında en iyi yer
- Vega 2.0'a geçiş
- Etkileşimli Vega'ya video tanıtımı
Kurulum
- JsonConfig uzantısı gereklidir
- Dosyaları indirin ve
extensions/
klasörünüzdekiGraph
adlı dizine yerleştirin.
Developers and code contributors should install the extension from Git instead, using:cd extensions/
git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/Graph - LocalSettings.php dosyanızın altına aşağıdaki kodu ekleyin:
wfLoadExtension( 'Graph' );
- Yapıldı – Uzantının başarıyla yüklendiğini doğrulamak için vikinizde Special:Version seçeneğine gidin.
Vagrant kurulumu:
- Vagrant kullanıyorsanız,
vagrant roles enable graph --provision
ile yükleyin
Ek yapılandırma ayarları
en.wiki gibi bir üretim ortamını çoğaltmak istiyorsanız, aşağıdaki adımları tamamlamanız gerekir:
- Install Scribunto , Imagemap and TemplateStyles , and enable SVG uploads
- If you use vagrant, you can use
vagrant roles enable --provision scribunto imagemap templatestyles svg
- If you use vagrant, you can use
- Import mediawiki.org's Module:Graph, Module:Graph/doc, Template:Nowrap and Template:Nowrap/styles.css (export link)
- Import enwiki's Module:Chart and Module:Chart/Default colors (export link)
- Import the file File:Circle_frame.svg
Debugging graphs and porting graphs from Vega 2 to Vega 5
A sandbox is provided at Special:GraphSandbox that works similar to the Vega graph editor. The MediaWiki tool includes compatibility code that maps older Vega schemas to the currently enabled version. Inserting an old schema in the main text area will print a modified and modernized schema underneath the graph where possible.
Similar to vega.github.io/editor, the Vega object can be inspected via the VEGA_DEBUG
JavaScript global.
See Vega's debugging guide on how to use it.
Migrating schemas from older Vega versions
Previously Graph supported Vega 2. You can paste the JSON of graphs in http://vega.github.io/vega-editor/?mode=vega to see how they previously rendered for comparison with Vega 5.
Special:GraphSandbox (for latest code see the beta cluster version of the sandbox) can be used to map older schemas to new schemas. Copy the old schema into the main textarea and the updated schema will appear in the text area below the graph. Copy the new schema into your code.
Grafik örnekleri
Birçok örnek ve kullanım püf noktası için Demo sayfasına bakın.
Kullanıcı tanımlı geri döndürme
İstemci tarafında oluşturmayı kullanırken, noscript
kullanıcılara statik bir geri dönüş resimi sağlamak için Wikimedia Commons kullanmak mümkündür.
Bu, sunucu tarafında işleme sağlamak için yeni bir hizmet devreye girene kadar geçici bir çözümdür.
Kullanıcı önce statik grafiği Wikimedia Commons'a yüklemelidir.
Yedek resimlerin iki değişkeni fallback
ve fallbackWidth
.
fallback
, bir Wikimedia Commons dosya adı ile ilgilidir.
fallbackWidth
, piksel cinsinden yedek resim genişliğidir.
Bu değişkenler aşağıdaki şekilde grafikten geçirilir:
<graph fallback="Graph test seddon.png" fallbackWidth=450>
Module:Graph gibi Lua modülleri kullanıldığında, bu değişkenler etiket işlevi aracılığıyla sağlanabilir. Template:Graph:Chart uyarlanmış olsaydı, şöyle görünürdü:
{{safesubst:#tag:graph|{{safesubst:#invoke:Graph|chartWrapper}} | fallback = {{{fallback|''}}} | fallbackWidth= {{{fallbackWidth|''}}} }}
Daha sonra aşağıdaki şekilde bir şablonda kullanılacaktır:
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y
|type=rect|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9|fallback=Graph test seddon.png|fallbackWidth=450}}
fallbackWidth sağlanmadıysa ancak bir resim tanımlandıysa, uzantı genişliği sağlanan grafik genişliğinden türetecektir. Bunun nedeni, oluşturulan resim genişliğinde ve gerçek resim genişliğinde sıklıkla bir fark olmasıdır.
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y
|type=rect|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9|fallback=Graph test seddon.png}}
Dış veriler
HTTP(S) protokolü, grafik için veri almak için kullanılamaz.
Bunun yerine, wikiraw:
, wikiapi:
ve diğerleri gibi özel viki protokollerinden birini kullanın.
Graph uzantısı, bu protokollerin nasıl çözüldüğünü kontrol etmek için GraphAllowedDomains
ayarını kullanır:
Note that because queries rely on the structure of wikibase items, they may suddenly stop working if the underlying data is edited and changes, as it may yield incomplete, empty or invalid data that can't be used to create a graph.
In these cases the graph will end up empty (see phab:T168601).
$wgGraphAllowedDomains = [
# http + https anahtarları, harici veri erişimine izin verilen tüm alanları listeler.
# Burada listelenen herhangi bir alan adı, tüm alt alan adlarına da otomatik olarak izin verir.
# 'wikiraw' gibi özel protokoller, hangi protokolün kullanılacağını belirlemek için onu kullanır.
# Bu şekilde wikiraw://en.wikipedia.org/Page, https://en.wikipedia.org/w/api.php?action=query&titles=Page&... için bir api isteği olur
'https' => [ 'wikipedia.org', 'wikimedia.org', ... ],
'http' => [ 'wmflabs.org', ... ],
# wikirawupload için izin verilen etki alanlarının listesi: protokol erişimi.
# Yalnızca tam eşleme, alt alan adı yok.
'wikirawupload' => [ 'upload.wikimedia.org' ],
# wikirawupload ile aynı ancak Vikiveri Sparql sorguları için
'wikidatasparql' => [ 'query.wikidata.org' ],
];
Dahili
Ayrıştırırken, Graph uzantısı tüm şablon parametrelerini/ifadelerini genişletir ve kimlikler için grafik karmaları kullanarak tüm grafik tanımlarını ParserOutput içinde saklar.
Graph uzantısı, grafiklerin gitmesi gereken sayfaya HTML ekler, öznitelik olarak graph-id ile bir <div>
.
Örnek:
<div class="mw-graph" data-graph-id="72edc224f0a10b343c1e84f63dbfc97cac9bc957">
</div>
Graph uzantısı, Vega kitaplığını içeren sayfaya bir ext.graph
ResourceLoader JavaScript modülü ekler ve grafik tanımlarının JSON'unu bir JavaScript mediawiki.config
adlı değişkene wgGraphSpecs
koyar.
İstemci bu modülü yükledikten sonra, Vega JavaScript kitaplığı her <div>
bir HTML tuvali ile doldurur ve statik resminin yerini alarak grafiği içine çizer.
Güvenlik Özellikleri
<graph>
, güvenilmeyen veri kaynaklarına başvurmaya izin vermeyecek şekilde yapılandırılabilir (örneğin, Wikimedia yalnızca Wikimedia sitelerinden gelen verilere izin verir).
Lisans
Vega kitaplığı, kullanmamız için kabul edilebilir [$url BSD lisansla değiştirilmiş] altında dağıtılmaktadır.
“ | Bu, bazı küçük (kabul edilebilir) değişikliklerle birlikte BSD lisansının bir kopyası gibi görünüyor. İdeal olarak lisansta böyle değişiklikler yapmasalar da, onu kullanmak bizim için bir sorun değil. İnsanların lisanslarında bu değişiklikleri yapmaması, lisansın açık kaynak kullanımı için güvenli olup olmadığı konusunda kafa karışıklığını (bunun gibi) önlemek için daha iyidir. | ” |
—Stephen LaPorte |
Yapılandırma
wgGraphAllowedDomains
See the section on external data.
Görsel Düzenleyici modülü
Graph uzantısı, 2015 yazından bu yana, Görsel Düzenleyici içinde grafik düzenlemeyi sağlayan bir modül (ext.graph.VisualEditor) ile birlikte gelir.
Bu modül, bir Google Summer of Code 2015 projesinin sonucudur. Ayrıntılar için phab:T89287 sayfasına bakın.
Bu modül, kullanıcıların yabancı uzantı düğümlerinin aksine, Görsel Düzenleyici içindeki grafikleri görmelerine olanak tanır. Ayrıca, kullanıcılar bir grafiğin türünü, verilerini ve dolgusunu düzenlemek için bir iletişim kutusu açabilir. Kullanıcı arabirimi ayrıca, daha ileri düzey kullanıcıların kullanıcı arabirimi tarafından desteklenmeyen ayarları değiştirmek istemesi durumunda klasik vikimetin düzenleyiciye geçmek zorunda kalmadan VE içinde bir grafiğin ham JSON belirtimini düzenlemenin bir yolunu sunar.
Bu ilk adım, Görsel Düzenleyici içinde grafik düzenleme ile birçok olasılık için bir atlama taşı görevi görür ve modülün geliştirilip genişletilebileceği birçok yol vardır.
Bozuk grafiklerde sorun giderme
Grafiklerle ilgili hatalar, geliştirici konsoluna kaydedilir.
Hata: Hatalı yapıcı bağımsız değişkenleri (phab:T277906)
Düzeltmek için: filepath:Earthmap1000x500compac.jpg olarak filepath:Earthmap1000x500.jpg ile değiştirin
TypeError: undefined is not an object (evaluating 'datum.firstYear.value')
To fix: Make sure you have not set default as null
Ayrıca bakınız
- Diagram extensions
- Plotly — Açık kaynak JavaScript grafik kitaplığı (3 boyutlu grafik yetenekleri ile)
- D3 — Veriye Dayalı Belgeler
This extension is included in the following wiki farms/hosts and/or packages: This is not an authoritative list. Some wiki farms/hosts and/or packages may contain this extension even if they are not listed here. Always check with your wiki farms/hosts or bundle to confirm. |
- Pages with disabled graphs
- Extensions with XSS vulnerabilities/tr
- Unmaintained extensions/tr
- Tag extensions/tr
- ContentHandler extensions/tr
- MIT licensed extensions/tr
- Extensions in Wikimedia version control/tr
- OutputPageParserOutput extensions/tr
- ParserFirstCallInit extensions/tr
- All extensions/tr
- Extensions included in Canasta/tr
- Extensions included in WikiForge/tr
- Graph extensions/tr
- Extensions with VisualEditor support/tr
- Discovery/tr