Extension:Chart/zh

Category:GPL licensed extensions/zh
Chart
Category:Stable extensions/zh
Category:Tag extensions/zh
描述 Renders charts
作者 TODO
MediaWiki >= 1.45
GNU通用公眾授權條款3.0或更新版本
下載 Category:Extensions in Wikimedia version control/zh
README
  • $wgChartRequestSizeLimit
  • $wgChartProgressiveEnhancement
  • $wgChartTransformsEnabled
  • $wgChartServiceUrl
  • $wgChartCliPath
前往translatewiki.net翻譯Chart
問題 开启的任务 ·
Category:All extensions/zh

Chart擴展功能提供基本的互動式資料視覺化功能,以取代Graph擴展功能的部分(但非全部)功能。 此擴展功能目前正在為維基媒體的進行開發。 有關開發過程的更多詳細資訊,請參閱擴展功能:Extension:Chart/專案

此擴展功能支援以下圖表類型:

  • 折線圖
  • 面積圖
  • 柱狀圖
  • 圓餅圖


安裝

圖表擴展功能需要安裝 JsonConfig 擴展功能,以及下載 Chart Renderer JavaScript(實際上是 TypeScript)函式庫。

請參閱倉庫中的 README.md 檔案以獲取完整的設定說明。

對於維基媒體生產環境的使用,請參閱 wikitech:Kubernetes/Deployments 以獲取服務部署的一般說明。

如何使用

要呈現圖表,您必須定義一個圖表定義以與您想要呈現的資料來源關聯。 圖表定義結構為相對簡單的 JSON 檔案;語法詳細資訊請參閱擴展功能:Extension:Chart/Specification

此範例中的所有圖表都可以從同一個資料來源呈現: Data:Chart Example Data.tab,一個虛構的資料集。 這些頁面的範例內容可以在 sample 目錄中找到。

{
    "license": "CC0-1.0",
    "version": 1,
    "source": "Chart Example Data.tab",
    "type": "line",
    "title": {
        "en": "Example Chart Title"
    },
    "subtitle": {
        "en": "Example Subtitle"
    },"xAxis": {
        "title": {
        	"en": "Example X Axis Title"
        },
        "format": "none"
    },
    "yAxis": {
        "title": {
            "en": "Example Y Axis Title"
        },
        "format": "none"
    },
    "mediawikiCategories": [
        {
            "name": "Example category",
            "sort": "Its sortkey"
        }
    ],
    "transform": {
        "module": "Optional lua module for data transforms",
        "function": "transform_func",
        "args": {
            "arg_name": "arg_value"
        }
    }
}

一旦定義了圖表,您就可以使用 #chart 解析器函式輕鬆呈現它。 在這種情況下,圖表資料在 Data:Chart Example Data.tab 中定義,圖表本身在 Data:Example.Line.chart 中定義:

{{#chart:Example.Line.chart}}

請注意,圖表可以是通用的,並可以與不同的資料來源重複使用,如下所示:

{{#chart:Population through years.chart
|data=Population of USA.tab
}}
{{#chart:Population through years.chart
|data=Population of UK.tab
}}
{{#chart:Population through years.chart
|data=Population of Poland.tab
}}


目前圖表的功能有限。 希望在測試、討論和評估之後,能夠找到既不損害可訪問性、設備特定呈現或安全性的自訂解決方案。

大小

目前,圖表佔據您放置它們的整個容器寬度。

最終目標是確保無論在什麼設備上閱讀,圖表都能清晰呈現;更多詳細資訊請參閱 T376845

主題

目前,圖表僅限於單一預設色彩調色板。 此調色板經過精心設計,考慮了可訪問性。 這些色彩選擇背後的思考可以在 T369863 中探索。

有些圖表確實需要特定的色彩主題,例如,用於表示與政黨相關的資料。 如何最好地支援這種類型的自訂而不損害有可訪問性需求(例如色盲)的讀者使用它們的能力,這仍然是一個開放的問題。

注意事項

請注意,雖然圖表目前呈現 SVG 輸出,可以透過 TemplateStyles 進行樣式設定,但請注意,與 SVG 元素相關的樣式應被視為穩定的,因為它可能隨時更改。 請不要依賴 CSS 來改變圖表外觀,因為這可能導致未來圖表無法正常運作,或可能干擾改變字體大小的可訪問性功能以及暗色模式等功能。

國際化

圖表只能嵌入到 wiki 的內容語言中;因此,例如「uselang」查詢字串(例如 ?uselang=es)不會影響圖表。

圖表格式支援以不同語言定義標題和標籤等文字,以便同一圖表可以在不同語言的中使用。 請參閱此範例,展示支援多種語言的圖表在西班牙語中的顯示。

已知問題

請參閱Charts Phabricator 看板的篩選視圖

圖表類型

對於所有圖表,資料預期以列的形式排列,第一代表x-axis,後續代表y-axis上的系列或曲线。

折線圖

%support日期010203040501993/9/91993/9/261993/10/19ElvesEntsOrcsHobbitsTrollsExample Line ChartExample subtitle 原始資料
This is an example of a line chart.

In the following example, the {{#chart| }} is wrapped in an {{Image frame }} container to set the chart’s width and include a caption. A link is also provided to the raw tabular data, where information on data sources may be found:

{{image frame
|content={{#chart:Example.Line.chart}} [[commons:Data:Chart Example Data.tab|'''Raw data''']]
|width = 340
|caption = This is an example of a line chart.
}}

See the result in this section.

柱狀圖

Here the chart spans the full width of the page content area:

{{#chart:Example.Bar.chart}} <center>[[commons:Data:Chart Example Data.tab|'''Raw data''']]</center>

This results in:

%supportDate010203040501993/9/91993/9/261993/10/19ElvesEntsOrcsHobbitsTrollsExample Bar ChartExample subtitle
原始資料


面積圖

%supportDate0204060801001993/9/91993/9/261993/10/19ElvesEntsOrcsHobbitsTrollsExample Area ChartExample subtitle
原始資料

圓餅圖

圓餅圖是一種特殊的圖表類型,資料來源可能需要修改才能適當呈現。

讀取資料時,任何非數字(例如 x 軸)都將被丟棄,所有的總和將在圖表上表示。

例如,當多描述A、B和C 在多個日期(例如1月1日和1月2日)的值時,圓餅圖中A的扇形將代表所有A的值在這些日期的總和。

ElvesEntsOrcsHobbitsTrollsElvesEntsOrcsHobbitsTrollsExample Pie ChartExample subtitle
原始資料


尋找現有圖表

可以在文章中使用的圖表存放在維基共享資源上,可以使用 MediaWiki 分類進行追蹤。

此查詢可以用作代理來尋找其他人製作的圖表並貢獻翻譯。

在任何特定上使用圖表的頁面集合可以在MediaWiki:chart-render-category MediaWiki:Chart-error-category定義的分類中找到(在此上為Category:Pages using the Chart extension Category:Pages using the Chart extension with rendering errors)。 請確保將您的 wiki 分類連接到d:Q131382738d:Q131406605,以便於跨搜尋。

從 Graph 擴展功能遷移

Please see the category pages with disabled graphs in various languages for old graphs that need to be migrated to the Charts extension. Some have however already been deleted without replacing them with new charts. The list can be compared with an archived list of the first 200 out of 23,811 English Wikipedia pages with disabled graphs from 2023, soon after the templates were added to that category, and corresponding in other languages.

技術文檔

考慮到:的問題,關於新擴展功能的所有決定都經過仔細考慮,希望建立對其替代品的信任和信心。

到目前為止,技術決定記錄於程式碼倉庫的 /doc/adr 資料夾中。

Error Monitoring

Failing .chart pages are automatically stored in commons:Category:Pages using the Chart extension with rendering errors. Wiki pages with faulty .charts are automatically stored in using the Chart extension with rendering errors in different language versions.

Errors with client side chart rendering will be logged to logstash. (Only for developers.)

Tools for producing the charts

There are several conceivable methods to semi-automatically produce and edit the charts and their tabular data:

  • The script graphDataImport can be used in the web browser to extract data from existing graph wikitext and similar, and convert it to a .tab page, a .chart definition page and new wikitext.
  • Generative AI can be prompted to extract data from existing graph wikicode and tables, and convert it to .tab and .chart pages and generate new wikicode, according to given specifications. It can also provide translation of titles, and be utilized to extend and update the .tab page with new data.
  • The gadget TabularImportExport can convert Excel and .csv files to and from the .tab pages. You can activate it via your Commons preferences.
  • The JSON "edit as table" user interface (part of the Jsonconfig extension) is available from the .tab edit page.
  • Some bots can periodically import statistics from the web, or from existing Wikipedia graphs, to .tab or .chart pages, upon request. Such bots include DPLA bot and SLiuBot.
  • GraphBot ports English Wikipedia graphs to charts.

See also

Category:Extensions used on Wikimedia/zh#Chart/zh
Category:All extensions/zh Category:Extensions in Wikimedia version control/zh Category:Extensions used on Wikimedia/zh Category:GPL licensed extensions/zh Category:LinksUpdateComplete extensions/zh Category:PageSaveComplete extensions/zh Category:Pages using the Chart extension Category:ParserFirstCallInit extensions/zh Category:Stable extensions/zh Category:Tag extensions/zh