內容簡介
這個 WordPress 外掛可以讓你輕鬆地在你的網站上加入互動式圖表，使用 global-warming.org API 和 ChartJs 函式庫的資料。該外掛內建機制，如伺服器快取、延遲載入和客戶端快取，一起作用以減少每個圖表檢視所造成的網路或硬體使用所產生的二氧化碳排放量。
使用方式
當外掛安裝並設定完成後，你可以在你的網頁與文章中加入圖表短碼。以下為可用的短碼：
[greencharts-chart type="temperature"]：顯示全球溫度隨時間變化的折線圖。
[greencharts-chart type="co2"]：顯示各國二氧化碳排放量的折線圖。
[greencharts-chart type="methane"]：顯示全球甲烷氣體排放量的折線圖。
[greencharts-chart type="oceanwarming"]：顯示全球海洋暖化的折線圖。
你可以使用 ChartJs 函式庫的選項和回呼函式自訂圖表的外觀，並以 WordPress 的 js 鉤子製作。欲知詳細資訊，請參考 ChartJs 說明文件。
支援
如果你在使用外掛時有任何問題，請在 Github 上開啟問題或透過電子郵件聯絡我們。我們將盡力協助你。
貢獻
如果你想要為這個外掛的開發作出貢獻，請 fork 該存儲庫並提交拉取請求。
免責聲明
此外掛按「現狀」提供，並不附帶任何形式的保證，無論是明示或暗示的。Global warming.org 和 ChartJs 函式庫不贊同此外掛，也不對因使用該外掛而導致的任何損害或損失負責。
外掛鉤子
php [docs](https://developer.wordpress.org/plugins/hooks/)
使用 apply_filters 函式來將一個暫存值設定為 false。這將禁用 greencharts 資料的快取。
apply_filters('greencharts_transient_disableCache', false);
使用 apply_filters 函式來設定暫存的壽命。該過濾器可用於修改暫存在設置之前的壽命。該暫存用於快取遠端 API 請求，預設的暫存時間為 1 個月。壽命應該是秒數，請參閱 WordPress 的 $expiration 參數的 set_transient 函式
apply_filters('greencharts_transient_lifespan', $this->lifespan, $this);
使用 apply_filters 函式將日誌記錄器設為 true。這將啟用 greencharts 資料的記錄功能。
apply_filters('greencharts_logger_shouldLog', defined('WP_DEBUG') && true === WP_DEBUG);
使用 apply_filters 函式將冗長值設為 true。這會啟用 greencharts 資料的冗長記錄。
apply_filters('greencharts_logger_shouldBeVerbose', false);
使用 apply_filters 函式修改圖表使用的 ajax 回應資料。如果你需要新增更多圖表，這很有用。
apply_filters('greencharts_ajax_chartsApi',$charts->getChartsDataByType($type), $type);
js [docs](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-hooks/)
記得在 greencharts js 載入之前使用 wp.hooks.addFilter。
此程式碼對 chartConfig 物件應用篩選器，該物件用於在畫布上創建一個 greencharts_js_chartConfig 圖表。該篩選器用於修改 chartConfig 物件，以便創建自定義圖表。
外掛標籤
開發者團隊
原文外掛簡介
This WordPress plugin allows you to easily add interactive charts to your website, using data from the global-warming.org API and the ChartJs library. The plugin has built-in mechanisms such as server cache, lazy load and client cache, which work together to reduce the CO2 emissions caused by internet/hardware usage per chart view.
Usage
Once the plugin is installed and configured, you can add chart shortcodes to your pages and posts. The available shortcodes are:
[greencharts-chart type="temperature"]: Displays a line chart of global temperature change over time.
[greencharts-chart type="co2"]: Displays a line chart of CO2 emissions by country.
[greencharts-chart type="methane"]: Displays a line chart of global methane gas emissions.
[greencharts-chart type="oceanwarming"]: Displays a line chart of global ocean warming.
You can customize the appearance of the charts using the ChartJs library’s options and callbacks using wordpress js hooks. Visit ChartJs documentation for more information.
Support
If you have any issues with the plugin, please open a Github issue or contact us via email. We will do our best to assist you.
Contribution
If you would like to contribute to the development of this plugin, please fork the repository and submit a pull request.
Disclaimer
This plugin is provided “as is” without warranty of any kind, either express or implied. Global warming.org and ChartJs library do not endorse this plugin and are not responsible for any damages or losses that may result from its use.
Plugin hooks
php [docs](https://developer.wordpress.org/plugins/hooks/)
Use the apply_filters function to set a transient value to false. This will disable caching for the greencharts data.
apply_filters('greencharts_transient_disableCache', false);
Use the apply_filters function to set the lifespan of transient. The filter can be used to modify the lifespan of the transient before it is set. The transient is used to cache remote API requests, default transient is 1 month. The lifespan should be the number of seconds, see $expiration parameter of wordpress set_transient function
apply_filters('greencharts_transient_lifespan', $this->lifespan, $this);
Use the apply_filters function to set a logger value to true. This will enable logging for the greencharts data.
apply_filters('greencharts_logger_shouldLog', defined('WP_DEBUG') && true === WP_DEBUG);
Use the apply_filters function to set a verbose value to true. This will enable verbose logging for the greencharts data.
apply_filters('greencharts_logger_shouldBeVerbose', false);
Uses the apply_filters function to alter ajax resposes data used by charts. Useful if you need to add more charts.
apply_filters('greencharts_ajax_chartsApi',$charts->getChartsDataByType($type), $type);
js [docs](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-hooks/)
Remember to use wp.hooks.addFilter BEFORE greencharts js load.
This code applies a filter to the chartConfig object which is used to create a greencharts_js_chartConfig chart on the canvas. The filter is used to modify the chartConfig object so that it can be used to create a customized chart.
globalHooks.applyFilters("greencharts_js_chartConfig", chartConfig, canvas);
// usage example:
wp.hooks.addFilter(
"greencharts_js_chartConfig",
"defaultHooks",
(chartConfig, canvas) => {
console.log("THEME FILTER", chartConfig, canvas.dataset.type);
chartConfig.data.datasets[0].backgroundColor = "blue";
return chartConfig;
}
);
This code applies a filter to the debug var that control operations logging. The filter is set to false, meaning that any code related to greencharts_js_debug will not be logged in the browser js console.
globalHooks.applyFilters("greencharts_js_debug", false),
// usage example:
wp.hooks.addFilter("greencharts_js_debug", "defaultHooks", () => true);
This code applies a filter to the “greencharts_js_errorMessage” string. The filter takes in the string, along with the data and error objects, and returns a modified version of the string. This is useful for customizing error messages based on different scenarios.
globalHooks.applyFilters(
"greencharts_js_errorMessage",
"Something goes wrong during chart loading. Please retry later",
data,
error
);
This code applies a filter to the text of a “Reset zoom” button on a canvas element. This allows developers to customize the text of the button.
options.globalHooks.applyFilters(
"greencharts_js_resetZoomButtonText",
"Reset zoom",
canvas
);
This code applies a filter to the text of a “Load chart” button on a canvas element. This allows developers to customize the text of the button.
options.globalHooks.applyFilters(
"greencharts_js_loadButtonText",
"Load chart",
canvas
);
Assets attribution
– Image by (rawpixel.com)[https://www.freepik.com/free-vector/social-media-analysis-design-graphs_16323246.htm#query=minimal%20charts&position=3&from_view=search&track=ais] on Freepik
– Image by (Freepik)[https://www.freepik.com/free-vector/green-energy-buildings_713297.htm#query=eco%20green&position=31&from_view=search&track=ais]
