From 6c964fb1c89a8d15f829c1184a80fd48db53291e Mon Sep 17 00:00:00 2001 From: Gabriel Octavio Vargas Vargas Date: Sun, 12 Jan 2025 17:41:09 -0500 Subject: [PATCH] add Spanish translations --- components/helper/contributors.ts | 6303 ++++++++++++++++- components/partials/Navbar.vue | 11 +- components/partials/Navbar/en.vue | 2 +- components/partials/Navbar/es.vue | 145 + components/partials/Navbar/zh.vue | 2 +- contents/.prettierrc | 2 +- contents/es/basics/download.md | 36 + contents/es/basics/help.md | 40 + contents/es/basics/import.md | 159 + contents/es/basics/inspiration.md | 6 + contents/es/basics/release-note/5-2-0.md | 471 ++ contents/es/basics/release-note/5-3-0.md | 659 ++ contents/es/basics/release-note/5-4-0.md | 49 + contents/es/basics/release-note/5-5-0.md | 173 + contents/es/basics/release-note/5-6-0.md | 75 + contents/es/basics/release-note/v5-feature.md | 196 + .../basics/release-note/v5-upgrade-guide.md | 288 + contents/es/best-practices/aria.md | 79 + contents/es/best-practices/canvas-vs-svg.md | 64 + .../es/best-practices/design/color-enhance.md | 65 + contents/es/best-practices/mobile.md | 0 .../specification/bar/basic-bar.md | 41 + .../specification/bar/bi-directional-bar.md | 27 + .../specification/bar/grouped-bar.md | 20 + .../specification/bar/stacked-bar.md | 21 + .../es/best-practices/specification/funnel.md | 36 + .../es/best-practices/specification/gauge.md | 17 + .../best-practices/specification/line/area.md | 23 + .../specification/line/basic-line.md | 36 + .../specification/line/stacked-area.md | 45 + .../specification/pie/basic-pie.md | 47 + .../es/best-practices/specification/radar.md | 29 + .../specification/scatter/bubble.md | 27 + .../specification/scatter/scatter.md | 35 + contents/es/concepts/axis.md | 260 + contents/es/concepts/chart-size.md | 90 + contents/es/concepts/coordinate.md | 0 contents/es/concepts/data-transform.md | 660 ++ contents/es/concepts/dataset.md | 535 ++ contents/es/concepts/event.md | 369 + contents/es/concepts/legend.md | 143 + contents/es/concepts/options.md | 0 contents/es/concepts/series.md | 0 contents/es/concepts/style.md | 356 + contents/es/concepts/tooltip.md | 0 contents/es/concepts/visual-map.md | 137 + contents/es/get-started.md | 91 + contents/es/how-to/animation/transition.md | 187 + .../es/how-to/chart-types/bar/bar-race.md | 87 + .../es/how-to/chart-types/bar/basic-bar.md | 185 + .../es/how-to/chart-types/bar/polar-bar.md | 2 + .../es/how-to/chart-types/bar/stacked-bar.md | 32 + .../es/how-to/chart-types/bar/waterfall.md | 96 + .../es/how-to/chart-types/line/area-line.md | 29 + .../es/how-to/chart-types/line/basic-line.md | 133 + .../es/how-to/chart-types/line/smooth-line.md | 19 + .../how-to/chart-types/line/stacked-line.md | 49 + .../es/how-to/chart-types/line/step-line.md | 40 + .../es/how-to/chart-types/pie/basic-pie.md | 117 + .../es/how-to/chart-types/pie/doughnut.md | 87 + contents/es/how-to/chart-types/pie/rose.md | 38 + .../chart-types/scatter/basic-scatter.md | 121 + contents/es/how-to/cross-platform/server.md | 319 + contents/es/how-to/data/drilldown.md | 0 contents/es/how-to/data/dynamic-data.md | 114 + .../es/how-to/interaction/coarse-pointer.md | 30 + contents/es/how-to/interaction/drag.md | 271 + contents/es/how-to/label/rich-text.md | 502 ++ contents/es/meta/edit-guide.md | 339 + contents/es/posts.yml | 159 + nuxt.config.js | 13 +- pages/_.vue | 2 +- pages/index.vue | 3 +- store/index.js | 5 +- 74 files changed, 14545 insertions(+), 304 deletions(-) create mode 100644 components/partials/Navbar/es.vue create mode 100644 contents/es/basics/download.md create mode 100644 contents/es/basics/help.md create mode 100644 contents/es/basics/import.md create mode 100644 contents/es/basics/inspiration.md create mode 100644 contents/es/basics/release-note/5-2-0.md create mode 100644 contents/es/basics/release-note/5-3-0.md create mode 100644 contents/es/basics/release-note/5-4-0.md create mode 100644 contents/es/basics/release-note/5-5-0.md create mode 100644 contents/es/basics/release-note/5-6-0.md create mode 100644 contents/es/basics/release-note/v5-feature.md create mode 100644 contents/es/basics/release-note/v5-upgrade-guide.md create mode 100644 contents/es/best-practices/aria.md create mode 100644 contents/es/best-practices/canvas-vs-svg.md create mode 100644 contents/es/best-practices/design/color-enhance.md create mode 100644 contents/es/best-practices/mobile.md create mode 100644 contents/es/best-practices/specification/bar/basic-bar.md create mode 100644 contents/es/best-practices/specification/bar/bi-directional-bar.md create mode 100644 contents/es/best-practices/specification/bar/grouped-bar.md create mode 100644 contents/es/best-practices/specification/bar/stacked-bar.md create mode 100644 contents/es/best-practices/specification/funnel.md create mode 100644 contents/es/best-practices/specification/gauge.md create mode 100644 contents/es/best-practices/specification/line/area.md create mode 100644 contents/es/best-practices/specification/line/basic-line.md create mode 100644 contents/es/best-practices/specification/line/stacked-area.md create mode 100644 contents/es/best-practices/specification/pie/basic-pie.md create mode 100644 contents/es/best-practices/specification/radar.md create mode 100644 contents/es/best-practices/specification/scatter/bubble.md create mode 100644 contents/es/best-practices/specification/scatter/scatter.md create mode 100644 contents/es/concepts/axis.md create mode 100644 contents/es/concepts/chart-size.md create mode 100644 contents/es/concepts/coordinate.md create mode 100644 contents/es/concepts/data-transform.md create mode 100644 contents/es/concepts/dataset.md create mode 100644 contents/es/concepts/event.md create mode 100644 contents/es/concepts/legend.md create mode 100644 contents/es/concepts/options.md create mode 100644 contents/es/concepts/series.md create mode 100644 contents/es/concepts/style.md create mode 100644 contents/es/concepts/tooltip.md create mode 100644 contents/es/concepts/visual-map.md create mode 100644 contents/es/get-started.md create mode 100644 contents/es/how-to/animation/transition.md create mode 100755 contents/es/how-to/chart-types/bar/bar-race.md create mode 100755 contents/es/how-to/chart-types/bar/basic-bar.md create mode 100755 contents/es/how-to/chart-types/bar/polar-bar.md create mode 100755 contents/es/how-to/chart-types/bar/stacked-bar.md create mode 100755 contents/es/how-to/chart-types/bar/waterfall.md create mode 100755 contents/es/how-to/chart-types/line/area-line.md create mode 100755 contents/es/how-to/chart-types/line/basic-line.md create mode 100755 contents/es/how-to/chart-types/line/smooth-line.md create mode 100755 contents/es/how-to/chart-types/line/stacked-line.md create mode 100755 contents/es/how-to/chart-types/line/step-line.md create mode 100755 contents/es/how-to/chart-types/pie/basic-pie.md create mode 100755 contents/es/how-to/chart-types/pie/doughnut.md create mode 100755 contents/es/how-to/chart-types/pie/rose.md create mode 100644 contents/es/how-to/chart-types/scatter/basic-scatter.md create mode 100644 contents/es/how-to/cross-platform/server.md create mode 100644 contents/es/how-to/data/drilldown.md create mode 100644 contents/es/how-to/data/dynamic-data.md create mode 100644 contents/es/how-to/interaction/coarse-pointer.md create mode 100644 contents/es/how-to/interaction/drag.md create mode 100644 contents/es/how-to/label/rich-text.md create mode 100644 contents/es/meta/edit-guide.md create mode 100644 contents/es/posts.yml diff --git a/components/helper/contributors.ts b/components/helper/contributors.ts index 17dc9f9db..bb5eeba7e 100644 --- a/components/helper/contributors.ts +++ b/components/helper/contributors.ts @@ -1,528 +1,6245 @@ export default { - "contents/zh/how-to/data/dynamic-data.md": [ - "Ovilia", + "contents/.prettierrc": [ "pissang" ], - "contents/zh/how-to/data/drilldown.md": [ - "Hansz00", - "Ovilia", - "pissang" + "contents/en/basics/inspiration.md": [ + "pissang", + "dbgee", + "plainheart" ], - "contents/zh/how-to/cross-platform/wechat-app.md": [ - "Ovilia", - "pissang" + "contents/en/basics/import.md": [ + "plainheart", + "pissang", + "aimuz", + "ikeq", + "zachary-svoboda-accesso", + "btea" ], - "contents/zh/how-to/cross-platform/server.md": [ - "Ovilia", - "pissang" + "contents/en/basics/release-note/5-2-0.md": [ + "pissang", + "Ovilia" ], - "contents/zh/how-to/cross-platform/baidu-app.md": [ + "contents/en/basics/download.md": [ + "plainheart", "Ovilia", - "pissang" + "pissang", + "zachary-svoboda-accesso" ], - "contents/zh/how-to/connect.md": [ - "Ovilia", + "contents/en/basics/help.md": [ + "plainheart", "pissang" ], - "contents/zh/how-to/chart-types/scatter/basic-scatter.md": [ + "contents/en/basics/release-note/5-3-0.md": [ "Ovilia", - "Wdingding", - "pissang" + "pissang", + "plainheart" ], - "contents/zh/how-to/chart-types/pie/rose.md": [ - "Ovilia", - "pissang" + "contents/en/basics/release-note/v5-feature.md": [ + "pissang", + "plainheart", + "timonla" ], - "contents/zh/how-to/chart-types/pie/doughnut.md": [ - "Hansz00", + "contents/en/basics/release-note/v5-upgrade-guide.md": [ + "plainheart", "Ovilia", + "fuchunhui", "pissang" ], - "contents/zh/how-to/chart-types/pie/basic-pie.md": [ - "Hansz00", - "Ovilia", - "pissang" + "contents/en/basics/release-note/5-4-0.md": [ + "Ovilia" ], - "contents/zh/how-to/chart-types/line/step-line.md": [ + "contents/en/basics/release-note/5-5-0.md": [ "Ovilia", + "plainheart" + ], + "contents/en/basics/release-note/5-6-0.md": [ + "Ovilia" + ], + "contents/en/best-practices/canvas-vs-svg.md": [ + "plainheart", + "pissang", + "mrbrianevans" + ], + "contents/en/best-practices/design/color-enhance.md": [ "pissang" ], - "contents/zh/how-to/chart-types/line/stacked-line.md": [ + "contents/en/best-practices/aria.md": [ + "pissang", "Ovilia", + "julien-deramond", + "zachary-svoboda-accesso" + ], + "contents/en/best-practices/mobile.md": [ "pissang" ], - "contents/zh/how-to/chart-types/line/smooth-line.md": [ - "Ovilia", + "contents/en/best-practices/specification/bar/grouped-bar.md": [ "pissang" ], - "contents/zh/how-to/chart-types/line/basic-line.md": [ - "Hansz00", - "Ovilia", + "contents/en/best-practices/specification/gauge.md": [ "pissang" ], - "contents/zh/how-to/chart-types/line/area-line.md": [ - "Ovilia", + "contents/en/best-practices/specification/bar/bi-directional-bar.md": [ "pissang" ], - "contents/zh/how-to/chart-types/bar/waterfall.md": [ - "Ovilia", + "contents/en/best-practices/specification/line/basic-line.md": [ "pissang" ], - "contents/zh/how-to/chart-types/bar/stacked-bar.md": [ - "Ovilia", + "contents/en/best-practices/specification/bar/basic-bar.md": [ "pissang" ], - "contents/zh/how-to/chart-types/bar/polar-bar.md": [ - "Ovilia", + "contents/en/best-practices/specification/bar/stacked-bar.md": [ "pissang" ], - "contents/zh/how-to/chart-types/bar/basic-bar.md": [ - "Ovilia", + "contents/en/best-practices/specification/line/area.md": [ "pissang" ], - "contents/zh/how-to/chart-types/bar/bar-race.md": [ - "Ovilia", + "contents/en/best-practices/specification/funnel.md": [ "pissang" ], - "contents/zh/get-started.md": [ - "Ovilia", + "contents/en/best-practices/specification/pie/basic-pie.md": [ "pissang" ], - "contents/zh/concepts/visual-map.md": [ - "Ovilia", + "contents/en/best-practices/specification/line/stacked-area.md": [ "pissang" ], - "contents/zh/concepts/tooltip.md": [ - "Ovilia" + "contents/en/best-practices/specification/scatter/bubble.md": [ + "pissang" ], - "contents/zh/concepts/style.md": [ - "SuWanBin", + "contents/en/concepts/axis.md": [ "pissang" ], - "contents/zh/concepts/series.md": [ - "Ovilia" + "contents/en/best-practices/specification/scatter/scatter.md": [ + "pissang" ], - "contents/zh/concepts/options.md": [ - "Ovilia" + "contents/en/best-practices/specification/radar.md": [ + "pissang" ], - "contents/zh/concepts/legend.md": [ - "Ovilia", + "contents/en/concepts/chart-size.md": [ "pissang", - "yufeng04" + "plainheart", + "ppd0705" ], - "contents/zh/concepts/event.md": [ - "100pah", - "Ovilia", - "huanghan01", + "contents/en/concepts/dataset.md": [ + "plainheart", "pissang", - "plainheart" - ], - "contents/zh/concepts/dataset.md": [ - "100pah", "Ovilia", - "huanghan01", - "pissang" + "100pah", + "Hertz-Hu", + "Bruce20190410", + "YuanyeChi", + "simonmcconnell" ], - "contents/zh/concepts/data-transform.md": [ + "contents/en/concepts/data-transform.md": [ + "plainheart", "100pah", "pissang", - "plainheart" + "shangchen0531" ], - "contents/zh/concepts/coordinate.md": [ - "Ovilia" + "contents/en/concepts/legend.md": [ + "pissang" ], - "contents/zh/concepts/chart-size.md": [ + "contents/en/concepts/event.md": [ + "pissang", "Ovilia", + "100pah" + ], + "contents/en/concepts/visual-map.md": [ + "KrzysztofMadejski", "pissang" ], - "contents/zh/concepts/axis.md": [ - "Essentric", + "contents/en/concepts/style.md": [ + "plainheart", + "KrzysztofMadejski", + "pissang", + "fuchunhui", + "zachary-svoboda-accesso" + ], + "contents/en/how-to/chart-types/bar/bar-race.md": [ "Ovilia", - "huanghan01", "pissang", - "plainheart", - "yufeng04" + "Shofol" ], - "contents/zh/best-practices/specification/scatter/scatter.md": [ - "Hansz00", - "Wdingding", + "contents/en/how-to/animation/transition.md": [ "pissang" ], - "contents/zh/best-practices/specification/scatter/bubble.md": [ - "Wdingding", + "contents/en/get-started.md": [ + "plainheart", + "Ovilia", + "randyl", "pissang" ], - "contents/zh/best-practices/specification/radar.md": [ - "Hansz00", - "Wdingding", + "contents/en/how-to/chart-types/bar/polar-bar.md": [ "pissang" ], - "contents/zh/best-practices/specification/pie/basic-pie.md": [ - "100pah", - "Wdingding", + "contents/en/how-to/chart-types/bar/basic-bar.md": [ + "plainheart", "pissang" ], - "contents/zh/best-practices/specification/line/stacked-area.md": [ - "Wdingding", + "contents/en/how-to/chart-types/line/basic-line.md": [ "pissang" ], - "contents/zh/best-practices/specification/line/basic-line.md": [ - "Hansz00", - "Wdingding", + "contents/en/how-to/chart-types/bar/stacked-bar.md": [ "pissang" ], - "contents/zh/best-practices/specification/line/area.md": [ - "Hansz00", - "Wdingding", + "contents/en/how-to/chart-types/line/area-line.md": [ "pissang" ], - "contents/zh/best-practices/specification/gauge.md": [ - "Hansz00", - "Wdingding", + "contents/en/how-to/chart-types/bar/waterfall.md": [ + "plainheart", "pissang" ], - "contents/zh/best-practices/specification/funnel.md": [ - "Wdingding", + "contents/en/how-to/chart-types/line/step-line.md": [ "pissang" ], - "contents/zh/best-practices/specification/bar/stacked-bar.md": [ - "Wdingding", + "contents/en/how-to/chart-types/line/stacked-line.md": [ + "vincentbernat", + "pissang", + "omkar787" + ], + "contents/en/how-to/chart-types/pie/rose.md": [ "pissang" ], - "contents/zh/best-practices/specification/bar/grouped-bar.md": [ - "Hansz00", - "Wdingding", + "contents/en/how-to/chart-types/line/smooth-line.md": [ "pissang" ], - "contents/zh/best-practices/specification/bar/bi-directional-bar.md": [ + "contents/en/how-to/cross-platform/server.md": [ "Ovilia", - "Wdingding", - "pissang" + "plainheart", + "pissang", + "balloon72" ], - "contents/zh/best-practices/specification/bar/basic-bar.md": [ - "Hansz00", - "Wdingding", + "contents/en/how-to/chart-types/pie/doughnut.md": [ + "plainheart", + "pissang", + "jnodorp" + ], + "contents/en/how-to/chart-types/pie/basic-pie.md": [ "pissang" ], - "contents/zh/best-practices/mobile.md": [ - "Hansz00", - "Ovilia", + "contents/en/how-to/chart-types/scatter/basic-scatter.md": [ "pissang" ], - "contents/zh/best-practices/design/color-enhance.md": [ - "Hansz00", - "Wdingding", + "contents/en/how-to/data/dynamic-data.md": [ + "yhoiseth", + "pissang", + "balloon72" + ], + "contents/en/how-to/data/drilldown.md": [ "pissang" ], - "contents/zh/best-practices/canvas-vs-svg.md": [ - "100pah", + "contents/en/how-to/interaction/drag.md": [ "Ovilia", "pissang" ], - "contents/zh/best-practices/aria.md": [ + "contents/en/how-to/interaction/coarse-pointer.md": [ "Ovilia", - "pissang" + "plainheart" ], - "contents/zh/basics/resource.md": [ + "contents/en/posts.yml": [ + "pissang", + "Ovilia" + ], + "contents/en/meta/edit-guide.md": [ + "pissang", + "plainheart" + ], + "contents/es/basics/import.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/basics/download.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/basics/release-note/5-3-0.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/basics/help.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/basics/inspiration.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/basics/release-note/5-6-0.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/basics/release-note/v5-upgrade-guide.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/basics/release-note/v5-feature.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/basics/release-note/5-2-0.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/basics/release-note/5-5-0.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/basics/release-note/5-4-0.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/best-practices/specification/funnel.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/best-practices/design/color-enhance.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/best-practices/specification/gauge.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/best-practices/specification/bar/basic-bar.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/best-practices/specification/bar/grouped-bar.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/best-practices/specification/line/basic-line.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/best-practices/specification/bar/stacked-bar.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/best-practices/aria.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/best-practices/specification/radar.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/best-practices/specification/line/stacked-area.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/best-practices/specification/line/area.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/best-practices/specification/bar/bi-directional-bar.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/concepts/axis.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/best-practices/specification/scatter/scatter.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/best-practices/specification/pie/basic-pie.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/best-practices/mobile.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/best-practices/specification/scatter/bubble.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/concepts/dataset.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/concepts/chart-size.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/concepts/data-transform.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/concepts/coordinate.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/concepts/legend.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/concepts/options.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/concepts/event.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/concepts/series.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/how-to/animation/transition.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/concepts/tooltip.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/get-started.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/how-to/chart-types/bar/basic-bar.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/how-to/chart-types/bar/stacked-bar.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/best-practices/canvas-vs-svg.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/concepts/visual-map.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/how-to/chart-types/bar/polar-bar.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/how-to/chart-types/bar/waterfall.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/how-to/chart-types/bar/bar-race.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/how-to/chart-types/line/area-line.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/how-to/chart-types/pie/doughnut.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/how-to/chart-types/line/smooth-line.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/how-to/chart-types/line/stacked-line.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/how-to/cross-platform/server.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/how-to/chart-types/line/step-line.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/how-to/chart-types/pie/basic-pie.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/how-to/chart-types/pie/rose.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/how-to/chart-types/line/basic-line.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/concepts/style.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/how-to/chart-types/scatter/basic-scatter.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/zh/basics/download.md": [ + "pissang", + "plainheart", "Ovilia", - "pissang" + "100pah" ], - "contents/zh/basics/release-note/v5-upgrade-guide.md": [ + "contents/zh/basics/import.md": [ + "pissang", + "plainheart", + "michaelxiaohan", "Ovilia", - "pissang" + "JobbyM", + "aimuz", + "vueadmin", + "gugujigua", + "btea", + "Yechuanjie" ], - "contents/zh/basics/release-note/v5-feature.md": [ - "Hookin", + "contents/zh/basics/inspiration.md": [ + "Ovilia", "pissang" ], "contents/zh/basics/release-note/5-2-0.md": [ - "Ovilia", - "pissang" + "pissang", + "Ovilia" ], - "contents/zh/basics/inspiration.md": [ - "Ovilia", - "pissang" + "contents/zh/basics/release-note/5-4-0.md": [ + "Ovilia" ], - "contents/zh/basics/import.md": [ + "contents/zh/basics/release-note/5-3-0.md": [ "pissang", + "Ovilia", "plainheart" ], "contents/zh/basics/help.md": [ - "100pah", + "plainheart", "Ovilia", - "pissang", - "plainheart" - ], - "contents/zh/basics/download.md": [ "100pah", - "Ovilia", "pissang" ], - "contents/en/posts.yml": [ + "contents/zh/basics/release-note/5-6-0.md": [ + "Ovilia" + ], + "contents/zh/basics/release-note/v5-upgrade-guide.md": [ + "plainheart", + "pissang", "Ovilia", - "pissang" + "fredricen" ], - "contents/en/meta/edit-guide.md": [ + "contents/zh/basics/release-note/5-5-0.md": [ "Ovilia", - "pissang" + "plainheart" ], - "contents/en/how-to/label/rich-text.md": [ + "contents/zh/basics/resource.md": [ + "Ovilia", "pissang" ], - "contents/en/how-to/interaction/drag.md": [ + "contents/zh/best-practices/specification/bar/basic-bar.md": [ "pissang" ], - "contents/en/how-to/data/dynamic-data.md": [ - "Hansz00", - "Ovilia", - "pissang" + "contents/es/how-to/data/dynamic-data.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" ], - "contents/en/how-to/data/drilldown.md": [ - "Hansz00", + "contents/zh/basics/release-note/v5-feature.md": [ + "plainheart", + "pissang", + "jiangmaniu", + "LuckyHookin" + ], + "contents/zh/best-practices/aria.md": [ "Ovilia", + "plainheart", "pissang" ], - "contents/en/how-to/cross-platform/server.md": [ + "contents/zh/best-practices/mobile.md": [ "pissang" ], - "contents/en/how-to/chart-types/scatter/basic-scatter.md": [ - "Hansz00", - "pissang" + "contents/zh/best-practices/canvas-vs-svg.md": [ + "plainheart", + "pissang", + "Chengxi9", + "btea" ], - "contents/en/how-to/chart-types/pie/rose.md": [ - "Hansz00", - "Ovilia", + "contents/zh/best-practices/design/color-enhance.md": [ "pissang" ], - "contents/en/how-to/chart-types/pie/doughnut.md": [ + "contents/zh/best-practices/specification/bar/stacked-bar.md": [ "pissang" ], - "contents/en/how-to/chart-types/pie/basic-pie.md": [ - "Hansz00", + "contents/zh/best-practices/specification/bar/bi-directional-bar.md": [ "pissang" ], - "contents/en/how-to/chart-types/line/step-line.md": [ - "Hansz00", + "contents/zh/best-practices/specification/line/area.md": [ "pissang" ], - "contents/en/how-to/chart-types/line/stacked-line.md": [ - "Hansz00", - "Ovilia", + "contents/es/how-to/interaction/drag.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/zh/best-practices/specification/gauge.md": [ "pissang" ], - "contents/en/how-to/chart-types/line/smooth-line.md": [ - "Hansz00", + "contents/zh/best-practices/specification/line/stacked-area.md": [ "pissang" ], - "contents/en/how-to/chart-types/line/basic-line.md": [ - "Hansz00", + "contents/zh/best-practices/specification/funnel.md": [ "pissang" ], - "contents/en/how-to/chart-types/line/area-line.md": [ - "Hank", - "Hansz00", + "contents/zh/best-practices/specification/bar/grouped-bar.md": [ "pissang" ], - "contents/en/how-to/chart-types/bar/waterfall.md": [ - "Hansz00", - "Ovilia", + "contents/es/posts.yml": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/zh/best-practices/specification/line/basic-line.md": [ "pissang" ], - "contents/en/how-to/chart-types/bar/stacked-bar.md": [ - "Hansz00", + "contents/zh/best-practices/specification/radar.md": [ "pissang" ], - "contents/en/how-to/chart-types/bar/polar-bar.md": [ - "Hansz00", + "contents/es/how-to/label/rich-text.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/zh/best-practices/specification/pie/basic-pie.md": [ "pissang" ], - "contents/en/how-to/chart-types/bar/basic-bar.md": [ - "Hank", - "Hansz00", + "contents/zh/best-practices/specification/scatter/bubble.md": [ "pissang" ], - "contents/en/how-to/chart-types/bar/bar-race.md": [ - "Hansz00", - "Ovilia", + "contents/zh/best-practices/specification/scatter/scatter.md": [ "pissang" ], - "contents/en/get-started.md": [ + "contents/es/how-to/interaction/coarse-pointer.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/es/meta/edit-guide.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" + ], + "contents/zh/concepts/chart-size.md": [ + "pissang", "Ovilia", + "plainheart", + "ppd0705" + ], + "contents/zh/concepts/axis.md": [ "pissang", - "plainheart" + "Ovilia", + "plainheart", + "Essentric" ], - "contents/en/concepts/visual-map.md": [ - "pissang" + "contents/zh/concepts/dataset.md": [ + "plainheart", + "pissang", + "100pah", + "Ovilia" ], - "contents/en/concepts/tooltip.md": [ + "contents/zh/concepts/event.md": [ + "pissang", "Ovilia", - "huanghan01" + "plainheart", + "100pah" ], - "contents/en/concepts/style.md": [ - "pissang" + "contents/zh/concepts/data-transform.md": [ + "pissang", + "100pah", + "plainheart", + "idaibin", + "shangchen0531", + "meishijia" ], - "contents/en/concepts/series.md": [ - "Ovilia", - "huanghan01" + "contents/zh/concepts/coordinate.md": [ + "Ovilia" ], - "contents/en/concepts/options.md": [ - "Ovilia", - "huanghan01" + "contents/zh/concepts/options.md": [ + "Ovilia" ], - "contents/en/concepts/legend.md": [ - "huanghan01", - "pissang" + "contents/es/how-to/data/drilldown.md": [ + "ttps://github.com/features/copilot", + "ttps://github.com/features/security", + "ttps://github.com/features/actions", + "ttps://github.com/features/codespaces", + "ttps://github.com/features/issues", + "ttps://github.com/features/code-review", + "ttps://github.com/features/discussions", + "ttps://github.com/features/code-search", + "ttps://github.com/features", + "ttps://docs.github.com", + "ttps://skills.github.com", + "ttps://github.blog", + "ttps://github.com/enterprise", + "ttps://github.com/team", + "ttps://github.com/enterprise/startups", + "solutions/use-case/devsecops", + "solutions/use-case/devops", + "solutions/use-case/ci-cd", + "solutions/use-case", + "solutions/industry/healthcare", + "solutions/industry/financial-services", + "solutions/industry/manufacturing", + "solutions/industry/government", + "solutions/industry", + "resources/articles/ai", + "resources/articles/devops", + "resources/articles/security", + "resources/articles/software-development", + "resources/articles", + "ttps://resources.github.com/learn/pathways", + "ttps://resources.github.com", + "ttps://github.com/customer-stories", + "ttps://partner.github.com", + "ttps://github.com/solutions/executive-insights", + "sponsors", + "ttps://github.com/readme", + "ttps://github.com/topics", + "ttps://github.com/trending", + "ttps://github.com/collections", + "enterprise", + "ttps://github.com/enterprise/advanced-security", + "features/copilot#enterprise", + "premium-support", + "ttps://github.com/pricing", + "features", + "enterprise", + "features/copilot", + "security", + "pricing", + "team", + "ttps://resources.github.com", + "ttps://github.com/github/roadmap", + "ttps://resources.github.com/devops/tools/compare", + "ttps://docs.github.com/get-started/exploring-integrations/about-building-integrations", + "ttps://partner.github.com", + "ttps://github.com/edu", + "ttps://cli.github.com", + "ttps://desktop.github.com", + "ttps://github.com/mobile", + "ttps://docs.github.com", + "ttps://github.community", + "ttps://services.github.com", + "enterprise/premium-support", + "ttps://skills.github.com", + "ttps://www.githubstatus.com", + "ttps://support.github.com?tags=dotcom-footer", + "ttps://github.com/about", + "customer-stories?type=enterprise", + "ttps://github.blog", + "readme", + "ttps://github.careers", + "newsroom", + "about/diversity", + "ttps://socialimpact.github.com", + "ttps://shop.github.com", + "ttps://docs.github.com/site-policy/github-terms/github-terms-of-service", + "ttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement", + "ttps://github.com/github/site-policy/pull/582", + "sitemap", + "git-guides", + "ttps://www.linkedin.com/company/github", + "ttps://www.instagram.com/github", + "ttps://www.youtube.com/github", + "ttps://x.com/github", + "ttps://www.tiktok.com/@github", + "ttps://www.twitch.tv/github", + "ttps://github.com/github" ], - "contents/en/concepts/event.md": [ - "100pah", + "contents/zh/concepts/series.md": [ + "Ovilia" + ], + "contents/zh/concepts/style.md": [ + "pissang", + "plainheart", + "wangcheng0825", + "fuchunhui", + "1335951413" + ], + "contents/zh/concepts/legend.md": [ + "pissang", "Ovilia", - "huanghan01", + "Geoffyscat" + ], + "contents/zh/how-to/animation/transition.md": [ "pissang" ], - "contents/en/concepts/dataset.md": [ - "100pah", + "contents/zh/how-to/chart-types/bar/bar-race.md": [ "Ovilia", - "huanghan01", "pissang" ], - "contents/en/concepts/data-transform.md": [ - "100pah", + "contents/zh/get-started.md": [ + "Ovilia", "pissang", - "plainheart" + "zxx0006" ], - "contents/en/concepts/coordinate.md": [ - "Ovilia", - "huanghan01" + "contents/zh/concepts/tooltip.md": [ + "Ovilia" ], - "contents/en/concepts/chart-size.md": [ - "huanghan01", + "contents/zh/how-to/chart-types/bar/polar-bar.md": [ "pissang" ], - "contents/en/concepts/axis.md": [ - "huanghan01", - "pissang" + "contents/zh/how-to/chart-types/bar/basic-bar.md": [ + "plainheart", + "pissang", + "tanjiasong005" ], - "contents/en/best-practices/specification/scatter/scatter.md": [ - "Hansz00", + "contents/zh/concepts/visual-map.md": [ + "Ovilia", + "plainheart", "pissang" ], - "contents/en/best-practices/specification/scatter/bubble.md": [ - "Hansz00", + "contents/zh/how-to/animation/universal-transition.md": [ "pissang" ], - "contents/en/best-practices/specification/radar.md": [ - "Hansz00", + "contents/zh/how-to/chart-types/bar/stacked-bar.md": [ + "ArisLittle", "pissang" ], - "contents/en/best-practices/specification/pie/basic-pie.md": [ - "Hansz00", + "contents/zh/how-to/chart-types/bar/waterfall.md": [ + "robyle", "pissang" ], - "contents/en/best-practices/specification/line/stacked-area.md": [ - "Hansz00", + "contents/zh/how-to/chart-types/line/smooth-line.md": [ "pissang" ], - "contents/en/best-practices/specification/line/basic-line.md": [ - "Hansz00", + "contents/zh/how-to/chart-types/line/basic-line.md": [ "pissang" ], - "contents/en/best-practices/specification/line/area.md": [ - "Hansz00", + "contents/zh/how-to/chart-types/line/stacked-line.md": [ + "vincentbernat", "pissang" ], - "contents/en/best-practices/specification/gauge.md": [ - "Hansz00", + "contents/zh/how-to/chart-types/line/area-line.md": [ "pissang" ], - "contents/en/best-practices/specification/funnel.md": [ - "Hansz00", + "contents/zh/how-to/chart-types/pie/rose.md": [ "pissang" ], - "contents/en/best-practices/specification/bar/stacked-bar.md": [ - "Hansz00", + "contents/zh/how-to/chart-types/pie/doughnut.md": [ + "pissang", + "guda-art" + ], + "contents/zh/how-to/connect.md": [ "pissang" ], - "contents/en/best-practices/specification/bar/grouped-bar.md": [ - "Hansz00", + "contents/zh/how-to/chart-types/pie/basic-pie.md": [ "pissang" ], - "contents/en/best-practices/specification/bar/bi-directional-bar.md": [ - "Hansz00", + "contents/zh/how-to/chart-types/line/step-line.md": [ "pissang" ], - "contents/en/best-practices/specification/bar/basic-bar.md": [ - "Hansz00", + "contents/zh/how-to/chart-types/scatter/basic-scatter.md": [ "pissang" ], - "contents/en/best-practices/mobile.md": [ - "Hansz00", + "contents/zh/how-to/cross-platform/server.md": [ "Ovilia", + "plainheart", "pissang" ], - "contents/en/best-practices/design/color-enhance.md": [ - "Hansz00", + "contents/zh/how-to/cross-platform/baidu-app.md": [ + "Ovilia", + "vincentbernat", "pissang" ], - "contents/en/best-practices/canvas-vs-svg.md": [ - "100pah", - "Hansz00", - "Ovilia", + "contents/zh/how-to/cross-platform/wechat-app.md": [ "pissang" ], - "contents/en/best-practices/aria.md": [ - "Hansz00", + "contents/zh/how-to/interaction/coarse-pointer.md": [ "Ovilia", - "pissang" + "plainheart" ], - "contents/en/basics/release-note/v5-upgrade-guide.md": [ + "contents/zh/how-to/interaction/drag.md": [ "Ovilia", "pissang" ], - "contents/en/basics/release-note/v5-feature.md": [ + "contents/zh/how-to/data/drilldown.md": [ "pissang" ], - "contents/en/basics/release-note/5-2-0.md": [ - "Ovilia", + "contents/zh/how-to/mobile.md": [ "pissang" ], - "contents/en/basics/inspiration.md": [ + "contents/zh/how-to/data/dynamic-data.md": [ + "ZonaHex", "pissang", - "plainheart" + "jishen027" ], - "contents/en/basics/import.md": [ + "contents/zh/posts.yml": [ "pissang", - "plainheart" - ], - "contents/en/basics/help.md": [ - "pissang" - ], - "contents/en/basics/download.md": [ - "Ovilia", - "pissang" - ], - "contents/.prettierrc": [ - "pissang" + "Ovilia" ], "contents/zh/how-to/label/rich-text.md": [ + "plainheart", "pissang" ], - "contents/zh/how-to/mobile.md": [ + "contents/zh/meta/writing.md": [ "Ovilia", "pissang" ], - "contents/zh/how-to/interaction/drag.md": [ - "pissang" - ], "contents/zh/meta/edit-guide.md": [ - "Ovilia", - "pissang" + "pissang", + "suisuiz" ], - "contents/zh/meta/writing.md": [ - "Ovilia", - "pissang" + "contents/en/concepts/series.md": [ + "huanghan01" ], - "contents/zh/posts.yml": [ - "Ovilia", - "pissang" + "contents/en/concepts/coordinate.md": [ + "huanghan01" + ], + "contents/en/concepts/tooltip.md": [ + "huanghan01" + ], + "contents/en/concepts/options.md": [ + "huanghan01" ] }; \ No newline at end of file diff --git a/components/partials/Navbar.vue b/components/partials/Navbar.vue index 62488426a..abb107386 100644 --- a/components/partials/Navbar.vue +++ b/components/partials/Navbar.vue @@ -6,6 +6,7 @@ import Vue from 'vue' import zhNav from './Navbar/zh.vue' import enNav from './Navbar/en.vue' +import esNav from './Navbar/es.vue'; export default Vue.extend({ components: {}, @@ -15,13 +16,19 @@ export default Vue.extend({ ;(window as any).changeLang = () => { window.location.href = window.location.href.replace( `/${locale}/`, - locale === 'zh' ? '/en/' : '/zh/' + locale === 'zh' ? '/en/' : locale === 'en' ? '/es/' : '/zh/' ) } }, computed: { navComponent() { - return (this as any).$i18n.locale === 'zh' ? zhNav : enNav + const locale = (this as any).$i18n.locale + if (locale === 'zh') { + return zhNav + } else if (locale === 'es') { + return esNav + } + return enNav } } }) diff --git a/components/partials/Navbar/en.vue b/components/partials/Navbar/en.vue index d679c0d4e..f0eeb967c 100644 --- a/components/partials/Navbar/en.vue +++ b/components/partials/Navbar/en.vue @@ -1,3 +1,3 @@ \ No newline at end of file diff --git a/components/partials/Navbar/es.vue b/components/partials/Navbar/es.vue new file mode 100644 index 000000000..2b418d757 --- /dev/null +++ b/components/partials/Navbar/es.vue @@ -0,0 +1,145 @@ + \ No newline at end of file diff --git a/components/partials/Navbar/zh.vue b/components/partials/Navbar/zh.vue index b6be47be4..816fa8506 100644 --- a/components/partials/Navbar/zh.vue +++ b/components/partials/Navbar/zh.vue @@ -1,3 +1,3 @@ \ No newline at end of file diff --git a/contents/.prettierrc b/contents/.prettierrc index 6a8af5e9e..8413445bd 100644 --- a/contents/.prettierrc +++ b/contents/.prettierrc @@ -1,5 +1,5 @@ { - "tabWidth": 2, + "tabWidth": 3, "semi": true, "singleQuote": true } diff --git a/contents/es/basics/download.md b/contents/es/basics/download.md new file mode 100644 index 000000000..35603d318 --- /dev/null +++ b/contents/es/basics/download.md @@ -0,0 +1,36 @@ +# Obtener Apache Echarts + +Apache Echarts ofrece una variedad de opciones de instalación, por lo que puedes elegir cualquiera de las opciones según tu proyecto + +- Instalar desde NPM +- Usar desde CDN +- Descargar desde Github +- Personalización en línea + +A continuación, veremos cada uno de estos métodos de instalación y la estructura de directorios después de la descarga. + +## Instalación + +### Instalar desde NPM + +```sh +npm install echarts +``` + +Consultar [Import ECharts](${lang}/basics/import) para obtener mas detalles sobre su uso. + +### Usar desde CDN + +ECharts esta disponible en los siguientes CDNs gratuitos: + +- [jsDelivr](https://www.jsdelivr.com/package/npm/echarts) +- [unpkg](https://unpkg.com/browse/echarts/) +- [cdnjs](https://cdnjs.com/libraries/echarts) + +### Descargar desde Github + +Puedes encontrar enlaces a cada versión en la pagina de [releases](https://github.com/apache/echarts/releases) del proyecto [apache/echarts project](https://github.com/apache/echarts). Haz click en el codigo fuente bajo de "Assets" en la parte inferior de la versión deseada. Despues de descargar, descomprime el archivo y localiza el archivo `echarts.js`en la carpeta `dist` para incluir la funcionalidad completa de Echarts. + +### Personalización en la linea + +Si deseas incluir solo algunos módulos para reducir el tamaño del paquete, puedes usar la función de [ECharts online customization](${mainSitePath}builder.html) para crear una descarga personalizada de Echarts diff --git a/contents/es/basics/help.md b/contents/es/basics/help.md new file mode 100644 index 000000000..929d1012b --- /dev/null +++ b/contents/es/basics/help.md @@ -0,0 +1,40 @@ +# Obtener Ayuda + +## Problemas Técnicos + +### Asegúrate de que la documentación existente no resuelve tu problema + +ECharts tiene una gran cantidad de usuarios, por lo que es muy probable que alguien más haya encontrado y resuelto el problema que estás teniendo. Al leer la documentación y utilizar el motor de búsqueda, puedes resolver tu problema rápidamente por ti mismo sin la ayuda de la comunidad. + +Por lo tanto, antes de hacer cualquier otra cosa, asegúrate de que la documentación actual y otros recursos no puedan resolver tu problema. Los recursos que pueden ser útiles incluyen: + +- [API](${mainSitePath}api.html) +- [Option Manual](${mainSitePath}option.html) - you can try to use the search function +- Articles in this handbook +- [FAQ](${mainSitePath}faq.html) +- Searching in [GitHub issue](https://github.com/apache/echarts/issues) +- Using the search engine + +### Crea un Demo Mínimo Reproducible + +Crea un ejemplo en el [Official Editor](${mainSitePath}examples/editor.html), [CodePen](https://codepen.io/Ovilia/pen/dyYWXWM), [CodeSandbox](https://codesandbox.io/s/echarts-basic-example-template-mpfz1s) or [JSFiddle](https://jsfiddle.net/plainheart/e46ozpqj/7/), lo cual facilitará que otros reproduzcan tu problema. + +El ejemplo debe reproducir tu problema de la manera más simple posible. Eliminar código y datos innecesarios puede permitir que quienes quieran ayudarte localicen y resuelvan el problema más rápidamente. Por favor, consulta [How to Create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) para más detalles. + +### Determinar si es un Error + +#### Reportar un Error o Solicitar una Nueva Funcionalidad + + +Si un comportamiento es diferente al de la documentación o no es lo que esperabas, probablemente sea un error. Si es un error o tienes una solicitud de nueva funcionalidad, por favor usa la [issue template](https://github.com/apache/echarts/issues/new/choose) para crear un nuevo issue y describirlo en detalle siguiendo las indicaciones. + +#### Preguntas sobre Cómo Hacer Algo + + +Si no es un error, pero no sabes cómo lograr algo, intenta consultar en stackoverflow.com + +Si no obtienes una respuesta, también puedes enviar un correo electrónico a [dev@echarts.apache.org](mailto:dev@echarts.apache.org). Para que más personas puedan entender tu pregunta y ayudarte en futuras búsquedas, es muy recomendable escribir el correo en inglés. + +## Preguntas No Técnicas + +Para otras preguntas no técnicas, puedes enviar un correo electrónico en inglés a [dev@echarts.apache.org](mailto:dev@echarts.apache.org). diff --git a/contents/es/basics/import.md b/contents/es/basics/import.md new file mode 100644 index 000000000..94d34e2ba --- /dev/null +++ b/contents/es/basics/import.md @@ -0,0 +1,159 @@ +# Usando Echarts como un Paquete NPM + +Hay dos enfoques para usar ECharts como un paquete. El enfoque mas sencillo es acerque toda la funcionalidad este disponible de inmediato importando desde `echarts`. Sin embargo, se recomienda reducir considerablemente el tamaño del paquete importando solo lo necesario como `echarts/core` y `echarts/charts`. + +## Instalar ECharts via NPM + +Puedes instalar Echarts mediante npm con el siguiente comando: + +```shell +npm install echarts +``` + +## Importar toda la funcionalidad de ECharts + +Para incluir todo ECharts, simplemente necesitamos importar `echarts`. + +```js +import * as echarts from 'echarts'; + +// Create the echarts instance +var myChart = echarts.init(document.getElementById('main')); + +// Draw the chart +myChart.setOption({ + title: { + text: 'ECharts Getting Started Example' + }, + tooltip: {}, + xAxis: { + data: ['shirt', 'cardigan', 'chiffon', 'pants', 'heels', 'socks'] + }, + yAxis: {}, + series: [ + { + name: 'sales', + type: 'bar', + data: [5, 20, 36, 10, 10, 20] + } + ] +}); +``` + +## Reducir el Tamaño del Paquete + +El código anterior importa todos los gráficos y componentes de ECharts, pero si no deseas incluir todos los componentes, puedes usar la interfaz compatible con tree-shaking proporcionada por ECharts para agrupar solo los componentes necesarios y obtener un paquete mínimo. + +```js +// Import the echarts core module, which provides the necessary interfaces for using echarts. +import * as echarts from 'echarts/core'; + +// Import bar charts, all suffixed with Chart +import { BarChart } from 'echarts/charts'; + +// Import the title, tooltip, rectangular coordinate system, dataset and transform components +import { + TitleComponent, + TooltipComponent, + GridComponent, + DatasetComponent, + TransformComponent +} from 'echarts/components'; + +// Features like Universal Transition and Label Layout +import { LabelLayout, UniversalTransition } from 'echarts/features'; + +// Import the Canvas renderer +// Note that including the CanvasRenderer or SVGRenderer is a required step +import { CanvasRenderer } from 'echarts/renderers'; + +// Register the required components +echarts.use([ + BarChart, + TitleComponent, + TooltipComponent, + GridComponent, + DatasetComponent, + TransformComponent, + LabelLayout, + UniversalTransition, + CanvasRenderer +]); + +// The chart is initialized and configured in the same manner as before +var myChart = echarts.init(document.getElementById('main')); +myChart.setOption({ + // ... +}); +``` + +> Ten en cuenta que, para mantener el tamaño del paquete al mínimo, ECharts no proporciona ningún renderizador en la interfaz compatible con tree-shaking. Por lo tanto, debes elegir importar `CanvasRenderer` o `SVGRenderer` como el renderizador. La ventaja de esto es que, si solo necesitas usar el modo de renderizado SVG, el paquete no incluirá el módulo `CanvasRenderer` que no es necesario. + +La pestaña "Código Completo" en nuestra página del editor de muestras ofrece una manera conveniente de generar un código compatible con tree-shaking. Este generará código compatible con tree-shaking basado en la opción actual para usarlo directamente en tu proyecto. + +## Crear un Tipo de Opcion TypeScript + +Para los desarrolladores que están usando TypeScript para desarrollar con ECharts, se proporciona un tipo de interfaz para crear un tipo `EChartsOption` mínimo. Este tipo será más estricto que el proporcionado por defecto, ya que conocerá exactamente qué componentes se están utilizando. Esto puede ayudarte a verificar si falta algún componente o gráfico de manera más efectiva. + + +```ts +import * as echarts from 'echarts/core'; +import { + BarChart, + LineChart, +} from 'echarts/charts'; +import { + TitleComponent, + TooltipComponent, + GridComponent, + // Dataset + DatasetComponent, + // Built-in transform (filter, sort) + TransformComponent +} from 'echarts/components'; +import { LabelLayout, UniversalTransition } from 'echarts/features'; +import { CanvasRenderer } from 'echarts/renderers'; +import type { + // The series option types are defined with the SeriesOption suffix + BarSeriesOption, + LineSeriesOption, +} from 'echarts/charts'; +import type { + // The component option types are defined with the ComponentOption suffix + TitleComponentOption, + TooltipComponentOption, + GridComponentOption, + DatasetComponentOption +} from 'echarts/components'; +import type { + ComposeOption, +} from 'echarts/core'; + +// Create an Option type with only the required components and charts via ComposeOption +type ECOption = ComposeOption< + | BarSeriesOption + | LineSeriesOption + | TitleComponentOption + | TooltipComponentOption + | GridComponentOption + | DatasetComponentOption +>; + +// Register the required components +echarts.use([ + TitleComponent, + TooltipComponent, + GridComponent, + DatasetComponent, + TransformComponent, + BarChart, + LineChart, + LabelLayout, + UniversalTransition, + CanvasRenderer +]); + +const option: ECOption = { + // ... +}; +``` diff --git a/contents/es/basics/inspiration.md b/contents/es/basics/inspiration.md new file mode 100644 index 000000000..4d523cb75 --- /dev/null +++ b/contents/es/basics/inspiration.md @@ -0,0 +1,6 @@ +# Inspirate + +La siguiente lista te proporciona algunas ideas cuando tengas preguntas como "No sé cómo diseñar un gráfico" o "No sé cómo usar Apache ECharts para lograr cierto efecto". + +- [Apache ECharts Official Examples](${mainSitePath}/examples) +- "How To Guides - Common Charts" in this handbook diff --git a/contents/es/basics/release-note/5-2-0.md b/contents/es/basics/release-note/5-2-0.md new file mode 100644 index 000000000..08ffc0c6a --- /dev/null +++ b/contents/es/basics/release-note/5-2-0.md @@ -0,0 +1,471 @@ +# What's New in Apache ECharts 5.2.0 + +## Universal Transition + +Natural and smooth transition animations have been an important feature in Apache ECharts. By avoiding abrupt changes from data update, it not only improves the visual effect, but also provides the possibility to express the association and evolution of data. Therefore, in 5.2.0, we have further enhanced this animation capability. Next, we will see how this **Universal Transition** adds expressiveness and narrative power to the chart. + +In previous versions, transition animations had certain limitations: they could only be used for the position, size of the same shape, and they could only work on the same type of series. For example, the following example reflects the change in data percent through the change in sector shape in a pie chart. + +```js live {layout: 'lr'} +function makeRandomData() { + return [ + { + value: Math.random(), + name: 'A' + }, + { + value: Math.random(), + name: 'B' + }, + { + value: Math.random(), + name: 'C' + } + ]; +} +option = { + series: [ + { + type: 'pie', + radius: [0, '50%'], + data: makeRandomData() + } + ] +}; + +setInterval(() => { + myChart.setOption({ + series: { + data: makeRandomData() + } + }); +}, 2000); +``` + +And starting with 5.2.0, we introduced universal transition, a more powerful animation feature. With that, transitions are no longer limited to between series of the same type. Now, we can use this cross-series morphing to animate between any type of series and any type of shapes. + +How cool would this be? Let's have a look! + +### Morphing transition across series + +With `universalTransition: true` set to enable universion transition feature, switching from pie charts to bar charts, or from bar charts to scatter charts, or even between more complex charts like Sunburst and Treemap, can be morphed naturally. + +As follows, switching between a pie chart and a bar chart. + +```js live {layout: 'bt'} +const dataset = { + dimensions: ['name', 'score'], + source: [ + ['Hannah Krause', 314], + ['Zhao Qian', 351], + ['Jasmin Krause ', 287], + ['Li Lei', 219], + ['Karle Neumann', 253], + ['Mia Neumann', 165], + ['Böhm Fuchs', 318], + ['Han Meimei', 366] + ] +}; +const pieOption = { + dataset: [dataset], + series: [ + { + type: 'pie', + // associate the series to be animated by id + id: 'Score', + radius: [0, '50%'], + universalTransition: true, + animationDurationUpdate: 1000 + } + ] +}; +const barOption = { + dataset: [dataset], + xAxis: { + type: 'category' + }, + yAxis: {}, + series: [ + { + type: 'bar', + // associate the series to be animated by id + id: 'Score', + // Each data will have a different color + colorBy: 'data', + encode: { x: 'name', y: 'score' }, + universalTransition: true, + animationDurationUpdate: 1000 + } + ] +}; + +option = barOption; + +setInterval(() => { + option = option === pieOption ? barOption : pieOption; + // Use the notMerge form to remove the axes + myChart.setOption(option, true); +}, 2000); +``` + +More transitions between common charts. + +![](images/5-2-0/universal-transition.gif) + +Such transitions are no longer limited to just the basic line, bar, and pie charts, but also between bars and maps: + +![](images/5-2-0/universal-transition-2.gif) + +or between Sunburst and Treemap, or even between very flexible custom series can be transitions. + +![](images/5-2-0/universal-transition-3.gif) + +> Note that you need to configure the series ids to ensure that there is a one-to-one correspondence between the series that need to be animated for the transition. + +> Minimal bundle needs to import this feature manually. +> +> ```ts +> import { UniversalTransition } from 'echarts/features'; +> echarts.use([UniversalTransition]); +> ``` + +### Data split and merge animations + +In addition to the common update of data values, sometimes we also encounter data aggregation, drill-down and other updates after interactions, when we can not directly apply one-to-one transitions, but need to use more animation effects like splitting and merging to express the transformation of data. + +In order to be able to express the possible many-to-many connections between data, in 5.2.0 we introduced a new concept `groupId`. We can set the group to the whole series via [series.dataGroupId](${optionPath}series-bar.dataGroupId), or more fine-grained by [series.data.groupId](${optionPath}series-bar.dataGroupId) to set the group to which each data belongs. It's even easier if you use a `dataset` to manage the data, you can use `encode.itemGroupId` to specify a dimension encoded as `groupId`. + +For example, if we want to implement a drill-down animation for a bar chart, we can set the entire series of data after the drill-down to the same `groupId`, which then corresponds to the data before the drill-down + +```js live {layout: 'lr'} +option = { + xAxis: { + data: ['Animals', 'Fruits', 'Cars'] + }, + yAxis: {}, + dataGroupId: '', + animationDurationUpdate: 500, + series: { + type: 'bar', + id: 'sales', + data: [ + { + value: 5, + groupId: 'animals' + }, + { + value: 2, + groupId: 'fruits' + }, + { + value: 4, + groupId: 'cars' + } + ], + universalTransition: { + enabled: true, + divideShape: 'clone' + } + } +}; + +const drilldownData = [ + { + dataGroupId: 'animals', + data: [ + ['Cats', 4], + ['Dogs', 2], + ['Cows', 1], + ['Sheep', 2], + ['Pigs', 1], + ['Cows', 1], + ['Sheep', 2], + ['Pigs', 1] + ] + }, + { + dataGroupId: 'fruits', + data: [ + ['Apples', 4], + ['Oranges', 2], + ['Oranges', 2] + ] + }, + { + dataGroupId: 'cars', + data: [ + ['Toyota', 4], + ['Opel', 2], + ['Volkswagen', 2], + ['Volkswagen', 2] + ] + } +]; + +myChart.on('click', event => { + if (event.data) { + const subData = drilldownData.find(data => { + return data.dataGroupId === event.data.groupId; + }); + if (!subData) { + return; + } + myChart.setOption({ + xAxis: { + data: subData.data.map(item => { + return item[0]; + }) + }, + series: { + type: 'bar', + id: 'sales', + dataGroupId: subData.dataGroupId, + data: subData.data.map(item => { + return item[1]; + }), + universalTransition: { + enabled: true, + divideShape: 'clone' + } + }, + graphic: [ + { + type: 'text', + left: 50, + top: 20, + style: { + text: 'Back', + fontSize: 18 + }, + onclick: function() { + myChart.setOption(option, true); + } + } + ] + }); + } +}); +``` + +With `groupId`, we can also implement richer aggregation and drill-down animations. + +Aggregation of data. + +![](images/5-2-0/group-transition.gif) + +Drilling down of a single series into two series: + +![](images/5-2-0/group-transition-2.gif) + +Universal transition take the ability to express the relationships and evolution of data to a new level, giving wings to your visualization creation inspiration. + +At this point, we know you're already eager to try it out. But don't worry, there are even more new features in 5.2.0 that are worth checking out. + +## Color palette picking strategy + +In the above universal transition example, you may have noticed that we use a `colorBy` configuration that was not available in the previous version. This configuration is also a new feature we added in this version to configure different granularity of color palette color picking for the series. This configuration currently supports two strategies. + +- `'series'` assigns the colors in the palette by series, so that all data in the same series are in the same color. +- `'data'` assigns colors in the palette according to data items, with each data item using a different color. + +Previously, we fixed this strategy for each type of series, for example, the bar chart was fixed with `'series'` and the pie chart was fixed with `'data'`. + +And now with this new feature, we can assign a different color to each data item in the bar chart. + +```js live {layout: 'lr'} +option = { + xAxis: { + type: 'category', + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + }, + yAxis: { + type: 'value' + }, + series: [ + { + data: [120, 200, 150, 80, 70, 110, 130], + type: 'bar', + colorBy: 'data' + } + ] +}; +``` + +Or use one color uniformly in the pie chart. + +```js live {layout: 'lr'} +option = { + series: { + type: 'pie', + colorBy: 'series', + radius: [0, '50%'], + itemStyle: { + borderColor: '#fff', + borderWidth: 1 + }, + data: [ + { + value: 335, + name: 'Direct Visit' + }, + { + value: 234, + name: 'Union Ad' + }, + { + value: 1548, + name: 'Search Engine' + } + ] + } +}; +``` + +This configuration allows us to avoid the trouble of finding palette colors and setting them one by one, and may provide convenience in specific scenarios. We will further enhance this configuration later to provide more strategies. + +## Labels for polar bar charts + +In this version we have implemented labels for bar charts on polar coordinates and support rich label positioning configurations. The following is a progress chart with labels displayed at the start points. + +```js live {layout: 'lr'} +option = { + angleAxis: { + show: false, + max: 10 + }, + radiusAxis: { + show: false, + type: 'category', + data: ['AAA', 'BBB', 'CCC', 'DDD'] + }, + polar: {}, + series: [ + { + type: 'bar', + data: [3, 4, 5, 6], + colorBy: 'data', + roundCap: true, + label: { + show: true, + // Try changing it to 'insideStart' + position: 'start', + formatter: '{b}' + }, + coordinateSystem: 'polar' + } + ] +}; +``` + +More configurations for label positions. + +![](images/5-2-0/polar-bar-label.jpg) + +This flexible label position configuration item greatly enriches the expressiveness of the polar bar chart, allowing the text to clearly match the corresponding data. + +## Pie chart style for empty data + +In the previous version, if there was no data in the pie chart, the screen might be completely blank. Because there was no visual element, users may wonder if there was a bug. + +To solve this problem, in this version we will default to display a gray placeholder circle when there is no data to prevent the screen from being completely blank. We can configure the style of this placeholder circle with `emptyCircleStyle`. + +```js live {layout: 'lr'} +option = { + series: [ + { + type: 'pie', + data: [], + // showEmptyCircle: false, + emptyCircleStyle: { + // change the style to empty circle + color: 'transparent', + borderColor: '#ddd', + borderWidth: 1 + } + } + ] +}; +``` + +If you don't want to show this gray circle, you can also set `showEmptyCircle: false` to turn it off. + +## Performance enhancements for high-dimensional data + +We have introduced [dataset](${optionPath}dataset) since 4.0 to manage chart data. However, in some extreme scenarios with particularly high-dimensional (>100) data, we may encounter some dramatic performance degradation, such as the following scenario of visualizing a thousand-dimensional data through a thousand series ([#11907](https://github.com/apache/echarts/issues/11907)), which may even may lead to getting stuck. + +```js +const indices = Array.from(Array(1000), (_, i) => { + return `index${i}`; +}); +const option = { + xAxis: { type: 'category' }, + yAxis: {}, + dataset: { + // dimension: ['date', . . indices], + source: Array.from(Array(10), (_, i) => { + return { + date: i, + ... .indices.reduce((item, next) => { + item[next] = Math.random() * 100; + return item; + }, {}) + }; + }) + }, + series: indices.map(index => { + return { type: 'line', name: index }; + }) +}; +``` + +The reason for this performance problem is that we process the high-dimensional dataset at the bottom of each series as needed and save a copy of the processed data and the meta information about the dimensions of the data. This meant that the `1000 x 1000` dimensions had to be processed and saved in the example, which put a huge pressure on memory and garbage collection, resulting in a dramatic performance drop for high dimensions. + +In the new version we have optimized this problem so that all series share the dataset storage as much as possible (whether or not they do depends on how the series uses the data). +This optimization ensure that memory does not explode as the dataset dimensions and series grow, significantly improving initialization performance in this extreme scenario. The rendering time for the example just described has also been reduced to an acceptable 300 ms or less. + +It is not just this high-dimensional scenario that benefits from this optimization. When using a dataset with large amount of data, multiple series only process the data once because of data sharing, so it can also bring significant performance gains. + +## Type optimization for custom series + +Custom series provide a very flexible way to create series graphs. Compared to other series, the learning curve for custom series can be a bit steep. Therefore, in this release, we have further optimized the type of the core method `renderItem` in the custom series by making more precise inferences about the types of the parameters and return values of `renderItem`, so that it is possible to infer which properties of the elements can be set based on the type returned: + +```ts +series = { + type: 'custom', + renderItem(params) { + return { + type: 'group', + // The group type uses children to store children of other types + children: [ + { + type: 'circle', + // circle has the following configurable shape attributes + shape: { r: 10, cx: 0, cy: 0 }, + // Configurable styles + style: { fill: 'red' } + }, + { + type: 'rect', + // rect has the following configurable shape properties + shape: { x: 0, y: 0, width: 100, height: 100 } + }, + { + type: 'path', + // Custom path shapes + shape: { d: '...' } + } + ] + }; + } +}; +``` + +## Summary + +If you're interested in some of the features and optimizations in 5.2.0, you may want to update to the latest version of Apache ECharts and try it out for yourself. + +If you're interested in what's next for Apache ECharts, you can also follow our development plans at [GitHub Milestone](https://github.com/apache/echarts/milestones). Feel free to join us as a contributor (learn more at [Wiki](https://github.com/apache/echarts/wiki)). + +## Full Changelog + +View the [Changelog](${mainSitePath}/changelog.html#v5-2-0) diff --git a/contents/es/basics/release-note/5-3-0.md b/contents/es/basics/release-note/5-3-0.md new file mode 100644 index 000000000..6b43ae2be --- /dev/null +++ b/contents/es/basics/release-note/5-3-0.md @@ -0,0 +1,659 @@ +# Apache ECharts 5.3.0 Features + +Apache ECharts 5.3.0 includes significant enhancements to animation expressiveness, rendering performance, and server-side rendering. It also adds long-awaited features from the community, such as automatic alignment of multi-axis ticks, tooltip value formatting, and map projection. + +## Keyframe Animations + +Previously, ECharts animations were focused on transition animations for creating, updating, and removing elements, which often only had a start state and an end state. In order to express more complex animations, we introduced new keyframe animations for custom series and graphics components in 5.3.0. + +Here is a simple effect of a breathing animation implemented via keyframe animation + +```js live {layout: 'lr', height:300} +option = { + graphic: { + type: 'circle', + shape: { r: 100 }, + left: 'center', + top: 'center', + keyframeAnimation: [ + { + duration: 3000, + loop: true, + keyframes: [ + { + percent: 0.5, + easing: 'sinusoidalInOut', + scaleX: 0.1, + scaleY: 0.1 + }, + { + percent: 1, + easing: 'sinusoidalInOut', + scaleX: 1, + scaleY: 1 + } + ] + } + ] + } +}; +``` + +In keyframe animation you can configure the animation duration, delay, easing, whether to loop or not, the position, easing, and graphic properties of each keyframe. You can also set multiple keyframe animations for each element at the same time with different configurations. The flexible configuration allows us to achieve very complex animation effects, and here are a few scenarios where keyframe animation can be applied. + +### Custom Loading Animations + +ECharts has a built-in loading animation by default, which can be displayed by calling `showLoading`. More loading animation effects have been frequently asked in the community. Now with keyframe animations, we can use the [graphic](${optionPath}graphic) component with keyframe animations to achieve any loading animation effect we want. + +Here is an example of the text stroke animation. + +```js live {layout: 'lr', height:300} +option = { + graphic: { + elements: [ + { + type: 'text', + left: 'center', + top: 'center', + style: { + text: 'Apache ECharts', + fontSize: 40, + fontWeight: 'bold', + lineDash: [0, 200], + lineDashOffset: 0, + fill: 'transparent', + stroke: '#000', + lineWidth: 1 + }, + keyframeAnimation: { + duration: 3000, + loop: true, + keyframes: [ + { + percent: 0.7, + style: { + fill: 'transparent', + lineDashOffset: 200, + lineDash: [200, 0] + } + }, + { + // Stop for a while. + percent: 0.8, + style: { + fill: 'transparent' + } + }, + { + percent: 1, + style: { + fill: 'black' + } + } + ] + } + } + ] + } +}; +``` + +Or animate columns. + +```js live {layout: 'lr', height:300} +const columns = []; +for (let i = 0; i < 7; i++) { + columns.push({ + type: 'rect', + x: i * 20, + shape: { + x: 0, + y: -40, + width: 10, + height: 80 + }, + style: { + fill: '#5470c6' + }, + keyframeAnimation: { + duration: 1000, + delay: i * 200, + loop: true, + keyframes: [ + { + percent: 0.5, + scaleY: 0.1, + easing: 'cubicIn' + }, + { + percent: 1, + scaleY: 1, + easing: 'cubicOut' + } + ] + } + }); +} +option = { + graphic: { + elements: [ + { + type: 'group', + left: 'center', + top: 'center', + children: columns + } + ] + } +}; +``` + +### Extending Richer Animation Effects in the Chart + +Scatter charts with animation effects have long been a feature of ECharts. Developers can use the [effectScatter](${optionPath}series-effectScatter) series to implement dynamic scatter charts with ripple effects, which make charts more interesting and also serve to highlight the user. As with loading animations, developers often ask for more animation effects. Now we can achieve more complex effects by using keyframe animations in our [custom](${optionPath}series-custom) series. + +For example, the following example animates the pins drawn by the custom series on the SVG map with a jumping effect, along with a ripple animation. + + + +```js live {layout: 'lr', readOnly: true } +fetch( + 'https://fastly.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/geo/Map_of_Iceland.svg' +) + .then(response => response.text()) + .then(svg => { + echarts.registerMap('iceland_svg', { svg: svg }); + option = { + geo: { + map: 'iceland_svg', + left: 0, + right: 0 + }, + series: { + type: 'custom', + coordinateSystem: 'geo', + geoIndex: 0, + zlevel: 1, + data: [ + [488, 459, 100], + [770, 757, 30], + [1180, 743, 80], + [894, 1188, 61], + [1372, 477, 70], + [1378, 935, 81] + ], + renderItem(params, api) { + const coord = api.coord([ + api.value(0, params.dataIndex), + api.value(1, params.dataIndex) + ]); + + const circles = []; + for (let i = 0; i < 5; i++) { + circles.push({ + type: 'circle', + shape: { + cx: 0, + cy: 0, + r: 30 + }, + style: { + stroke: 'red', + fill: 'none', + lineWidth: 2 + }, + // Ripple animation + keyframeAnimation: { + duration: 4000, + loop: true, + delay: (-i / 4) * 4000, + keyframes: [ + { + percent: 0, + scaleX: 0, + scaleY: 0, + style: { + opacity: 1 + } + }, + { + percent: 1, + scaleX: 1, + scaleY: 0.4, + style: { + opacity: 0 + } + } + ] + } + }); + } + return { + type: 'group', + x: coord[0], + y: coord[1], + children: [ + ...circles, + { + type: 'path', + shape: { + d: + 'M16 0c-5.523 0-10 4.477-10 10 0 10 10 22 10 22s10-12 10-22c0-5.523-4.477-10-10-10zM16 16c-3.314 0-6-2.686-6-6s2.686-6 6-6 6 2.686 6 6-2.686 6-6 6z', + x: -10, + y: -35, + width: 20, + height: 40 + }, + style: { + fill: 'red' + }, + // Jump animation. + keyframeAnimation: { + duration: 1000, + loop: true, + delay: Math.random() * 1000, + keyframes: [ + { + y: -10, + percent: 0.5, + easing: 'cubicOut' + }, + { + y: 0, + percent: 1, + easing: 'bounceOut' + } + ] + } + } + ] + }; + } + } + }; + + myChart.setOption(option); + }); +``` + +### Loading Lottie animations + +In order to fully exploit the power of new keyframe animations, Yi Shen from the ECharts team wrote a [Lottie animation parsing library](https://github.com/pissang/lottie-parser) that can parse Lottie animation files into the ECharts graphics format for rendering. Combined with Lottie's expressive power we can introduce more amazing animations to our projects. + +## Graphical component transition animations + +We have provided more flexible transition animation configurations for elements returned in the custom series in 5.0. The `transition`, `enterFrom`, and `leaveTo` configuration items allow you to configure which properties of each element will have transition animations and how they will be animated when the graphic is created and removed. Here is an example. + +```js +function renderItem() { + //... + return { + //... + x: 100, + // 'style', 'x', 'y' will be animated + transition: ['style', 'x', 'y'], + enterFrom: { + style: { + // Fade in + opacity: 0 + }, + // Fly in from the left + x: 0 + }, + leaveTo: { + // Fade out + opacity: 0 + }, + // Fly out to the right + x: 200 + }; +} +``` + +In 5.3.0 we extended the configuration of these transition animations to the graphic component, with made additional enhancements. + +If you don't want to write out each property to be animated, you can now directly configure `transition: 'all'` to animate all properties. + +We also added `enterAnimation`, `updateAnimation`, and `leaveAnimation` to configure the `duration`, `delay`, and `easing` of the entry, update, and exit animations for each graphic, respectively. Gradient colors now also support animations. + +## New SVG renderer + +In 5.3.0 we refactored our SVG renderer, which delivers 2x ~ 10x performance improvements, and even tens of times in some special scenes. + +Previously, we updated the SVG renderer directly from the render queue to the DOM, but since zrender's graphics properties were not one-to-one with the DOM, we had to implement very complex diff logic in the middle, which was error-prone and did not provide the best performance in some scenarios. In this version, we reconstruct the full rendering to VDOM first, and then patch the VDOM to DOM to finish the rendering. Full rendering avoids potential bugs caused by complex diff logic, and the one-to-one correspondence between VDOM and DOM ensures that updates are minimal when patching, resulting in a huge performance boost. + +[This example](https://echarts.apache.org/examples/zh/editor.html?c=geo-svg-scatter-simple&renderer=svg) gives you an intuitive impression of the performance improvement. The new version is much smoother than the previous version when dragging the chart in SVG mode. + +| 5.2.2 (Before) | 5.3.0 (After) | +| :------------------------------------: | :----------------------------------: | +| ![before](images/5-3-0/svg-before.gif) | ![after](images/5-3-0/svg-after.gif) | ! | + +In addition to the performance improvement, we can do more things with the rendered VDOM, such as server-side rendering, which will be described below. + +## Server-side Rendering with Zero Dependencies + +In previous versions, ECharts could also implement server-side rendering, but it had to rely on [node-canvas](https://github.com/Automattic/node-canvas), or [JSDOM](https://github.com/jsdom/jsdom) if you were using SVG mode to simulate the DOM environment. These dependencies not only bring additional size and usage requirements, but also affect performance. + +This new SVG renderer allows us to get the string from the intermediate rendered VDOM, bringing completely zero-dependency server-side rendering and outputting a more refined SVG string integrated CSS animation. + +```ts +const echarts = require('echarts'); + +// In SSR mode the first parameter does not need to be passed in as a DOM object +const chart = echarts.init(null, null, { + renderer: 'svg', // must use SVG mode + ssr: true, // enable SSR + width: 400, // need to specify height and width + height: 300 +}); + +// setOption as normal +chart.setOption({ + xAxis: { + type: 'category', + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + }, + yAxis: { + type: 'value' + }, + series: [ + { + data: [120, 200, 150, 80, 70, 110, 130], + type: 'bar' + } + ] +}); + +// Output string +const svgStr = chart.renderToSVGString(); +``` + +## Customizing Map Projections + +Maps have always been a very widely used component in ECharts. Typically a map component uses GeoJSON formatted data with latitude and longitude stored. ECharts then calculates the appropriate display area and maps the latitude and longitude linearly to that area. This is the simplest way to project a map. However, the simple linear projection does not work for complex map scenarios, such as using [Albers](https://en.wikipedia.org/wiki/Albers_projection) projection to solve the distortion problem in linear projection, or having the Pacific in the middle of the world map, etc. + +So in 5.3.0 we introduced extending map projection. It tells ECharts how to project coordinates and how to calculate latitude and longitude from the projected coordinates via the `project` and `unproject` methods. The following is a simple example of using the Mercator projection. + +```ts +series = { + type: 'map', + projection: { + project: point => [ + (point[0] / 180) * Math.PI, + -Math.log(Math.tan((Math.PI / 2 + (point[1] / 180) * Math.PI) / 2)) + ], + unproject: point => [ + (point[0] * 180) / Math.PI, + ((2 * 180) / Math.PI) * Math.atan(Math.exp(point[1])) - 90 + ] + } +}; +``` + +In addition to implementing our own projection formula, we can also use projections implementations provided by third-party libraries such as [d3-geo](https://github.com/d3/d3-geo). + +```ts +const projection = d3.geoConicEqualArea(); +// ... +series = { + type: 'map', + projection: { + project: point => projection(point), + unproject: point => projection.invert(point) + } +}; +``` + +In conjunction with the new global transition animation feature added in 5.2, we can animate the transition between different projection effects: ! + +![map-projection-animation](images/5-3-0/map-projection.gif) + +In addition to the map projection, we have made the following two enhancements to the map in this release. + +- Provided `'LineString'` and `'MultiLineString'` support for GeoJSON data. +- Changed the calculation of the default label position from the center of the bounding box to the centroid of the largest area for more accurate results. + +## Ticks Alignment of Multiple Axes + +Ticks alignment of multiple axes is a long-standing requirement in the community, and we can see many articles in the community on how to implement axis alignment in ECharts, which is usually troublesome and limited. + +In 5.3.0, we finally introduced the feature of aligning ticks on the `'value'` and `'log'` axes. You can configure `alignTicks: true` in the axis that needs to be aligned. The axis will then adjust its own ticks according to the first axis's ticks, enabling automatic alignment. + +```js live { layout: 'bt' } +option = { + tooltip: { + trigger: 'axis' + }, + legend: {}, + xAxis: [ + { + type: 'category', + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + axisPointer: { + type: 'shadow' + } + } + ], + yAxis: [ + { + type: 'value', + name: 'Precipitation', + alignTicks: true, + axisLabel: { + formatter: '{value} ml' + } + }, + { + type: 'value', + name: 'Temperature', + axisLabel: { + formatter: '{value} °C' + } + } + ], + series: [ + { + name: 'Evaporation', + type: 'bar', + // prettier-ignore + data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] + }, + { + name: 'Precipitation', + type: 'bar', + // prettier-ignore + data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] + }, + { + name: 'Temperature', + type: 'line', + yAxisIndex: 1, + data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] + } + ] +}; +``` + +## Disable Emphasis and Select State + +The `emphasis` state in ECharts provides feedback to the user when the mouse is over an element, but in a chart with a large number of elements, the highlighting animation can cause performance issues. In particular, highlighting triggered by [tooltip](${optionPath}tooltip) or [legend](${optionPath}tooltip) component linkage can highlight multiple elements at the same time. + +Therefore, in this release we have added `emphasis.disabled` configuration. If you don't need the highlighting feedback and you are concerned about the interactivity, you can disable the `emphasis` state with this option. + +For the `select` state, we have also added `select.disabled`. This option can be used to configure some of the data to be unselectable. + +## Support for Selecting Entire Series + +As of 5.3.0 we support configuring `selectedMode` to `'series'` to enable selection of all data in a series. + +## Formatting of Values in Tooltip + +Tooltips can be used to display more detailed information about the data item when the user hovers it. ECharts also provides a `formatter` callback function to give developers more flexibility to customize the content of the tooltip. + +However, we found that most of the time, developers only needed to format the value part of the tooltip, such as fixed precision, prefixed with `$`, etc. Previously, in order to format the number, developers had to rewrite the entire content of the tooltip with `formatter`. Especially after 5.0, ECharts hint boxes have become more complex and beautiful, so rewriting them becomes costly and difficult to achieve the default results. + +So in this version, we have added a `valueFormatter` configuration to the tooltip for formatting the value part. + +As in the axis alignment example, we can add the °C and ml suffixes to the value part of the tooltip. + +```js live { layout: 'bt' } +option = { + tooltip: { + trigger: 'axis' + }, + legend: {}, + xAxis: [ + { + type: 'category', + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + axisPointer: { + type: 'shadow' + } + } + ], + yAxis: [ + { + type: 'value', + name: 'Precipitation', + alignTicks: true, + axisLabel: { + formatter: '{value} ml' + } + }, + { + type: 'value', + name: 'Temperature', + axisLabel: { + formatter: '{value} °C' + } + } + ], + series: [ + { + name: 'Evaporation', + type: 'bar', + tooltip: { + valueFormatter: value => value + ' ml' + }, + // prettier-ignore + data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] + }, + { + name: 'Precipitation', + type: 'bar', + tooltip: { + valueFormatter: value => value + ' ml' + }, + // prettier-ignore + data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] + }, + { + name: 'Temperature', + type: 'line', + yAxisIndex: 1, + tooltip: { + valueFormatter: value => value + ' °C' + }, + data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] + } + ] +}; +``` + +Each series can configure its own `valueFormatter` according to its own value format. + +## More Flexible Sector Corner Radius + +In 5.0 we have added rounded corners configuration for sectors, which can make pie charts, sunburst charts more interesting. Previously, we only supported the inner and outer radius separately, this time we go a step further and support the four corners of the sector to be configured with different corner radius to bring more flexible display. + +```js live { layout: 'lr', height: 400 } +option = { + tooltip: { + trigger: 'item' + }, + legend: { + top: '5%', + left: 'center' + }, + series: [ + { + name: 'Access From', + type: 'pie', + radius: ['30%', '70%'], + roseType: 'angle', + itemStyle: { + borderRadius: [20, 5, 5, 10], + borderColor: '#fff', + borderWidth: 2 + }, + label: { + show: false + }, + data: [ + { value: 800, name: 'Search Engine' }, + { value: 735, name: 'Direct' }, + { value: 580, name: 'Email' }, + { value: 484, name: 'Union Ads' }, + { value: 400, name: 'Video Ads' } + ] + } + ] +}; +``` + +## Complex Label Optimization for Pie charts + +Pie charts have always been one of the most complex charts on the label display in ECharts. We have been optimizing the layout and display of the pie chart labels for a long time. + +This time, we have done a deep optimization for pie chart labels that use text wrapping, background colors, rich text, and other complex layouts. In the adaptive width, container overflow, guide line calculation than before there are better results: + +| 5.2.2 (Before) | 5.3.0 (After) | +| :-------------------------------------------: | :-----------------------------------------: | +| ![before](images/5-3-0/pie-label-before.png) | ![after](images/5-3-0/pie-label-after.png) | ! | +| ![before](images/5-3-0/pie-label-before2.png) | ![after](images/5-3-0/pie-label-after2.png) | ! | + +## bar chart large mode optimization + +In the cases of a large amount of data (> 2k), we support bar charts to speed up rendering and improve interactive performance by turning on [large](${optionPath}series-bar.large) mode. But previously the layout of bar charts in [large](${optionPath}series-bar.large) mode was simple and did not support the layout after stacking multiple series. In 5.3.0, we have optimized the layout of [large](${optionPath}series-bar.large) mode to be consistent with the normal mode. We can optimize the performance of the bar chart in more scenarios by turning on [large](${optionPath}series-bar.large). + +In addition, the optimized bar chart layout also fixes the bug of incorrect stacking on non-linear axes like logarithmic axes. + +## Breaking Changes + +### registerMap and getMap methods need to be used only after the map chart is imported + +To reduce the size of the minimum bundle, we removed the map data management methods `getMap` and `registerMap` from the core module. + +If you are [only importing necessary charts and components](https://echarts.apache.org/handbook/en/basics/import/#importing-required-charts-and-components-to-have-minimal-bundle), you need to ensure that you have imported `GeoComponent` or `MapChart` before you can register map data with `registerMap`. + +```ts +import * as echarts from 'echarts/core'; +import { MapChart } from 'echarts/charts'; + +echarts.use([MapChart]); + +// You must import the MapChart with the `use` method before you can register the map with registerMap +echarts.registerMap('world', worldJSON); +``` + +If you are using `import * as echarts from 'echarts'` to import the whole package, this change will not affect you in any way. + +### Removing the default bolding emphasis effect in the line chart + +We introduced the default bolding emphasis effect for line charts in 5.0, but the community feedback was that this didn't looks well in many scenarios. So in this version we changed this effect from on by default to off by default. You can enable it by: + +```ts +series = { + type: 'line', + //... + emphasis: { + lineStyle: { + width: 'bolder' + } + } +}; +``` + +## Full Changelog + +View the [Changelog](${mainSitePath}/changelog.html#v5-3-0) diff --git a/contents/es/basics/release-note/5-4-0.md b/contents/es/basics/release-note/5-4-0.md new file mode 100644 index 000000000..ace136a44 --- /dev/null +++ b/contents/es/basics/release-note/5-4-0.md @@ -0,0 +1,49 @@ +# Apache ECharts 5.4.0 Features + +## Intelligent Pointer Snapping + +Some interactive elements may be relatively small in charts, so sometimes it is difficult for users to click and do other operations accurately, especially on the mobile. Therefore, in Apache ECharts 5.4.0, we introduced the concept of "intelligent pointer snapping". + +See [intelligent pointer snapping](${lang}/how-to/interaction/coarse-pointer) for details. + +## Using Pie charts in more coordinate systems + +A very powerful feature of Apache ECharts is the combination of various chart types, coordinate systems, and components. In this version, we have added the coordinate systems option for pie charts. + +Thus, pie charts can appear in the Cartesian coordinate systems, + +![](images/5-4-0/pie-grid.png) + +calendar coordinate systems, + +![](images/5-4-0/pie-calendar.png) + +geographical coordinate systems, + +![](images/5-4-0/pie-geo.png) + +and even with the Baidu Map and Gaode Map extension. + +![](images/5-4-0/pie-bmap.png) + +![](images/5-4-0/pie-amap.png) + +This greatly extends the flexibility of pie charts, allowing developers to create more combinations of chart effects using Apache ECharts. + +## Ukrainian Translation + +In this release, we added the support of the Ukrainian language. **Now Apache ECharts supports 17 languages!** + +> If you need to use a language other than English or Chinese, you need to call `echarts.registerLocale` to initialize the chart before initializing it, and then pass `opts.locale` to modify the chart language during `init`. + +## Gauge Label Rotation + +In this version, we support text rotation of the Gauge series. + + + +`axisLabel.rotate` can be set to `'tangential' | 'radial' | number`. If it is of type `number`, it indicates the rotation angle of the label from -90 degrees to 90 degrees, with positive values being counterclockwise. In addition to this, it can also be the strings `'radial'` for radial rotation and `'tangential'` for tangential rotation. + +## Full Changelog + +View the [Changelog](${mainSitePath}/changelog.html#v5-4-0) diff --git a/contents/es/basics/release-note/5-5-0.md b/contents/es/basics/release-note/5-5-0.md new file mode 100644 index 000000000..42af8b3d9 --- /dev/null +++ b/contents/es/basics/release-note/5-5-0.md @@ -0,0 +1,173 @@ +# Apache ECharts 5.5.0 Features + +## Enhanced ESM Support + +This feature is a significant change to the default ESM package, specifically designed for developer testing and Node.js usage in module customization scenarios. + +Previously, ECharts only exported `*.esm` files in npm (in the lib directory of the npm package). While this worked well in bundlers, it didn’t perform as well in the Node.js runtime and some Node.js-based testing frameworks like vitest and jest. + +With this new feature, we’ve made several changes to improve this: + +- Added `"type": "module"` to package.json +- Added `"exports": {...}"` to package.json +- Added some `package.json` files to the sub-directory, which only contain `"type": "commonjs"`. + +These changes mean that files like `echarts/core.js` can now be resolved as ESM in environments like pure Node.js, vitest, jest, and create-react-app. + +We’ve also ensured that this new feature is compatible with a variety of environments, including runtime (node/vitest/jest(create-react-app)/ssr/…) and bundlers (webpack/rollup/vite/esbuild/…). + +We’re excited about this new feature and believe it will significantly improve the developer experience. + +## Server-Side Rendering ＋ Lightweight Client Runtime + +Apache ECharts is powerful, but correspondingly, it has a large package size. We have made various efforts to improve this in previous versions. Developers can use TreeShaking to load parts of the code as needed, reducing the amount of code loaded. Starting from Apache ECharts version 5.3, we support a server-side SVG string rendering solution with zero dependencies, and support the initial animation of charts. In this way, using the result of server-side rendering as the first screen rendering can greatly reduce the first screen loading time. + +Although server-side rendering is an effective solution to reduce the package size, if some interactions need to be implemented on the client side, it is still necessary to load echarts.js, which may increase the loading time. For some scenarios that require faster page loading, this may not be an ideal choice. + +In version 5.5.0, we added a lightweight runtime for the client side, so the client does not need to load the full ECharts to implement some interactions. In this way, we can render charts on the server side, and then load the lightweight runtime on the client side to implement some common interactions. This means that only 4KB of lightweight runtime (1KB after gzip) is needed to implement charts with initial animations and some commonly used interaction forms. This improvement will greatly increase the page loading speed, especially for the mobile experience. + +![](images/5-5-0/ssr-example.png) + +Take this pie chart with a title as an example, if the client only packages the pie chart and title components, it needs 135KB after gzip; if it follows the server-side rendering solution, the rendering result SVG is 1 KB after gzip, and the client runtime is 1KB after gzip, only 1.5% of the former volume. In terms of interaction, the latter can also achieve initial animation, highlighting after the mouse moves to the chart element, and get click events, which can meet most of the common interaction needs. + +If you need to use this solution, the server-side code remains the same, but you need to make sure that the ECharts version is above 5.5.0. + +```ts +// Server-side code +const echarts = require('echarts'); + +// In SSR mode the first container parameter is not required +let chart = echarts.init(null, null, { + renderer: 'svg', // must use SVG rendering mode + ssr: true, // enable SSR + width: 400, // need to specify height and width + height: 300 +}); + +// use setOption as normal +chart.setOption({ + //... +}); + +// Output a string +const svgStr = chart.renderToSVGString(); + +// Dispose it to release memory +chart.dispose(); +chart = null; + +// Response to the browser (using Express.js as example): +res.writeHead(200, { + 'Content-Type': 'application/xml' +}); +res.write(svgStr); +res.end(); +``` + +The client adds the obtained SVG string to the container and binds the lightweight runtime: + +```html +
+ + + +``` + +The lightweight client runtime must be used in conjunction with the server-side rendering results in SVG format, supporting the following interactions: + +- Initial animation of the chart (implementation principle: the SVG rendered by the server has CSS animation) +- Highlight style (implementation principle: the SVG rendered by the server has CSS animation) +- Dynamically change data (implementation principle: the lightweight runtime requests the server for secondary rendering) +- Click the legend to toggle whether the series is displayed (implementation principle: the lightweight runtime requests the server for secondary rendering) + +As you can see, this can satisfy most interactive scenario needs. If more complex interactions are needed, the client needs to load `echarts.js` to implement complete functionality. For a complete introduction, please refer to [Server-side Rendering ECharts Charts](${lang}/how-to/cross-platform/server). + +## Data Drilldown Supports Transition Animation + +In version 5.5.0, we added the `childGroupId` configuration item, which can realize the transition animation function of data drilldown. + +In previous versions, we already support using `groupId` to represent the group to which the current data belongs. The newly added `childGroupId` can be used to express the group of the current data itself, forming a \`parent-child-grandchild\` relationship chain after being used in conjunction with `groupId`. When the user clicks on the data element in the chart, the chart will display the drilled down data in the form of transition animation. + + + +Developers only need to specify `groupId` and `childGroupId`, and ECharts will automatically handle the hierarchical relationship and realize the transition animation. + +## Pie Chart Supports Gaps Between Sectors + +By setting gaps between the sectors of the pie chart, the data blocks of the pie chart can be clearer and form unique visual effects. See ([series-pie.padAngle](${optionPath}series-pie.padAngle)). + + + +## Pie Chart and Polar Coordinate System Support End Angle + +The end angle configuration item allows us to make incomplete pie charts such as semi-circles. See ([series-pie.endAngle](${optionPath}series-pie.endAngle)). + + + +The polar coordinate system also supports the end angle, which can create more diverse polar coordinate charts. See ([angleAxis.endAngle](${optionPath}angleAxis.endAngle)). + + + +## Added `min-max` Sampling Method + +The ECharts [sampling](${optionPath}series-line.sampling) configuration item allows for setting the downsampling strategy for line charts when the amount of data is far greater than the number of pixels, which can effectively optimize the drawing efficiency of the chart. In version 5.5.0, we added the `min-max` sampling method, which can display the extremes of the data more accurately while retaining the overall trend of the data. + +## Added Two Languages: Arabic and Dutch + +In version 5.5.0, we added support for two languages, Arabic (AR) and Dutch (NL). Developers can register new language packs through the [echarts.registerLocale](${mainSitePath}api.html#echarts.registerLocale) method. + +## Tooltip Supports Specifying Container + +In previous versions, the Tooltip could only be inserted into the chart container or `document.body`. Now, you can specify the container through [tooltip.appendTo](${optionPath}tooltip.appendTo), so you can control the position of the tooltip more flexibly. + +## Alignment Mode of Maximum and Minimum Labels on Axis + +In version 5.5.0, we added [axisLabel.alignMinLabel](${optionPath}xAxis.axisLabel.alignMinLabel) and [axisLabel.alignMaxLabel](${optionPath}xAxis.axisLabel.alignMaxLabel) configuration items, which can control the alignment mode of the maximum and minimum labels on the axis. If the drawing area of the chart is relatively large and you don't want the axis label to overflow, you can align the maximum and minimum labels to the right and left, respectively. + +## Pictorial Bar Chart Supports Clipping + +The pictorial bar chart may exceed the drawing area. If you want to avoid this, you can clip it through the [series-pictorialBar.clip](${optionPath}series-pictorialBar.clip) configuration item. + +## Added `dataIndex` Parameter For Tooltip `valueFormatter` + +`valueFormatter` can be used to customize the value part of the tooltip content, and now an `dataIndex` parameter has been added, which can be used to obtain the index of the current data. + +## Full Changelog + +View the [Changelog](${mainSitePath}changelog.html#v5-5-0) diff --git a/contents/es/basics/release-note/5-6-0.md b/contents/es/basics/release-note/5-6-0.md new file mode 100644 index 000000000..575625f0c --- /dev/null +++ b/contents/es/basics/release-note/5-6-0.md @@ -0,0 +1,75 @@ +# Apache ECharts 5.6.0 Features + +## Define Region Styles in Original GeoJSON Data + +ECharts maps use GeoJSON format to define data. In theory, following the principle of "separation of data and style", GeoJSON should only define data while styles should be defined in ECharts. However, in some cases, styles themselves are a form of data expression (for example: using dashed lines to represent disputed borders - here the "dashed line" is a style but actually expresses a data concept, so defining styles in GeoJSON is reasonable). + +In ECharts 5.6.0, we support defining region styles in the original GeoJSON data by specifying `features[].properties.echartsStyle`. This is consistent with the [data](${optionPath}series-map.data) option, which supports configuring `itemStyle`, `label`, `tooltip` etc. Example: + +```ts +geoJSON.features[0].properties.echartsStyle = { + itemStyle: { + areaColor: 'green' + } +} + +geoJSON.features[1].properties.echartsStyle = { + selected: true, + label: { + formatter: 'Default Selected:\n{b}' + } +} + +geoJSON.features[2].properties.echartsStyle = { + itemStyle: { + borderType: 'dotted', + borderColor: 'blue' + } +} + +geoJSON.features[11].properties.echartsStyle = { + itemStyle: { + // This region will be overridden as `cyan` by the data item option + areaColor: 'black' + }, + tooltip: { + formatter: function (params) { + return 'This is a custom tooltip from GeoJSON: ' + params.name; + } + } +} +``` + +## Axis Labels Support Tooltips + +In some cases, axis labels are too long or we want to display more information on axis labels. In ECharts 5.6.0, we support adding tooltips to axis labels. The configuration is consistent with the `tooltip` option, please refer to [axis.tooltip documentation](${optionPath}xAxis.tooltip) for details. + +![](images/5-6-0/axis-tooltip.png) + +## Sunburst Chart Supports Focusing All Descendants and Ancestors + +In previous versions of sunburst charts, [emphasis.focus](${optionPath}series-sunburst.emphasis.focus) supported the following values: + +- `'none'` Do not fade out other data, it's by default. +- `'self'` Only focus (not fade out) the element of the currently highlighted data. +- `'series'` Focus on all elements of the series which the currently highlighted data belongs to. +- `'ancestor'` Focus on all ancestor nodes. +'descendant' Focus on all descendants nodes. + +In ECharts 5.6.0, we added `'relative'`, which focuses on all descendants and ancestor nodes. + +![](images/5-6-0/sunburst-emphasis-relative.png) + +## Added Support for Two New Languages + +In this version, support for Swedish and Persian languages has been added. With this, ECharts now supports 22 languages. + +## Line Chart Performance Optimization + +In this version, we optimized the rendering performance of line charts, solving the problem of memory growth with time. + +## Complete Changelog + +View the [changelog](${mainSitePath}changelog.html#v5-6-0) + +The next major version, Apache ECharts 6.0.0, is currently being actively developed and is expected to be released in the first quarter of 2025. Stay tuned for more updates. diff --git a/contents/es/basics/release-note/v5-feature.md b/contents/es/basics/release-note/v5-feature.md new file mode 100644 index 000000000..cc0b9f959 --- /dev/null +++ b/contents/es/basics/release-note/v5-feature.md @@ -0,0 +1,196 @@ +# New features in ECharts 5 + +Data visualization has come a long way in the last few years. Developers no longer expect visualization products to be simple chart creation tools, but have more advanced needs in terms of interaction, performance, data processing, and more. + +Apache ECharts has always been committed to making it easier for developers to create flexible and rich visualizations. In the latest release of Apache ECharts 5, we have focused on enhancing the storytelling of charts, allowing developers to tell the story behind the data in a simpler way. + + + +"The core of Apache ECharts 5 is "Show, do not tell", which is a comprehensive upgrade of five topics and 15 features around the stroy telling of visualizations, allowing charts to better tell the story behind the data. It helps developers to create visualizations that meet the needs of various scenarios more easily. + +## Storytelling + +The importance of animation to human cognition cannot be overstated. In our previous work, we used initialization animations and transition animations to help users understand the connection between data transformations, making the appearance of charts and transformations seem less rigid. This time, we have even enhanced our animation capabilities, even more significantly. We hope to further exploit the role of animation to help users' cognition, and help them understand the story behind the chart more easily with the dynamic stroy function of the chart. + +#### Bar/Line Racing + +Apache ECharts 5 adds support for dynamically sorted bar-racing and dynamically sorted line-racing charts to help developers easily create time-series charts that show changes in data over time and tell the evolution of data. + + + + +The dynamic sorting chart shows the derivation of different categories in the ranking over time. The developer can enable this effect in ECharts with a few simple configuration code. + +#### Custom Series Animation + +In addition to dynamic sorting charts, Apache ECharts 5 provides even richer and more powerful animations in the custom series, supporting interpolation animations for label value text, transition animations for morph, combine, separate, and other effects of graphics. + +Imagine what amazing visualizations you can create with these dynamic effects! + +## Visual Design + +The role of visual design is not only to make the chart look better, but more importantly, a design that conforms to the principles of visualization can help users understand more quickly what the chart is trying to say and eliminate as much misunderstanding as possible from poor design. + +#### Overall Design + +We have found that a large percentage of developers use the default theme style for ECharts, so it is important to have an elegant default theme design. In Apache ECharts 5, we redesigned the default theme style, optimizing it for different charts and components. For example, we took into account factors such as differentiation between colors, contrast with background colors, and harmony with adjacent colors, and ensured that people with color blindness could clearly distinguish data. + + + +Let's look at the new version of the light and dark theme styles using the most commonly used bar chart as an example. + + + + +For the line chart, there is an intuitive style change that the axis line and axis tick of the y axis (`value` axis) are hidden by default. Look at the following image, the left one is the default style of the line chart in `v4` and the right one is the new style in `v5`. In fact, we already can figure out the values just by the split lines, so we hope to hide unnecessary elements to deliver the chart message in a clearer way. + + + +For the data area zoom, timeline and other interactive components, we also designed a new style and provide a better interactive experience: + + + + + +#### Label + +Labels are one of the core elements of a chart, and clear and unambiguous labels help users to have a more accurate understanding of the data. Apache ECharts 5 provides a variety of new labeling features that allow dense labels to be clearly displayed and accurately represented. + +Apache ECharts 5 can be enabled to automatically hide overlapping labels through a configuration item. For labels that exceed the display area, you can choose to automatically truncate or line break them. Dense pie chart labels now have a more aesthetically pleasing automatic layout. + +These features can help avoid text that is too dense and affects readability. And, no additional code needs to be written by the developer for them to take effect by default, greatly simplifying the development cost for developers. + +We also provide several configuration options to allow developers to actively control the layout strategy of tabs, such as tab dragging, overall display at the edge of the canvas, connecting with guide lines and graphical elements, and still linking to highlight the associated relationships. + +The new label feature allows you to have very clear label presentation even in a confined space mobile: + + + +#### Time Axis + +Apache ECharts 5 brings a time axis suitable for expressing timestamp scales. The default design of the time axis highlights important information more prominently and provides more flexible customization capabilities, allowing developers to tailor the time axis's label content to different needs. + +First of all, the time axis is no longer split absolutely evenly as before, but instead selects more meaningful points like year, month, day, and whole point to display, and can show different levels of scales at the same time. The `formatter` of labels supports templates for time (e.g. `{yyyy}-{MM}-{dd}`), and different `formatter` can be specified for labels with different time granularity, which can be combined with rich text labels to create eye-catching and diverse time effects. + +The display of the time scale at different dataZoom granularities. + + + + + +#### Tooltip + +Tooltip is one of the most commonly used visualization components to help users interactively understand the details of data. In Apache ECharts 5, we have optimized the style of the tooltip, making the default display of the tooltip elegant and clear by adjusting the font style, color, arrow pointing to the graph, border color following the graph color, and other features. The rendering logic of rich text has been improved to ensure that the display is consistent with the HTML way, allowing users to choose different technical solutions to achieve the same effect in different scenarios. + + + + +In addition to this, we have also added the ability to sort the list in the tip box by value size or category order this time. + +#### Gauge + +We have seen a lot of cool gauge charts created by community users, but the way they are configured is often complex and tricky. Therefore, we have upgraded the gauge to support image or vector path drawing pointers, anchor configurations, progress bars, rounded corner effects, and more. + +Different styles of gauge pointers. + + + +These upgrades not only allow developers to achieve cool effects with simpler configuration items, but also bring richer customization capabilities. + + + +#### Round Corner + +Apache ECharts 5 supports round corner for pie charts, sunburst charts, and treemap charts. Don't underestimate the simplicity of the rounded corners configuration, but combine them with other effects to create a more personalized visualization. + + + +## Interactivity + +The interactivity of the visualization helps users explore the work and deepen their understanding of the main idea of the diagram. + +#### Multi-State + +In ECharts 4, there were two interactive states, `emphasis` and `normal`, graph will enter the `emphasis` state when the mouse hovered to distinguish the data. + +This time in Apache ECharts 5, we have added a new effect of **blur** other non-related elements to the original mouse hover highlighting, so that the target data can be focused. + +For example, in this [bar chart](https://echarts.apache.org/examples/en/editor.html?c=bar-y-category-stack) example, when the mouse hovers over a series, other non-related series will fade out, thus highlighting more clearly the comparison of data in the focused series. of data in the comparison. On diagrams with more complex data structures such as relationship, tree, sunburst, sankey, etc., it is also possible to see the connections between data by fading out non-related elements. Also, colors, shadows, and other styles that can be set in `emphasis` can now be set in `blur`. + +In addition, we've added **click to select** to all series, an interaction that was previously only available in a few series such as pie charts and maps, allowing developers to set it to single or multiple selection mode, and to listen to the `selectchanged` event to get all the selected shapes for further processing. As with `emphasis` and `blur`, the selection style can also be configured in `select`. + +#### Performance improvements + +##### Dirty Rectangle Rendering + +Apache ECharts 5 has new support for dirty rectangle rendering to address performance bottlenecks in large scenes with only local changes. When using the Canvas renderer, the dirty rectangle rendering technique detects and updates only the parts of the view that have changed, rather than any changes causing a complete redraw of the canvas. This can help improve rendering frame rates in some special scenarios, such as scenes where the mouse frequently triggers some graphical highlighting many times. In the past for such scenes, additional Canvas layers were used to optimize performance, but this approach is not universal for all scenes and does not work well for complex styles. Dirty Rectangle rendering does a good job of satisfying both performance and display correctness. + +A visual demonstration of a dirty rectangle, with the red boxed area redrawn for the frame. + + + +You can see the effect by enable dirty rectangle optimization on the new example page. + +##### Line Chart Performance Optimization for Real-Time Time-Series Data + +In addition, the performance of line graphs with large amounts of data has also seen a significant performance improvement. We often encounter the need for high-performance plotting of large amounts of real-time time-series data, which will be updated every hundreds or tens of milliseconds. + +Apache ECharts 5 deeply optimizes CPU consumption, memory usage, and initialization time in these scenarios, enabling real-time updates (less than 30ms per update) for millions of data, and even rendering within 1s for ten millions of data, with low memory usage and smooth tooltip interactions. + +## Development Experience + +We want such a powerful visualization tool to be used by more developers in a simpler way, so the developer experience is also a very important aspect for us. + +#### Datasets + +ECharts 5 enhances the data transformation capabilities of datasets, allowing developers to implement common data processing such as filtering, sorting, aggregating, histogram, simple clustering, regression, etc. in a simple way. Developers can use these functions in a uniform and declarative way, and can easily implement common data operations. + +#### Internationalization + +The original internationalization implementation of ECharts takes the form of different distribution files packaged according to different language parameters. In this way, the dynamic language and main code are bound together, and the only way to switch languages when using ECharts is to reload different language versions of ECharts distributions. + +Therefore, starting with Apache ECharts 5, the dynamic language is separated from the main code. To switch languages, you only need to load the corresponding language, use the `registerLocale` function to mount the language object in a similar way to mount the theme, and then reinitialize it to complete the language switch. + +```js +// import the lang object and set when init +echarts.registerLocale('DE', lang); +echarts.init(DomElement, null, { + locale: 'DE' +}); +``` + +#### TypeScript Refactoring + +In order to continue to refactor and develop new features more safely and efficiently, we started the development of Apache ECharts 5 by rewriting the code using TypeScript. The strong typing brought by TypeScript gave us the confidence to refactor the code drastically to achieve more exciting features during the development of ECharts 5. + +For developers, we can also generate better and more code-compliant `DTS` type description files directly from TypeScript code. Until now, ECharts type description files have been maintained by community developers and published to [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/echarts), which is a lot of work, so thanks for your contribution. + +In addition, if a developer's component is introduced on-demand, we provide a `ComposeOption` type method that can combine a configuration item type that contains only the introduced components, which can bring stricter type checking and help you detect unintroduced component types in advance. + +## Accessibility + +Apache ECharts has always taken accessibility design seriously, and we want to make the information conveyed by charts equally to be accessed. We also want to make this possible for chart developers at a very low development cost, thus making developers more willing to support the accessibility. + +In the last major release, we supported automatic intelligent generation of chart descriptions based on different chart types and data, making it very easy for developers to support DOM description information for charts. In ECharts 5, we have also made more accessibility improvements to help people with visual impairments better understand the chart content. + +#### Theme Colors + +We took accessibility into account when designing the new default theme, and we repeatedly tested the brightness and color values of the colors to help accessibility users clearly identify the chart data. + +Moreover, for developers with further accessibility needs, we also provide special high-contrast themes to further differentiate the data with higher contrast colors. + +#### Decal Patterns + +ECharts 5 also provides a new feature of decals to help users further differentiate data by using patterns to assist with color representation. + + + +In addition, decal patterns can also help in some other scenarios, such as: helping to better distinguish data in printed materials like newspapers and books that have only a single color or very few colors; using graphical elements to facilitate a more intuitive understanding of the data by the user. + + + +## Summary + +In addition to the features described above, Apache ECharts has been improved in a very large number of details to help developers more easily create charts that good by default, are flexible in configuration, and tell the story behind the data with charts. + +Thank you to all the developers who have used ECharts, and even participated in community contributions, for making Apache ECharts 5 possible. We'll be working on future developments with even more enthusiasm, and we'll see you all in 6 with even more enthusiasm! diff --git a/contents/es/basics/release-note/v5-upgrade-guide.md b/contents/es/basics/release-note/v5-upgrade-guide.md new file mode 100644 index 000000000..5bb66966c --- /dev/null +++ b/contents/es/basics/release-note/v5-upgrade-guide.md @@ -0,0 +1,288 @@ +# Apache ECharts 5 Upgrade Guide + +This guide is for those who want to upgrade from echarts 4.x (hereafter `v4`) to echarts 5.x (hereafter `v5`). You can find out what new features `v5` brings that are worth upgrading in [New Features in ECharts 5](${lang}/basics/release-note/v5-feature). In most cases, developers won't need to do anything extra for this upgrade, as echarts has always tried to keep the API as stable and backward-compatible as possible. However, `v5` still brings some breaking changes that require special attention. In addition, in some cases, `v5` provides a better API to replace the previous one, and these superseded APIs will no longer be recommended (though we have tried to be as compatible as possible with these changes). We'll try to explain these changes in detail in this document. + +## Breaking Changes + +### Default Theme + +First of all, the default theme has been changed. `v5` has made a lot of changes and optimizations on the theme design. If you still want to keep the colors of the old version, you can manually declare the colors as follows. + +```js +chart.setOption({ + color: [ + '#c23531', + '#2f4554', + '#61a0a8', + '#d48265', + '#91c7ae', + '#749f83', + '#ca8622', + '#bda29a', + '#6e7074', + '#546570', + '#c4ccd3' + ] + // ... +}); +``` + +Or, to make a simple `v4` theme. + +```js +var themeEC4 = { + color: [ + '#c23531', + '#2f4554', + '#61a0a8', + '#d48265', + '#91c7ae', + '#749f83', + '#ca8622', + '#bda29a', + '#6e7074', + '#546570', + '#c4ccd3' + ] +}; +var chart = echarts.init(dom, themeEC4); +chart.setOption(/* ... */); +``` + +### Importing ECharts + +#### Removing Support for Default Exports + +Since `v5`, echarts only provides `named exports`. + +So if you are importing `echarts` like this: + +```js +import echarts from 'echarts'; +// Or import core module +import echarts from 'echarts/lib/echarts'; +``` + +It will throw error in `v5`. You need to change the code as follows to import the entire module. + +```js +import * as echarts from 'echarts'; +// Or +import * as echarts from 'echarts/lib/echarts'; +``` + +#### Tree-shaking API + +In 5.0.1, we introduced the new [tree-shaking API](${lang}/basics/import) + +```js +import * as echarts from 'echarts/core'; +import { BarChart } from 'echarts/charts'; +import { GridComponent } from 'echarts/components'; +// Note that the Canvas renderer is no longer included by default and needs to be imported explictly, or import the SVGRenderer if you need to use the SVG rendering mode +import { CanvasRenderer } from 'echarts/renderers'; + +echarts.use([BarChart, GridComponent, CanvasRenderer]); +``` + +To make it easier for you to know which modules you need to import based on your option, our new example page adds a new feature to generate the three-shakable code, you can check the `Full Code` tab on the example page to see the modules you need to introduce and the related code. + +In most cases, we recommend using the new tree-shaking interface whenever possible, as it maximizes the power of the packaging tool tree-shaking and effectively resolves namespace conflicts and prevents the exposure of internal structures. If you are still using the CommonJS method of writing modules, the previous approach is still supported: + +```js +const echarts = require('echarts/lib/echarts'); +require('echarts/lib/chart/bar'); +require('echarts/lib/component/grid'); +``` + +Second, because our source code has been rewritten using TypeScript, `v5` will no longer support importing files from `echarts/src`. You need to change it to import from `echarts/lib`. + +#### Dependency Changes + +> Note: This section is only for developers who use tree-shaking interfaces to ensure a minimal bundle size, not for those who imports the whole package. + +In order to keep the size of the bundle small enough, we remove some dependencies that would have been imported by default. For example, as mentioned above, when using the new on-demand interface, `CanvasRenderer` is no longer included by default, which ensures that unneeded Canvas rendering code is not imported when only SVG rendering mode is used, and in addition, the following dependencies are adjusted. + +- The right-angle coordinate system component is no longer introduced by default when using line charts and bar charts, so the following introduction method was used before + +```js +const echarts = require('echarts/lib/echarts'); +require('echarts/lib/chart/bar'); +require('echarts/lib/chart/line'); +``` + +Need to introduce the `grid` component separately again + +```js +require('echarts/lib/component/grid'); +``` + +Reference issues: [#14080](https://github.com/apache/echarts/issues/14080), [#13764](https://github.com/apache/echarts/issues/13764) + +- `aria` components are no longer imported by default. You need import it manually if necessary. + +```js +import { AriaComponent } from 'echarts/components'; +echarts.use(AriaComponent); +``` + +Or + +```js +require('echarts/lib/component/aria'); +``` + +### Built-in GeoJSON Removed + +`v5` removes the built-in geoJSON (previously in the `echarts/map` folder). These geoJSON files were always sourced from third parties. If users still need them, they can go get them from the old version, or find more appropriate data and register it with ECharts via the registerMap interface. + +### Browser Compatibility + +IE8 is no longer supported by `v5`. We no longer maintain and upgrade the previous [VML renderer](https://github.com/ecomfe/zrender/tree/4.3.2/src/vml) for IE8 compatibility. If developers have a strong need for a VML renderer, they are welcome to submit a pull request to upgrade the VML renderer or maintain a separate third-party VML renderer, as we support registration of standalone renderers starting with `v5.0.1`. + +### Configuration Item Adjustment + +#### Axis-Line and Axis-Tick of Y-Axis (Value Axis) Are Hidden by Default + +The axis line and axis ticks of the Y axis (`value` axis) has been hidden by default since `v5`. If you prefer the previous style, you will need to explicitly configure as follows, + +```js +yAxis: { + type: 'value', + // explicitly set `axisLine.show` & `axisTick.show` as `true` + axisLine: { + show: true + }, + axisTick: { + show: true + } +} +``` + +#### Visual Style Settings Priority Changes + +The priority of the visuals between [visualMap component](${optionPath}visualMap) and [itemStyle](${optionPath}series-scatter.itemStyle) | [lineStyle](${optionPath}series-scatter.lineStyle) | [areaStyle](${optionPath}series-scatter.areaStyle) are reversed since `v5`. + +That is, previously in `v4`, the visuals (i.e., color, symbol, symbolSize, ...) that generated by [visualMap component](${optionPath}visualMap) has the highest priority, which will overwrite the same visuals settings in [itemStyle](${optionPath}series-scatter.itemStyle) | [lineStyle](${optionPath}series-scatter.lineStyle) | [areaStyle](${optionPath}series-scatter.areaStyle). That brought troubles when needing to specify specific style to some certain data items while using [visualMap component](${optionPath}visualMap). Since `v5`, the visuals specified in [itemStyle](${optionPath}series-scatter.itemStyle) | [lineStyle](${optionPath}series-scatter.lineStyle) | [areaStyle](${optionPath}series-scatter.areaStyle) has the highest priority. + +In most cases, users will probably not notice this change when migrating from `v4` to `v5`. But users can still check that if [visualMap component](${optionPath}visualMap) and [itemStyle](${optionPath}series-scatter.itemStyle) | [lineStyle](${optionPath}series-scatter.lineStyle) | [areaStyle](${optionPath}series-scatter.areaStyle) are both specified. + +#### `padding` for Rich Text + +`v5` adjusts the [rich.?.padding](${optionPath}series-scatter.label.rich..padding) to make it more compliant with CSS specifications. In `v4`, for example `rich. .padding: [11, 22, 33, 44]` means that `padding-top` is `33` and `padding-bottom` is `11`. The position of the top and bottom is adjusted in `v5`, `rich. .padding: [11, 22, 33, 44]` means that `padding-top` is `11` and `padding-bottom` is `33`. + +If the user is using [rich.?.padding](${optionPath}series-scatter.label.rich..padding), this order needs to be adjusted. + +## Extensions + +These extensions need to be upgraded to new version to support echarts `v5`: + +- [echarts-gl](https://github.com/ecomfe/echarts-gl) +- [echarts-wordcloud](https://github.com/ecomfe/echarts-wordcloud) +- [echarts-liquidfill](https://github.com/ecomfe/echarts-liquidfill) + +## Deprecated APIs + +Some of the API and echarts options are deprecated since `v5`, but are still backward compatible. Users can **keep using these deprecated API**, with only some warning will be printed to console in dev mode. But if users have spare time, it is recommended to upgraded to new API for the consideration of long term maintenance. + +The deprecated API and their corresponding new API are listed as follows: + +- Transform related props of a graphic element are changed: + - Changes: + - `position: [number, number]` are changed to `x: number`/`y: number`. + - `scale: [number, number]` are changed to `scaleX: number`/`scaleY: number`. + - `origin: [number, number]` are changed to `originX: number`/`originY: number`. + - The `position`, `scale` and `origin` are still supported but deprecated. + - It effects these places: + - In the `graphic` components: the declarations of each element. + - In `custom series`: the declarations of each element in the return of `renderItem`. + - Directly use zrender graphic elements. +- Text related props on graphic elements are changed: + - Changes: + - The declaration of attached text (or say, rect text) are changed. + - Prop `style.text` are deprecated in elements except `Text`. Instead, Prop set `textContent` and `textConfig` are provided to support more powerful capabilities. + - These related props at the left part below are deprecated. Use the right part below instead. + - textPosition => textConfig.position + - textOffset => textConfig.offset + - textRotation => textConfig.rotation + - textDistance => textConfig.distance + - The props at the left part below are deprecated in `style` and `style.rich.?`. Use the props at the right part below instead. + - textFill => fill + - textStroke => stroke + - textFont => font + - textStrokeWidth => lineWidth + - textAlign => align + - textVerticalAlign => verticalAlign + - textLineHeight => lineHeight + - textWidth => width + - textHeight => hight + - textBackgroundColor => backgroundColor + - textPadding => padding + - textBorderColor => borderColor + - textBorderWidth => borderWidth + - textBorderRadius => borderRadius + - textBoxShadowColor => shadowColor + - textBoxShadowBlur => shadowBlur + - textBoxShadowOffsetX => shadowOffsetX + - textBoxShadowOffsetY => shadowOffsetY + - Note: these props are not changed: + - textShadowColor + - textShadowBlur + - textShadowOffsetX + - textShadowOffsetY + - It effects these places: + - In the `graphic` components: the declarations of each element. [compat, but not accurately the same in some complicated cases.] + - In `custom series`: the declarations of each element in the return of `renderItem`. [compat, but not accurately the same in some complicated cases]. + - Directly use zrender API to create graphic elements. [No compat, breaking change]. +- API on chart instance: + - `chart.one(...)` is deprecated. +- `label`: + - In props `color`, `textBorderColor`, `backgroundColor` and `borderColor`, the value `'auto'` is deprecated. Use the value `'inherit'` instead. +- `hoverAnimation`: + - option `series.hoverAnimation` is deprecated. Use `series.emphasis.scale` instead. +- `line series`: + - option `series.clipOverflow` is deprecated. Use `series.clip` instead. +- `custom series`: + - In `renderItem`, the `api.style(...)` and `api.styleEmphasis(...)` are deprecated. Because it is not really necessary and hard to ensure backward compatibility. Users can fetch system designated visual by `api.visual(...)`. +- `sunburst series`: + - Action type `sunburstHighlight` is deprecated. Use `highlight` instead. + - Action type `sunburstUnhighlight` is deprecated. Use `downplay` instead. + - option `series.downplay` is deprecated. Use `series.blur` instead. + - option `series.highlightPolicy` is deprecated. Use `series.emphasis.focus` instead. +- `pie series`: + - The action type at the left part below are deprecated. Use the right part instead: + - `pieToggleSelect` => `toggleSelect` + - `pieSelect` => `select` + - `pieUnSelect` => `unselect` + - The event type at the left part below are deprecated. Use the right part instead: + - `pieselectchanged` => `selectchanged` + - `pieselected` => `selected` + - `pieunselected` => `unselected` + - option `series.label.margin` is deprecated. Use `series.label.edgeDistance` instead. + - option `series.clockWise` is deprecated. Use `series.clockwise` instead. + - option `series.hoverOffset` is deprecated. Use `series.emphasis.scaleSize` instead. +- `map series`: + - The action type at the left part below are deprecated. Use the right part instead: + - `mapToggleSelect` => `toggleSelect` + - `mapSelect` => `select` + - `mapUnSelect` => `unselect` + - The event type at the left part below are deprecated. Use the right part instead: + - `mapselectchanged` => `selectchanged` + - `mapselected` => `selected` + - `mapunselected` => `unselected` + - option `series.mapType` is deprecated. Use `series.map` instead. + - option `series.mapLocation` is deprecated. +- `graph series`: + - option `series.focusNodeAdjacency` is deprecated. Use `series.emphasis: { focus: 'adjacency'}` instead. +- `gauge series`: + - option `series.clockWise` is deprecated. Use `series.clockwise` instead. + - option `series.hoverOffset` is deprecated. Use `series.emphasis.scaleSize` instead. +- `dataZoom component`: + - option `dataZoom.handleIcon` need prefix `path://` if using SVGPath. +- `radar`: + - option `radar.name` is deprecated. Use `radar.axisName` instead. + - option `radar.nameGap` is deprecated. Use `radar.axisNameGap` instead. +- Parse and format: + - `echarts.format.formatTime` is deprecated. Use `echarts.time.format` instead. + - `echarts.number.parseDate` is deprecated. Use `echarts.time.parse` instead. + - `echarts.format.getTextRect` is deprecated. diff --git a/contents/es/best-practices/aria.md b/contents/es/best-practices/aria.md new file mode 100644 index 000000000..5c1b69b4b --- /dev/null +++ b/contents/es/best-practices/aria.md @@ -0,0 +1,79 @@ + +# Accesibilidad Web + +[WAI-ARIA](https://www.w3.org/WAI/intro/aria), la Suite de Aplicaciones Web Ricas Accesibles desarrollada por W3C, define una manera de hacer que el contenido web y las aplicaciones web sean más accesibles para personas con discapacidades. + +ECharts 4.0 cumplió con esta especificación y soporta la generación de una descripción basada en la configuración del gráfico de manera inteligente, permitiendo que las personas con discapacidades visuales comprendan el contenido del gráfico con la ayuda de dispositivos lectores. Apache ECharts 5 soporta patrones de decalques que permiten distinguir los datos del gráfico mediante patrones además del color, ofreciendo una mejor experiencia a personas con daltonismo. + +Esta función de accesibilidad está desactivada por defecto. Se puede activar configurando el valor de [aria.show](${optionPath}aria.show) a `true`. + +## Etiquetas de Gráficos + + +Después de configurar [aria.show](${optionPath}aria.show) a `true`, ECharts generará automáticamente una descripción del gráfico según el título, el gráfico, los datos, etc. Los usuarios también pueden configurar la descripción manualmente a través del objeto de configuración. + +Ejemplo de objeto de configuración: + +```js +option = { + aria: { + show: true + }, + title: { + text: 'Referrer of a User', + x: 'center' + }, + series: [ + { + name: 'Referrer', + type: 'pie', + data: [ + { value: 335, name: 'Direct Visit' }, + { value: 310, name: 'Email Marketing' }, + { value: 234, name: 'Union Ad' }, + { value: 135, name: 'Video Ad' }, + { value: 1548, name: 'Search Engine' } + ] + } + ] +}; +``` + + + +Al habilitar aria, se agregará un atributo `aria-label` al HTML del gráfico. Los lectores de pantalla utilizan este atributo para describir el contenido; este gráfico tendría la siguiente descripción: + +``` +This is a chart about "Referrer of a User" with type Pie chart named Referrer. The data is as follows: the data of Direct Visit is 335,the data of Mail Marketing is 310,the data of Union Ad is 234,the data of Video Ad is 135,the data of Search Engine is 1548. +``` + +El lenguaje configurado se utilizará para generar la descripción. + + +### Personalizando el Título + + +El aria-label comienza con una descripción general. Hay dos plantillas, [aria.general.withTitle](${optionPath}aria.general.withTitle) que se utilizan cuando existe [title.text](${optionPath}title.text) y [aria.general.withoutTitle](${optionPath}aria.general.withoutTitle) para cuando no se define `title.text`. + +En la plantilla `withTitle`, la cadena `{title}` se reemplaza por [title.text](${optionPath}title.text). La plantilla `This is a chart named {title}` with a title of `Referrer of a User` generearia `This is a chart named Referrer of a User`. + + +### Personalizando la Descripción + +La descripción de la serie y los datos se añaden después del título. Para algunos gráficos, la descripción predeterminada no puede mostrar toda la información en el gráfico. En el siguiente gráfico de dispersión, la descripción generada por defecto incluye todos los elementos, pero no es accesible debido a la cantidad de elementos, lo que hace que la lista sea demasiado larga para comprender. + +En este caso, la descripción debe configurarse con la propiedad [aria.description](${optionPath}aria.description). + +### Personalización Avanzada + +Cada parte del aria-label puede incluir variables de plantilla que se reemplazarán por el valor real en el gráfico. Para obtener más información sobre el proceso de generación de una descripción, consulte la documentación de la API [aria.label](${optionPath}aria.label). + +## Patrones de Decalques + +Además, Apache ECharts 5 añade soporte para patrones de decalques como una representación secundaria del color para diferenciar mejor los datos. Con `aria.enabled` configurado a `true` y `aria.decal.show` configurado a `true`, se aplicará el estilo predeterminado de decalque. + + + +Si necesita personalizar el patrón de decalque, puede utilizar [aria.decal.decals](${optionPath}aria.decal.decals) para configurar un patrón de decalques flexible. + +Por favor, consulte la opción[ARIA option](${optionPath}aria.decal) para más detalles. diff --git a/contents/es/best-practices/canvas-vs-svg.md b/contents/es/best-practices/canvas-vs-svg.md new file mode 100644 index 000000000..f383ceec3 --- /dev/null +++ b/contents/es/best-practices/canvas-vs-svg.md @@ -0,0 +1,64 @@ +# Renderizar con SVG o Canvas + +La mayoría de las bibliotecas de gráficos del lado del navegador utilizan SVG o Canvas como el motor de renderizado subyacente. En general, ambas tecnologías son intercambiables y tienen un efecto similar. Sin embargo, la diferencia puede ser notable en algunos escenarios y casos específicos. Por lo tanto, siempre es difícil decidir qué tecnología usar para renderizar los gráficos. + +Canvas ha sido utilizado como el motor de renderizado de ECharts desde el principio. Desde la versión [v4.0](https://echarts.apache.org/en/changelog.html#v4-0-0), ECharts ha proporcionado el renderizador SVG como una opción adicional. Puedes especificar el parámetro [renderer parameter](${mainSitePath}api.html#echarts.init) como `'canvas'` o `'svg'` al inicializar el gráfico. + +> SVG y Canvas tienen una diferencia significativa en su uso. El soporte uniforme para ambas tecnologías en ECharts se debe a la abstracción e implementación de la biblioteca subyacente [ZRender](https://github.com/ecomfe/zrender). + +## Cómo Elegir un Renderizador + + +Renderizar con SVG o Canvas +La mayoría de las bibliotecas de gráficos del lado del navegador utilizan SVG o Canvas como el motor de renderizado subyacente. En general, ambas tecnologías son intercambiables y tienen un efecto similar. Sin embargo, la diferencia puede ser notable en algunos escenarios y casos específicos. Por lo tanto, siempre es difícil decidir qué tecnología usar para renderizar los gráficos. + +Canvas ha sido utilizado como el motor de renderizado de ECharts desde el principio. Desde la versión v4.0, ECharts ha proporcionado el renderizador SVG como una opción adicional. Puedes especificar el parámetro renderer como 'canvas' o 'svg' al inicializar el gráfico. + +SVG y Canvas tienen una diferencia significativa en su uso. El soporte uniforme para ambas tecnologías en ECharts se debe a la abstracción e implementación de la biblioteca subyacente ZRender. + +Cómo Elegir un Renderizador + +En general, Canvas es más adecuado para gráficos con un gran número de elementos (mapas de calor, gráficos de líneas o dispersión a gran escala en coordenadas geográficas o paralelas, etc.), y con efectos visuales[effect](${mainSitePath}examples/editor.html?c=lines-bmap-effect). Sin embargo, SVG tiene una ventaja importante: utiliza menos memoria (lo cual es importante para dispositivos móviles) y no se vuelve borroso al hacer zoom. + +La elección del renderizador puede basarse en una combinación del entorno de hardware y software, el volumen de datos y los requisitos funcionales. + +- En escenarios donde el entorno de hardware y software es bueno y la cantidad de datos no es demasiado grande, ambos renderizadores funcionarán y no será necesario preocuparse demasiado por la elección. +- En escenarios donde el entorno es pobre y surgen problemas de rendimiento que requieren optimización, se puede experimentar para determinar qué renderizador usar. Por ejemplo, existen estas experiencias: + - En situaciones donde se deben crear muchas instancias de ECharts y el navegador es propenso a fallar (probablemente porque el número de Canvas está causando que el uso de memoria supere la capacidad del teléfono), se puede usar el renderizador SVG para mejorar el rendimiento. En términos generales, el renderizador SVG podría funcionar mejor si el gráfico se ejecuta en un Android de gama baja, o si estamos utilizando gráficos específicos como el [LiquidFill chart](https://ecomfe.github.io/echarts-liquidfill/example/). + - Para volúmenes de datos mayores a 1,000 (este es un valor experimental), siempre se recomienda el renderizador Canvas. + +Damos una calurosa bienvenida a los [feedback](https://github.com/apache/echarts/issues/new) de los desarrolladores sobre sus experiencias y escenarios, para ayudarnos a hacer mejores optimizaciones. + +Nota: Actualmente, algunos efectos especiales aún dependen de Canvas: por ejemplo, [trail effect](${optionPath}series-lines.effect), [heatmap with blending effect](${mainSitePath}examples/editor.html?c=heatmap-bmap), etc. + +Desde [v5.3.0](${lang}/basics/release-note/5-3-0/#new-svg-renderer), el renderizador SVG fue refactorizado utilizando el DOM Virtual, lo que mejoró el rendimiento entre 2 y 10 veces, ¡y en algunos escenarios específicos puede ser decenas de veces más rápido! Consulta [#836](https://github.com/ecomfe/zrender/pull/836) para más detalles. + +## Cómo Usar el Renderizador + +Si se importa `echarts` completamente de la siguiente manera, los renderizadores SVG y Canvas ya están registrados e importados automáticamente. + +```js +import * as echarts from 'echarts'; +``` + +Si estás utilizando [tree-shakable import](${lang}/basics/import), necesitarás importar manualmente los renderizadores requeridos. + +```js +import * as echarts from 'echarts/core'; +// You can use only the renderers you need +import { SVGRenderer, CanvasRenderer } from 'echarts/renderers'; + +echarts.use([SVGRenderer, CanvasRenderer]); +``` + +Luego puedes establecer el parámetro [renderer parameter](${mainSitePath}api.html#echarts.init) al inicializar el gráfico. + +```js +// Use the Canvas renderer (default) +var chart = echarts.init(containerDom, null, { renderer: 'canvas' }); +// Equivalent to +var chart = echarts.init(containerDom); + +// use the SVG renderer +var chart = echarts.init(containerDom, null, { renderer: 'svg' }); +``` diff --git a/contents/es/best-practices/design/color-enhance.md b/contents/es/best-practices/design/color-enhance.md new file mode 100644 index 000000000..d81c75a5e --- /dev/null +++ b/contents/es/best-practices/design/color-enhance.md @@ -0,0 +1,65 @@ +# Leveraging Color to Enhance Data Visualization + +In all the visual pathways in the data visualization, color is the first-way visual perception. Doing visual encoding and communication is an effective way. If used properly, color can sufficiently improve the visualization. In the following, we will look at some specific ideas to improve the visualization. + +## Sympathetic Response of Color + +Color perception is a complicated result of the interaction between physiological and psychological effects. To prove that humans can perceive colors by warm and cool, Hiroshi Ohchi, a Japanese graphic designer has done an experiment to paint the wall of two workplaces in gray-cyan and red-orange. With the same objective ambient temperature and labor intensity, staffs in the gray-cyan workplace are easier to feel cool. Further research found that except for the feeling of warm and cool by observing colors, there are also light and dark, far and near, lively and melancholic. Colors will cause emotional fluctuations that affect human behavior based on human instinct. + +In the field of visualization, if we choose the color that coincides with the characteristic of data and the sympathetic response of emotions. + +Here is an example of the selling percentage of a certain dessert shop. + + + + +We provided two charts with the same style but different color schemes. The right side one obviously performs better for the dessert data displaying. + + + + +Compared with blue and purple, color likes orange, yellow, pink and green are preferred choices to inspire the appetite, happiness and warmness which matched the motion of eating sweets. In the other hand, most of the customer group for desserts is woman and children. Lively and cute chart colors in the left chart might be the better choice compared with the calm and rational colors of the chart. + +##Semantic Response of Color + +Different colors can help us to identify and classify different ideas because we are familiar with combining things and concepts with colors. We subconsciously think of white when we referring to "clouds", pink when we referring to "love". Those colors that are naturally consistent with semantics are called "semantic-resonant color". + +The researchers noticed that matching the semantic-resonant color for words contained specific color can increase the speed of the cognitive process and vice versa. This funny phenomenon is called the "Stroop Effect". In a comparative test (as shown below), the text "YELLOW" in the first line is easier to be positioned compared with the text "YELLOW" in the second line. In the second line, the text "PURPLE" have the font color of yellow, which makes it being noticed earlier sometimes. The font color here interfered with our speed of finding the right answer. + + + + +Using semantic-resonant color effectively, we use the same color as the meaning of the data to improve the cognition efficiency of the visualization. For instance, you might use blue to display the data of "OCEAN", yellow to display the data of "DESERT". + +The visual effects should be explained as easily as possible. Try to find out the color scheme that matches the preconceived and cultural association of the user. The following chart shows the sales info of kiwifruit, banana, orange and strawberry and chose the same color as the fruit itself. Therefore, we can easily identify and remember the fruit corresponding to each column. + + + +## Common Sense Consistency of Color + +In terms of visualization, the color used is directly related to factors such as data type, display environment, target client, and social background. You cannot separate color as an individual factor to design. Please restrain your free creative passion before selecting the color scheme and check if it is a special type of data. For example, colors like green and red in a stock chart have their customary meaning. Therefore, the consistency between the choice of color and common knowledge makes the user understand and distinguish the chart efficiently. + + + +Here is another example of the outdoor temperature, the red and blue bars make the chart easy to distinguish without explanation. + + + +## Divide Data by Colors + +We usually use the line chart to analyze the trend. We can actively configure an interval when sometimes we need to clearly know whether a specific data is in some domain. If you set 25%-75% as our planned sales, try to set different colors for each interval in this domain to efficiently identify the interval for each value: whether it is not reaching the goal, reaching the goal, or exceeding the goal. + +Therefore, color can be used as an effective tool to improve the readability of the chart. + + + diff --git a/contents/es/best-practices/mobile.md b/contents/es/best-practices/mobile.md new file mode 100644 index 000000000..e69de29bb diff --git a/contents/es/best-practices/specification/bar/basic-bar.md b/contents/es/best-practices/specification/bar/basic-bar.md new file mode 100644 index 000000000..a4e36e037 --- /dev/null +++ b/contents/es/best-practices/specification/bar/basic-bar.md @@ -0,0 +1,41 @@ +# Basic Bar Chart + +Bar Chart is a chart that presents the comparisons among discrete data. The length of the bars is proportional related to the categorical data. + + + +While the label of the series is long, or there are more than 10 categories in one chart, a horizontal column chart can not show all labels, or labels can only be shown tilted. It affects the appliance. Therefore, we use a vertical bar chart to get a better display effect. + + + +## Suggestions for Using Bar Chart + +1. Avoid using too many colors. One bar chart represents one set of metrics in general so that we suggest to use the same color or at least different shades of the same color. You can use a contrasting color to highlight meaningful data points. + + + +2. The gap between bars should be appropriate. When they are too close, the attention of the user may be focused on the gap between bars. A reasonable width should be not less than twice the gap between the bars. + +3. Data on Y-axis should be started from 0, to reflect the value appropriately. If the y-axis is incomplete, it will mislead the user to make wrong judgments. For instance, the chart on the left side shows that the income in 2017 is 4 times higher than in 2014. But the chart on the right side shows the truth that the income in 2017 only increased by 25% compared with 2014. + + + + +4. When sorting multiple data, if it is not related to some specific value like date, it is better to comply with a certain logic and guide the user to check the data in an intuitive way. In short, logical sorting can lead the user to read data better to a certain extent. + + + +We don't recommend using a 3D bar chart because the data transmission is not accurate. Users even have to guess which is the top of the bar. + + + diff --git a/contents/es/best-practices/specification/bar/bi-directional-bar.md b/contents/es/best-practices/specification/bar/bi-directional-bar.md new file mode 100644 index 000000000..cca80911a --- /dev/null +++ b/contents/es/best-practices/specification/bar/bi-directional-bar.md @@ -0,0 +1,27 @@ +Bi-directional bar charts are mostly used to show values that included in two opposite meaning categories. One axis shows the name of categories being compared, while the other axis represents the scale value. As an example, Using a bi-directional bar chart to analyze the personal income (positive number) and outcome (negative number) in a week, you can easily find the value and fluctuation of income and outcome in a single series. + + + +The bi-directional bar can be classified into the vertical chart (above) and horizontal chart(below, also called positive negative bar chart). For example, you can use a positive negative bar chart if there are positive and negative comments in a customer satisfaction survey data analysis. All data align in the middle, the positive comments attribute on the right side while the negative comments on the left side. + + + +## Suggestion for Using Bi-directional Bar Chart + +1. The data on both sides in the bi-directional bar chart are comparative. + +2. Don't define negative data on the right side of the bi-directional bar chart, to prevent misunderstanding caused by the violation of common sense. + + + + +3. A bi-directional bar chart always used to display data with the opposite meaning, so that you need to avoid misunderstanding caused by the use of data that does not have a positive or negative meaning. As the chart below, there is no antagonism between the data of male and female, so that it is a better choice to use a basic bar chart rather than a bi-directional bar chart. + + + diff --git a/contents/es/best-practices/specification/bar/grouped-bar.md b/contents/es/best-practices/specification/bar/grouped-bar.md new file mode 100644 index 000000000..76a866b75 --- /dev/null +++ b/contents/es/best-practices/specification/bar/grouped-bar.md @@ -0,0 +1,20 @@ +# Grouped Bar Chart + +A grouped bar chart is also called the gathered bar chart. When more than two data series placed one by one on the same axis, the chart will be grouped bar chart. It is equivalent to a basic bar chart combined with two or more charts. + + + +A grouped bar chart usually used to compare several groups of data that included the same kind of variables. Same as the bar chart, the length of the bars is proportional related to the categorical data. Every series have an individual color or different saturation of the same color system so that the user can distinguish and compare each set of data. + + + + +## Suggestion for Using Grouped Bar Chart + +1. The difficulty of chart reading will be tremendous if there are many series in one group. Therefore, we suggest you use a stacked bar chart rather than a grouped bar chart in this situation. + +2. The gap between the two groups should be bigger than the gap inside the group, to avoid visually incorrect classification. \ No newline at end of file diff --git a/contents/es/best-practices/specification/bar/stacked-bar.md b/contents/es/best-practices/specification/bar/stacked-bar.md new file mode 100644 index 000000000..d061463f4 --- /dev/null +++ b/contents/es/best-practices/specification/bar/stacked-bar.md @@ -0,0 +1,21 @@ +# Stacked Bar Chart + +The stacked bar chart is an extension of the bar chart. The difference is that the data in the bar chart is placed parallel while stacked together in the stacked bar chart. You can use a stacked bar chart to reflect the total amount of each category, as well as the proportional relationship of each data compared with the category. Therefore, it is very suitable for dealing with the relationship between part and whole. + +Compared with the pie chart, a stacked bar chart can display several groups of "part and whole" relationship. For instance, you can use a pie or bar chart to display the statistics of the number of people in each project in a physical education course. You can use a stacked bar chart when you want to distinguish boys and girls in each project. As shown in the chart, it included the info of the "part and whole" relationship of each group. + + + +## Suggestion for Using Stacked Bar Chart + +1. Follow the basic rule of bar charts. Please avoid using too many colors so that the chart can be easily understood. Don't deliberately display partly data to mislead the user. + +2. A Stacked bar chart is not suitable for comparing data inside the group. + +3. While there are 2 or 3 categories, a stacked bar chart will show the best effect. It is not recommended to include more than 6 categories. Too many data series will also make it very difficult to read and understand. + +4. Try to avoid using a stacked bar chart with categories that included negative values. It will affect understanding or the proportion between part and whole. + +5. Most of the stacked bar charts are vertically generated. However, if you have very long labels, try to use the horizontal stack method. diff --git a/contents/es/best-practices/specification/funnel.md b/contents/es/best-practices/specification/funnel.md new file mode 100644 index 000000000..f80d9fb90 --- /dev/null +++ b/contents/es/best-practices/specification/funnel.md @@ -0,0 +1,36 @@ +# Funnel Chart + +Funnel chart (inverted triangle chart) present data into several stages, every stage is part of the whole. The overall percentage of all stages is 100%. Similar to the bar chart, the funnel chart shows no specific data but the proportion related to the whole. Therefore, a funnel chart doesn't have an axis. + +The funnel chart usually used to provide the simplified data which is used to analyze the change or difference in every link of the process. It is also useful to find out the problem and bottleneck during the business. + + + + +## Suggestion for Using Funnel Chart + +1. Represented by an e-commerce website, the funnel chart can easily show the entire process from the website to placing order. It not only shows the final conversion rate but also the conversion rate of each step, which leads to the problem directly. You can improve the design for some specific steps. + +As shown below, the first three steps("show", "click", "visit") have only a little drain. The significant decrease happened from "visit" to "consult". As the result, the manager can mainly analyze what caused the reduction of consulting. For instance, it might because that the entrance for consult might not obvious enough. + + + +2. Using two stacked funnel chart to compare between the prediction and outcome makes the deviation analyze easier. + + + +3. Try to use two funnels in one chart to discuss the transforming circumstances. As the following chart shows, project B has a higher churn rate comparing with project A. + + + +4. The funnel chart is more useful for displaying a logic flow which is different from the pie chart. If the data have no logical relevance, you should choose the pie chart. + +5. Depending on the type of data, use gradually changed colors or contract colors. Arrange them from dark to light according to the size of the funnel chart. Please don't add too many layers or colors to increase reading difficulty. diff --git a/contents/es/best-practices/specification/gauge.md b/contents/es/best-practices/specification/gauge.md new file mode 100644 index 000000000..464a2e14e --- /dev/null +++ b/contents/es/best-practices/specification/gauge.md @@ -0,0 +1,17 @@ +# Gauger Chart + +The Gauger Chart was also called a dial graph or speedometer graph. It is a form of a quasi-materialized display. It displays the data similar to the reading on a speedometer. The color of the gauger chart can be used to separate different categories of data. The gauger chart uses scale to mark data, pointers to indicating dimension, the angel of pointer to represent the value. + + + +## Suggestion for Using Gauger Chart + +1. The gauger chart is suitable for displaying single progress or measurement standard under quantitative conditions while it is not suitable for carpeting different variables or trends. + +2. You can provide info in different dimensions. However, do not include more than 3 pointers in one dashboard. It is recommended to use multiple dashboards if there are indeed multiple data to be displayed. + + diff --git a/contents/es/best-practices/specification/line/area.md b/contents/es/best-practices/specification/line/area.md new file mode 100644 index 000000000..ad2ad2997 --- /dev/null +++ b/contents/es/best-practices/specification/line/area.md @@ -0,0 +1,23 @@ +# Area Line Chart +The area line chart is similar to the basic line chart. They both described the trend of data over time. The difference is that the fill color and texture of the area line chart created a surface that represents the data volume. For a line chart, the filling area can draw attention for users to the trend of the total value. Therefore, the area line chart is mostly used to convey the size of the trend but not single values. + + + + +## Suggestion for Using Area Line Chart + +1. The area line chart uses the filling is to represent the data. While there are several layers in one chart, try to make sure that the data are not overlapping. If the overlapping is not avoidable, you define the color and opacity to an appropriate value to make the chart readable. + + + +2. The area line chart is strong to display two or three categories of data. We suggest not to show more than 4 groups, or there will be too many data series to identify the data like the following chart. So, we need to avoid an area line chart that has more than three series in one chart. + + + +3. You should not use the area line chart while there are no boundaries between data values. As shown below, it is familiar that there are 3 different colors at first glance. + + diff --git a/contents/es/best-practices/specification/line/basic-line.md b/contents/es/best-practices/specification/line/basic-line.md new file mode 100644 index 000000000..95fcf74e1 --- /dev/null +++ b/contents/es/best-practices/specification/line/basic-line.md @@ -0,0 +1,36 @@ +# Basic Line Chart. + +The line chart is basically used to show the phase trend over time. The line chart is pretty useful to display a continuous 2D dataset like the fluctuation in the number of website visitors or sales prices. + + + +Except for displaying the trend of developing things, the line chart can be used to compare several different datasets. As shown below, we use a line chart to compare the sales of three different commodities and analyze which one is the best. + + + +A line chart is drawn by connecting data points with lines. For the beauty of special effects, you can also connect points with curves as shown in the chart above. This chart is also called a curve chart or spline chart. The usage of the spline chart is the same as the line chart. The only difference is that the connection between data points is a curve but not a straight line. + +## Suggestion for Using Line Chart + +1. To make sure the data readability, use solid lines in charts if you can separate the data line and axis. + +2. Do not draw more than 4 lines in a chart. As shown below, lines are entangled together without obvious contrast that makes the whole chart confusing and difficult to read. + + + +3. Don't use decorates to separate charts. The legend is helpful, but sometimes distracting users: + + + +4. When displaying the data of the line chart, avoid deliberately distorting the trend. The meaningful volatility analysis chart should make the height of the item be two-thirds of the height of the y-axis. + + diff --git a/contents/es/best-practices/specification/line/stacked-area.md b/contents/es/best-practices/specification/line/stacked-area.md new file mode 100644 index 000000000..98586911d --- /dev/null +++ b/contents/es/best-practices/specification/line/stacked-area.md @@ -0,0 +1,45 @@ +# Stacked Area Chart +The stacked area chart is a special kind of area chart. It is used to compare several data series in the same interval. The main difference between the area chart and stacked area chart is that the base of every series is over the previous one. Therefore, every time a line is measured, the area between the lines will be filled with color. + +If there are several series and you want to analyze the part-to-whole relationship for every single one, which reflects the contribution of partial quantity to the total, you can use the stacked area chart. For instance, the contribution of one seller to the total sales. + + + +Here are two different kinds of stacked area chart: + ++ Traditional stacked chart: Use the original value to stack, show the change in the whole process. ++ Percentage stacked chart: The percentage stacked chart shows how did the relationship between series changed with time. The cumulative total is not the focus as this kind of chart. The important is to show the series distribution as the whole. + + + +## Suggestion for Using Stacked Area Chart + +1. The area chart can't display data in many series that are closed to each others. It will make the chart hard to read: + + + +With the same series, stacked bar chart works better: + + + +
+
+ +
+
+ +2. Although the stacked bar chart is good dealing with several series, try not to include more than 7 in one chart. + +3. Because the stacked bar chart provides the relation between part and whole, you should not include negative value in series. + +4. We suggest putting larger values on the top side of the chart, you will get a better display effect. diff --git a/contents/es/best-practices/specification/pie/basic-pie.md b/contents/es/best-practices/specification/pie/basic-pie.md new file mode 100644 index 000000000..be70e6cbc --- /dev/null +++ b/contents/es/best-practices/specification/pie/basic-pie.md @@ -0,0 +1,47 @@ +# Pie Chart + +The pie chart is mainly used to display the proportion of different categories compared with the total. The arc length of each sector in the figure means the proportion of the category. The sum of all categories is 100%. + + + +Even the pie chart can display the distribution radio of the data, and widely used in every field, there is still controversy around the pie chart and its deformation chart. Therefore, you should use the pie chart with caution and avoid misunderstanding. + +## Suggestion for Using Pie Chart + +1. The pie chart is preferred to show the proportion of data in the same dimension. It requests the data to be positive. Please also make sure the total of sectors is 100%. + +2. It is hard to compare the data in the pie chart with too many pieces. We suggest to controlling the number of categories under five. While there are too many categories, we might merge some unimportant data together, and name as "other". If all categories cannot be omitted, you should try a bar chart or stacked bar chart as an alternative. + + + + +3. The pie chart is not appropriate for the comparison of precise data. The following graph (left below) shows that every sector has almost the same proportion. In this case, you should try a bar chart or rose chart (right below) to achieve a better effect. + + + + +4. Visual habits of most people are observing from top to bottom in clockwise. Therefore we recommend you put the largest sector in the first place in the clockwise direction to stress the importance. + +There are two advices for the rest of the data. Arrange sectors from big to small in clockwise or anti-clockwise follows the largest one: + + + + +Order the sectors according to the size not only consistent with the visual habits but also easier for data's identify and comparison. Base on this principle, you can put the part that needs to emphasize (don't need to be the largest part) at the prominent position. + +5. You can add some decorations like color, motion, style, position to stress some data in a chart. Please be moderate or it will distract the user. + + + +6. 3D pie chart distorted the ratio between each sector, which will cause mistakes and confusion in understanding. Therefore,a 3D pie chart is not recommended. + + + diff --git a/contents/es/best-practices/specification/radar.md b/contents/es/best-practices/specification/radar.md new file mode 100644 index 000000000..811d4b20f --- /dev/null +++ b/contents/es/best-practices/specification/radar.md @@ -0,0 +1,29 @@ +# Radar Chart + +Radar Chart is suitable for display the data with more than three dimensions. The radar chart has more than two axes starting from the same point. The relative position and angle of the axis are usually meaningless. + +Every variable in the radar chart match one axis that starting from the center. Axes have the same scale index and included angle. Connect the scale between axis, and connect the item in each axis together to become a polygon. + + + +The radar chart is useful for indicating similar values and checking outliers in variables. The radar chart can also be used to reflect what variables have a higher or lower score in the dataset, which makes it a better way to display the performance (see below). Similarly, the radar chart is often used in displaying data such as rankings, evaluations and reviews. + + + +As shown below, the chart shows the comparison of the budgets and expenses in a kindergarten fund flow. The six areas involved are food, toys, picture books, medical care and clothing. Every axis has a range of 0 to 500. The toy is the only part that was overspent while the clothing is far below the budget. It becomes clear at a glance while using a radar chart to show which part is overspend or underspend. + + + +## Suggestion for Using Radar Chart + +1. The number of polygons in the radar chart should be limited. If there are more than 5 categories to be evaluated, both the outline and color block will be too confusing to read. + +2. Including too many axes can also make the radar chart difficult to read. Therefore, try to keep the radar chart concisely and limit the number of variables. + +3. Because the radial distance is hard to judge, it is still difficult to read the specific value although there are grid lines. We recommend you use a line graph if you need to compare specific values. diff --git a/contents/es/best-practices/specification/scatter/bubble.md b/contents/es/best-practices/specification/scatter/bubble.md new file mode 100644 index 000000000..50db39810 --- /dev/null +++ b/contents/es/best-practices/specification/scatter/bubble.md @@ -0,0 +1,27 @@ +# Bubble Chart + +The bubble chart shows the relevance between variables. Same as the scatter chart, data in bubble chart are set with points, it shows the relationship of data between two variables. The different part is that the scatter chart has several variables. It included the size of the bubble. A bigger bubble means a larger value. Users can analyze the law of data by the location and size of bubbles. + + + +## Suggestion for Using Bubble Chart + +1. It is a good choice to choose a bubble chart while there are three series, features and related values. As shown below, the bubbles' position shows the date and specific time when the code was submitted, the size explained the amount of code submitted. + + + +2. You can also change the color of the bubbles. The chart below uses different colors to classify the air quality of three areas. Red is Beijing, yellow is Shanghai, and blue is Guangzhou. Users can visually compare and analyze the tire quality of the three places. + + + +3. A bubble chart commonly used to combine with the map. X-axis and y-axis represent the longitude and latitude. The size of bubbles can be the magnitude of the value at that position. + + diff --git a/contents/es/best-practices/specification/scatter/scatter.md b/contents/es/best-practices/specification/scatter/scatter.md new file mode 100644 index 000000000..a556515e8 --- /dev/null +++ b/contents/es/best-practices/specification/scatter/scatter.md @@ -0,0 +1,35 @@ +# Scatter Chart + +The scatter chart shows the relation between the two variables. Data is embodied as a collection of points, which is appropriate to compare a large number of data without considering the time. The scatter chart can identify the relevant and relation of two variables thus find some trend. The scatter chart is also workable to find outliers or to understand data distribution. The chart above shows the distribution of the height and weight of students in a class. + + + +The scatter chart can reflect the correlation(relation between variables) of a different type. It can be positively correlated, negatively correlated and uncorrelated. + +- Positively Correlated: When one value increases, the other value increases. + +- Negatively Correlated: When one value increases, the other value decreases. + +- Uncorrelated: Two values have no obvious relation and have no influence on each other. + + + + +To be mentioned, the scatter chart can effectively illustrate the correlation between the two variables. However, it cannot strongly prove there exist causality. For example, AD serving and Visits are positively correlated, but we cannot prove that more AD serving must lead to more Visits. However, we have enough reason to increase the AD serving and observe the outcome after we find out the positive correlation between them. + +## Suggestion for Using Scatter Chart + +1. If no correlation was shown in the scatter chart, then the scatter chart is not the best choice. + +2. If the package included a different series, you can use different colors for each series. As an example, add the legend to mark male as blue, female as red. You can not only distinguish the height and weight of different genders but also add an auxiliary line for the average of each series to improve the understanding of the distribution. In this case, females have more amount higher than the average value than lower. + + + +The trend line is useful when observing the relationship between two variables. The shape of the trend line can explain the relation type of two variables as well as make a prediction. It is better to include only two trend lines to avoid interference with the reading. + +3. The scatter points can present a good appearance only with adequate and relevant data. It is meaningless to draw a chart with very little and unrelated values. diff --git a/contents/es/concepts/axis.md b/contents/es/concepts/axis.md new file mode 100644 index 000000000..96cf6655a --- /dev/null +++ b/contents/es/concepts/axis.md @@ -0,0 +1,260 @@ +# Axis + +El sistema de coordenadas cartesianas tiene los ejes x/y. + +## x-axis, y-axis + +Tanto el eje x como el eje y incluyen la línea del eje, las marcas, las etiquetas y el título. Algunos gráficos usan la cuadrícula para ayudar a visualizar y calcular los datos. + + + + +Un sistema de coordenadas 2D normal tiene el eje x y el eje y. El eje x generalmente se encuentra en la parte inferior, mientras que el eje y se encuentra en el lado izquierdo. La configuración se muestra a continuación: + +```js +option = { + xAxis: { + // ... + }, + yAxis: { + // ... + } + // ... +}; +``` +El eje x generalmente se usa para declarar la cantidad de categorías, que también se llaman los aspectos para observar los datos: "Hora de venta", "Ubicación de venta" y "nombre del producto", etc. El eje y generalmente se usa para indicar el valor numérico de las categorías. Estos datos se usan para examinar el valor cuantitativo de un tipo específico de datos o algún indicador que necesitas analizar, como "Cantidad de ventas" y "Precio de venta". + +```js +option = { + xAxis: { + type: 'time', + name: 'Sales Time' + // ... + }, + yAxis: { + type: 'value', + name: 'Sales Quantity' + // ... + } + // ... +}; +``` + +Cuando el eje x tiene un rango grande, podemos usar el método de zoom para mostrar una parte de los datos en el gráfico. + +```js +option = { + xAxis: { + type: 'time', + name: 'Sales Time' + // ... + }, + yAxis: { + type: 'value', + name: 'Sales Quantity' + // ... + }, + dataZoom: [] + // ... +}; +``` + +En los datos bidimensionales, puede haber más de dos ejes. Generalmente, hay dos ejes x o y al mismo tiempo en ECharts. Puedes cambiar la configuración [offset](${optionPath}xAxis.offset) para evitar la superposición de los ejes en el mismo lugar. Los ejes x pueden mostrarse en la parte superior e inferior, y los ejes y a la izquierda y a la derecha. + +```js +option = { + xAxis: { + type: 'time', + name: 'Sales Time' + // ... + }, + yAxis: [ + { + type: 'value', + name: 'Sales Quantity' + // ... + }, + { + type: 'value', + name: 'Sales Price' + // ... + } + ] + // ... +}; +``` + +## Axis Line + +ECharts proporciona la configuración de [axisLine](${optionPath}xAxis.axisLine).Puedes cambiar la configuración según lo que necesites, como agregar flechas en ambos lados o modificar el estilo de los ejes. + +```js +option = { + xAxis: { + axisLine: { + symbol: 'arrow', + lineStyle: { + type: 'dashed' + // ... + } + } + // ... + }, + yAxis: { + axisLine: { + symbol: 'arrow', + lineStyle: { + type: 'dashed' + // ... + } + } + } + // ... +}; +``` + +## Tick + +ECharts proporciona la configuración de [axisTick](${optionPath}xAxis.axisTick).Puedes modificar la configuración según lo que necesites, como la longitud de las marcas y el estilo de las mismas. + +```js +option = { + xAxis: { + axisTick: { + length: 6, + lineStyle: { + type: 'dashed' + // ... + } + } + // ... + }, + yAxis: { + axisTick: { + length: 6, + lineStyle: { + type: 'dashed' + // ... + } + } + } + // ... +}; +``` + +## Label + +ECharts proporciona la configuración de [axisLabel](${optionPath}xAxis.axisLabel). Puedes modificar la configuración según lo que necesites, como la alineación del texto y el contenido de las etiquetas personalizadas. + +```js +option = { + xAxis: { + axisLabel: { + formatter: '{value} kg', + align: 'center' + // ... + } + // ... + }, + yAxis: { + axisLabel: { + formatter: '{value} ¥', + align: 'center' + // ... + } + } + // ... +}; +``` + +## Ejemplo + +El eje y del lado izquierdo representa la temperatura promedio mensual en Tokio, el eje y del lado derecho representa la precipitación en Tokio. El eje x representa el tiempo. Refleja la tendencia y la relación entre la temperatura promedio y la precipitación. + +```js live +option = { + tooltip: { + trigger: 'axis', + axisPointer: { type: 'cross' } + }, + legend: {}, + xAxis: [ + { + type: 'category', + axisTick: { + alignWithLabel: true + }, + axisLabel: { + rotate: 30 + }, + data: [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + 'July', + 'August', + 'September', + 'October', + 'November', + 'December' + ] + } + ], + yAxis: [ + { + type: 'value', + name: 'Precipitation', + min: 0, + max: 250, + position: 'right', + axisLabel: { + formatter: '{value} ml' + } + }, + { + type: 'value', + name: 'Temperature', + min: 0, + max: 25, + position: 'left', + axisLabel: { + formatter: '{value} °C' + } + } + ], + series: [ + { + name: 'Precipitation', + type: 'bar', + yAxisIndex: 0, + data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3] + }, + { + name: 'Temperature', + type: 'line', + smooth: true, + yAxisIndex: 1, + data: [ + 6.0, + 10.2, + 10.3, + 11.5, + 10.3, + 13.2, + 14.3, + 16.4, + 18.0, + 16.5, + 12.0, + 5.2 + ] + } + ] +}; +``` + +Estas son las instrucciones concisas sobre el uso de la configuración de ejes. Consulta más detalles en: [Official Website](${optionPath}xAxis). diff --git a/contents/es/concepts/chart-size.md b/contents/es/concepts/chart-size.md new file mode 100644 index 000000000..5903b7d26 --- /dev/null +++ b/contents/es/concepts/chart-size.md @@ -0,0 +1,90 @@ +# Contenedor del Gráfico y Tamaño + +En la seccion [Get Started](${lang}/get-started), introdujimos la API para inicializar el gráfico de ECharts [`echarts.init`](${mainSitePath}/api.html#echarts.init). [API Document](${mainSitePath}/api.html#echarts.init) ha explicado el significado específico de cada parámetro. Por favor, lea y entienda el documento antes de leer el siguiente contenido.. + +A continuación se presentan algunos casos de uso comunes, con un ejemplo de cómo inicializar un gráfico y cambiar el tamaño. + +## Inicialización + +### Definir un contenedor principal en HTML + + +Generalmente, necesitas definir un nodo `
` y usar CSS para cambiar el ancho y la altura. Al inicializar, se importa el gráfico en el nodo. Si no se declaran `opts.width` ni `opts.height`, el tamaño del gráfico será el tamaño del nodo por defecto. + +```html +
+ +``` + +Es importante destacar que antes de llamar a `echarts.init`, debes asegurarte de que el contenedor ya tenga un ancho y una altura definidos.. + +### Especificar el tamaño del gráfico + +Si el contenedor no tiene un ancho y alto definidos, o deseas que el tamaño del gráfico no sea igual al del contenedor, puedes inicializar el tamaño desde el principio. + +```html +
+ +``` + +## Reacción al tamaño del contenedor + +### Escuchar el tamaño del contenedor para cambiar el tamaño del gráfico + +En algunos casos, queremos cambiar el tamaño del gráfico en función de cómo cambie el tamaño del contenedor. + +Por ejemplo, el contenedor tiene una altura de 400px y un ancho del 100% del ancho de la página. Si deseas cambiar el ancho de la página mientras mantienes el ancho del gráfico como el 100% de este, puedes usar el siguiente método. + +Puedes escuchar el evento `resize` para detectar cuando el navegador cambia de tamaño. Luego, utiliza [`echartsInstance.resize`](${mainSitePath}api.html#echartsInstance.resize) para redimensionar el gráfico. + +```html + +
+ +``` + +> Consejos：A veces podemos ajustar el tamaño del contenedor mediante JS/CSS, pero esto no cambia el tamaño de la página, por lo que no se disparará el evento `resize` En ese caso, puedes intentar usar la API [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) para cubrir este escenario. + +### Establecer un tamaño específico para el gráfico + +Aparte de llamar a `resize()` sin parámetros, puedes establecer explícitamente el ancho y la altura para tener un tamaño de gráfico diferente al tamaño del contenedor. + +```js +myChart.resize({ + width: 800, + height: 400 +}); +``` + +> Consejos: Presta atención a cómo está definida la API al leer la documentación. La API `resize()` a veces se confunde con la forma `myCharts.resize(800, 400)` la cual no existe. + +### Eliminar y reconstruir el nodo del contenedor + +Supongamos que existen varias páginas de marcadores y cada página contiene algunos gráficos. En este caso, el contenido de otras páginas se eliminará del DOM cuando se seleccione una página. El usuario no podrá ver el gráfico después de reabrir esas páginas. + +Esto se debe a que el nodo del contenedor del gráfico ha sido eliminado. Aunque el nodo se añada nuevamente después, el nodo en el que estaba el gráfico ya no existe. + +La forma correcta es llamar a [`echartsInstance.dispose`](${mainSitePath}api.html#echartsInstance.dispose) para eliminar la instancia después de que se haya eliminado el contenedor, y luego llamar a [echarts.init](${mainSitePath}/api.html#echarts.init) para inicializar el gráfico nuevamente después de que el contenedor haya sido añadido otra vez. + +> Consejos: Llama a [`echartsInstance.dispose`](${mainSitePath}api.html#echartsInstance.dispose) para liberar los recursos al eliminar el nodo y evitar posibles fugas de memoria. diff --git a/contents/es/concepts/coordinate.md b/contents/es/concepts/coordinate.md new file mode 100644 index 000000000..e69de29bb diff --git a/contents/es/concepts/data-transform.md b/contents/es/concepts/data-transform.md new file mode 100644 index 000000000..16ebdbd59 --- /dev/null +++ b/contents/es/concepts/data-transform.md @@ -0,0 +1,660 @@ +# Transformación de Datos + +La `Data transform` ha sido soportada desde Apache ECharts TM 5. En ECharts, el término `data transform` significa generar nuevos datos a partir de los datos de origen proporcionados por el usuario y las funciones de transformación. Esta característica permite a los usuarios procesar los datos de manera declarativa y proporciona algunas "funciones de transformación" comunes para realizar tareas de este tipo de manera sencilla. (Para mantener la consistencia en el contexto, seguimos usando el sustantivo "transformación" en lugar de "transformación de datos"). + +La fórmula abstracta de la transformación de datos es: `outData = f(inputData)`, donde la función de transformación f puede ser como `f` puede ser como`filter`, `sort`, `regression`, `boxplot`, `cluster`, `aggregate`(entre otras) ... +Con la ayuda de estos métodos de transformación, los usuarios pueden implementar características como: + +- Partition data into multiple series. +- Make some statistics and visualize the result. +- Adapt some visualization algorithms to data and display the result. +- Sort data. +- Remove or choose some kind of empty or special datums. +- ... + +## Comenzando con la Transformación de Datos + +En ECharts, la transformación de datos se implementa con base en el concepto de [dataset](~${optionPath}#dataset). Un [dataset.transform](${optionPath}#dataset.transform) se puede configurar en una instancia de dataset para indicar que este dataset se generará a partir de esta `transform`. Por ejemplo: + +```js live +var option = { + dataset: [ + { + // This dataset is on `datasetIndex: 0`. + source: [ + ['Product', 'Sales', 'Price', 'Year'], + ['Cake', 123, 32, 2011], + ['Cereal', 231, 14, 2011], + ['Tofu', 235, 5, 2011], + ['Dumpling', 341, 25, 2011], + ['Biscuit', 122, 29, 2011], + ['Cake', 143, 30, 2012], + ['Cereal', 201, 19, 2012], + ['Tofu', 255, 7, 2012], + ['Dumpling', 241, 27, 2012], + ['Biscuit', 102, 34, 2012], + ['Cake', 153, 28, 2013], + ['Cereal', 181, 21, 2013], + ['Tofu', 395, 4, 2013], + ['Dumpling', 281, 31, 2013], + ['Biscuit', 92, 39, 2013], + ['Cake', 223, 29, 2014], + ['Cereal', 211, 17, 2014], + ['Tofu', 345, 3, 2014], + ['Dumpling', 211, 35, 2014], + ['Biscuit', 72, 24, 2014] + ] + // id: 'a' + }, + { + // This dataset is on `datasetIndex: 1`. + // A `transform` is configured to indicate that the + // final data of this dataset is transformed via this + // transform function. + transform: { + type: 'filter', + config: { dimension: 'Year', value: 2011 } + } + // There can be optional properties `fromDatasetIndex` or `fromDatasetId` + // to indicate that where is the input data of the transform from. + // For example, `fromDatasetIndex: 0` specify the input data is from + // the dataset on `datasetIndex: 0`, or `fromDatasetId: 'a'` specify the + // input data is from the dataset having `id: 'a'`. + // [DEFAULT_RULE] + // If both `fromDatasetIndex` and `fromDatasetId` are omitted, + // `fromDatasetIndex: 0` are used by default. + }, + { + // This dataset is on `datasetIndex: 2`. + // Similarly, if neither `fromDatasetIndex` nor `fromDatasetId` is + // specified, `fromDatasetIndex: 0` is used by default + transform: { + // The "filter" transform filters and gets data items only match + // the given condition in property `config`. + type: 'filter', + // Transforms has a property `config`. In this "filter" transform, + // the `config` specify the condition that each result data item + // should be satisfied. In this case, this transform get all of + // the data items that the value on dimension "Year" equals to 2012. + config: { dimension: 'Year', value: 2012 } + } + }, + { + // This dataset is on `datasetIndex: 3` + transform: { + type: 'filter', + config: { dimension: 'Year', value: 2013 } + } + } + ], + series: [ + { + type: 'pie', + radius: 50, + center: ['25%', '50%'], + // In this case, each "pie" series reference to a dataset that has + // the result of its "filter" transform. + datasetIndex: 1 + }, + { + type: 'pie', + radius: 50, + center: ['50%', '50%'], + datasetIndex: 2 + }, + { + type: 'pie', + radius: 50, + center: ['75%', '50%'], + datasetIndex: 3 + } + ] +}; +``` + +Vamos a resumir los puntos clave del uso de la transformación de datos:: + +- Generar nuevos datos a partir de los datos declarados existentes mediante la declaración de `transform`, `fromDatasetIndex`/`fromDatasetId` en algún conjunto de datos en blanco. +- Las series hacen referencia a estos conjuntos de datos para mostrar el resultado.. + +## Uso Avanzado + +#### Transformación Encadenada + +Existe una forma sintáctica simplificada para encadenar transformaciones, como: + +```js +option = { + dataset: [ + { + source: [] // The original data + }, + { + // Declare transforms in an array to pipe multiple transforms, + // which makes them execute one by one and take the output of + // the previous transform as the input of the next transform. + transform: [ + { + type: 'filter', + config: { dimension: 'Product', value: 'Tofu' } + }, + { + type: 'sort', + config: { dimension: 'Year', order: 'desc' } + } + ] + } + ], + series: { + type: 'pie', + // Display the result of the piped transform. + datasetIndex: 1 + } +}; +``` + +> Nota: teóricamente, cualquier tipo de transformación puede tener múltiples datos de entrada y múltiples datos de salida. Pero cuando una transformación se encadena, solo puede tomar una entrada (excepto si es la primera transformación del encadenamiento) y producir una salida (excepto si es la última transformación del encadenamiento). + +#### Salida de Múltiples Datos + +En la mayoría de los casos, las funciones de transformación solo necesitan producir un dato. Pero en realidad, existen escenarios en los que una función de transformación necesita producir múltiples datos, cada uno de los cuales puede ser utilizado por diferentes series. + +Por ejemplo, en la transformación incorporada de boxplot, además de los datos del boxplot producidos, también se generan los datos de los valores atípicos, los cuales pueden ser utilizados en una serie de dispersión. Ver el [example](${exampleEditorPath}boxplot-light-velocity). + +Usamos la propiedad [dataset.fromTransformResult](${optionPath}#dataset.fromTransformResult) para satisfacer este requerimiento. Por ejemplo: + +```js +option = { + dataset: [ + { + // Original source data. + source: [] + }, + { + transform: { + type: 'boxplot' + } + // After this "boxplot transform" two result data generated: + // result[0]: The boxplot data + // result[1]: The outlier data + // By default, when series or other dataset reference this dataset, + // only result[0] can be visited. + // If we need to visit result[1], we have to use another dataset + // as follows: + }, + { + // This extra dataset references the dataset above, and retrieves + // the result[1] as its own data. Thus series or other dataset can + // reference this dataset to get the data from result[1]. + fromDatasetIndex: 1, + fromTransformResult: 1 + } + ], + xAxis: { + type: 'category' + }, + yAxis: {}, + series: [ + { + name: 'boxplot', + type: 'boxplot', + // Reference the data from result[0]. + datasetIndex: 1 + }, + { + name: 'outlier', + type: 'scatter', + // Reference the data from result[1]. + datasetIndex: 2 + } + ] +}; +``` + +Además, [dataset.fromTransformResult](${optionPath}#dataset.fromTransformResult) y [dataset.transform](${optionPath}#dataset.transform) pueden aparecer en un mismo conjunto de datos, lo que significa que la entrada de la transformación proviene del resultado obtenido upstream especificado por `fromTransformResult`. Por ejemplo: + +```js +{ + fromDatasetIndex: 1, + fromTransformResult: 1, + transform: { + type: 'sort', + config: { dimension: 2, order: 'desc' } + } +} +``` + +#### Depuración en el Entorno de Desarrollo + +Al usar la transformación de datos, podríamos encontrarnos con el problema de que el gráfico final no se muestra correctamente, pero no sabemos dónde está el error en la configuración. En este caso, una propiedad llamada `transform.print` puede ser útil. (`transform.print` solo está disponible en el entorno de desarrollo). + +```js +option = { + dataset: [ + { + source: [] + }, + { + transform: { + type: 'filter', + config: {}, + // The result of this transform will be printed + // in dev tool via `console.log`. + print: true + } + } + ] +}; +``` + +## Transformación de Filtro + +El tipo de transformación "filtro" es una transformación incorporada que proporciona un filtro de datos según las condiciones especificadas. La opción básica es la siguiente: Este es otro ejemplo de transformación de filtro: + +```js live +option = { + dataset: [ + { + source: [ + ['Product', 'Sales', 'Price', 'Year'], + ['Cake', 123, 32, 2011], + ['Latte', 231, 14, 2011], + ['Tofu', 235, 5, 2011], + ['Milk Tee', 341, 25, 2011], + ['Porridge', 122, 29, 2011], + ['Cake', 143, 30, 2012], + ['Latte', 201, 19, 2012], + ['Tofu', 255, 7, 2012], + ['Milk Tee', 241, 27, 2012], + ['Porridge', 102, 34, 2012], + ['Cake', 153, 28, 2013], + ['Latte', 181, 21, 2013], + ['Tofu', 395, 4, 2013], + ['Milk Tee', 281, 31, 2013], + ['Porridge', 92, 39, 2013], + ['Cake', 223, 29, 2014], + ['Latte', 211, 17, 2014], + ['Tofu', 345, 3, 2014], + ['Milk Tee', 211, 35, 2014], + ['Porridge', 72, 24, 2014] + ] + }, + { + transform: { + type: 'filter', + config: { dimension: 'Year', '=': 2011 } + // The config is the "condition" of this filter. + // This transform traverse the source data and + // and retrieve all the items that the "Year" + // is `2011`. + } + } + ], + series: { + type: 'pie', + datasetIndex: 1 + } +}; +``` + +Este es otro ejemplo de transformación de filtro: + + + +**Sobre la dimensión:** + +La `config.dimension` de ser: + +- El nombre de la dimensión declarado en el conjunto de datos, como `config: { dimension: 'Year', '=': 2011 }`. La declaración del nombre de la dimensión no es obligatoria. +- El índice de la dimensión (empezando desde 0), como`config: { dimension: 3, '=': 2011 }`. + +**Sobre el operador relacional:** + +El operador relacional puede ser: +`>`(`gt`), `>=`(`gte`), `<`(`lt`), `<=`(`lte`), `=`(`eq`), `!=`(`ne`, `<>`), `reg`. (El nombre entre paréntesis son alias). Siguen la semántica común. Además de la comparación común de números, existen algunas características adicionales: + + +- Varios operadores pueden aparecer en un solo ítem {} como `{ dimension: 'Price', '>=': 20, '<': 30 }`, lo que significa "y" lógico (Price >= 20 y Price < 30). +- El valor de los datos puede ser una "cadena numérica". Una cadena numérica es una cadena que puede convertirse a número, como ' 123 '. Los espacios en blanco y los saltos de línea se recortarán automáticamente durante la conversión. +- Si necesitamos comparar una "instancia `Date` o una cadena de fecha (como '2012-05-12'), debemos especificar manualmente `parser: 'time'` como `config: { dimension: 3, lt: '2012-05-12', parser: 'time' }`. +- La comparación de cadenas puras está soportada pero solo se puede usar en `=`, `!=`. `>`, `>=`, `<`, `<=` no soportan la comparación de cadenas puras (el "valor derecho" de los cuatro operadores no puede ser una "cadena"). +- El operador `reg` se puede usar para hacer una prueba de expresión regular. Como usar`{ dimension: 'Name', reg: /\s+Müller\s*$/ }` para seleccionar todos los ítems de datos cuyo valor en la dimensión "Name" contenga el apellido Müller. + +**Sobre la relación lógica:** + +A veces también necesitamos expresar relaciones lógicas ( `and` / `or` / `not` ): + +```js +option = { + dataset: [ + { + source: [ + // ... + ] + }, + { + transform: { + type: 'filter', + config: { + // Use operator "and". + // Similarly, we can also use "or", "not" in the same place. + // But "not" should be followed with a {...} rather than `[...]`. + and: [ + { dimension: 'Year', '=': 2011 }, + { dimension: 'Price', '>=': 20, '<': 30 } + ] + } + // The condition is "Year" is 2011 and "Price" is greater + // or equal to 20 but less than 30. + } + } + ], + series: { + type: 'pie', + datasetIndex: 1 + } +}; +``` + +`and`/`or`/`not` pueden estar anidados como: + +```js +transform: { + type: 'filter', + config: { + or: [{ + and: [{ + dimension: 'Price', '>=': 10, '<': 20 + }, { + dimension: 'Sales', '<': 100 + }, { + not: { dimension: 'Product', '=': 'Tofu' } + }] + }, { + and: [{ + dimension: 'Price', '>=': 10, '<': 20 + }, { + dimension: 'Sales', '<': 100 + }, { + not: { dimension: 'Product', '=': 'Cake' } + }] + }] + } +} +``` + +**Sobre el Parser:** + +Se puede especificar un "parser" al hacer la comparación de valores. Actualmente, solo se soportan los siguientes: + +- `parser: 'time'`: Convierte el valor a fecha y hora antes de compararlo. La regla del parser es la misma que `echarts.time.parse`, donde se soportan instancias de `Date` de JS, números de timestamp (en milisegundos) y cadenas de tiempo (como `'2012-05-12 03:11:22'`) para ser convertidos a números de timestamp, mientras que otros valores se convertirán a `NaN`. +- `parser: 'trim'`: Recorta la cadena antes de hacer la comparación. Para valores no string, se devuelve el valor original. +- `parser: 'number'`: Fuerza a convertir el valor a número antes de hacer la comparación. Si no es posible convertirlo a un número significativo, se convierte a `NaN`. En la mayoría de los casos no es necesario, ya que por defecto el valor se convertirá automáticamente a número si es posible antes de hacer la comparación. Pero la conversión por defecto es estricta, mientras que este parser proporciona una estrategia más flexible. Si nos encontramos con un caso donde una cadena numérica tiene un sufijo de unidad (como `'33%'`, `12px`), debemos usar `parser: 'number'` para convertirlas a número antes de hacer la comparación. + +Este es un ejemplo para mostrar el uso de `parser: 'time'`: + +```js +option = { + dataset: [ + { + source: [ + ['Product', 'Sales', 'Price', 'Date'], + ['Milk Tee', 311, 21, '2012-05-12'], + ['Cake', 135, 28, '2012-05-22'], + ['Latte', 262, 36, '2012-06-02'], + ['Milk Tee', 359, 21, '2012-06-22'], + ['Cake', 121, 28, '2012-07-02'], + ['Latte', 271, 36, '2012-06-22'] + // ... + ] + }, + { + transform: { + type: 'filter', + config: { + dimension: 'Date', + '>=': '2012-05', + '<': '2012-06', + parser: 'time' + } + } + } + ] +}; +``` + +**Definición formal:** + +Finalmente, damos la definición formal de la configuración de la transformación de filtro aquí: + +```ts +type FilterTransform = { + type: 'filter'; + config: ConditionalExpressionOption; +}; +type ConditionalExpressionOption = + | true + | false + | RelationalExpressionOption + | LogicalExpressionOption; +type RelationalExpressionOption = { + dimension: DimensionName | DimensionIndex; + parser?: 'time' | 'trim' | 'number'; + lt?: DataValue; // less than + lte?: DataValue; // less than or equal + gt?: DataValue; // greater than + gte?: DataValue; // greater than or equal + eq?: DataValue; // equal + ne?: DataValue; // not equal + '<'?: DataValue; // lt + '<='?: DataValue; // lte + '>'?: DataValue; // gt + '>='?: DataValue; // gte + '='?: DataValue; // eq + '!='?: DataValue; // ne + '<>'?: DataValue; // ne (SQL style) + reg?: RegExp | string; // RegExp +}; +type LogicalExpressionOption = { + and?: ConditionalExpressionOption[]; + or?: ConditionalExpressionOption[]; + not?: ConditionalExpressionOption; +}; +type DataValue = string | number | Date; +type DimensionName = string; +type DimensionIndex = number; +``` + +> Nota: cuando se utiliza [Minimal Bundle](${lang}/basics/import#shrinking-bundle-size), si necesitas usar esta transformación incorporada, además del componente `Dataset` es necesario importar el componente `Transform`. + +```ts +import { + DatasetComponent, + TransformComponent +} from 'echarts/components'; + +echarts.use([ + DatasetComponent, + TransformComponent +]); +``` + +## Transformación de Ordenación + +Otra transformación incorporada es "sort". + +```js +option = { + dataset: [ + { + dimensions: ['name', 'age', 'profession', 'score', 'date'], + source: [ + [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'], + ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'], + [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'], + ['Li Lei', 37, 'Teacher', 219, '2011-02-18'], + [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'], + [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'], + ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'], + [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'], + ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12'] + ] + }, + { + transform: { + type: 'sort', + // Sort by score. + config: { dimension: 'score', order: 'asc' } + } + } + ], + series: { + type: 'bar', + datasetIndex: 1 + } + // ... +}; +``` + + + +Algunas características adicionales sobre la "transformación de ordenación": + +- Se admite el orden por múltiples dimensiones. Ver los ejemplos a continuación. +- La regla de ordenación: + - Por defecto, los valores "numéricos" (es decir, números y cadenas numéricas como `' 123 '`) pueden ordenarse en orden numérico. + - De lo contrario, las "cadenas no numéricas" también pueden ordenarse entre sí. Esto puede ser útil en casos como agrupar elementos de datos con la misma etiqueta, especialmente cuando participan múltiples dimensiones en la ordenación (ver el ejemplo a continuación). + - Cuando se compara un "número" con una "cadena no numérica", o cualquiera de ellos se compara con otros tipos de valores, no son comparables. Por lo tanto, a este último se le llama "incomparable" y se trata como el "valor mínimo" o "valor máximo" según la propiedad `incomparable: 'min' | 'max'`. . Esta característica generalmente ayuda a decidir si se deben colocar los valores vacíos (como `null`, `undefined`, `NaN`, `''`, `'-'`) u otros valores no válidos al principio o al final. + - `parser: 'time' | 'trim' | 'number'` se puede usar, al igual que en la "transformación de filtro". + - Si se pretende ordenar valores de tiempo (instancia `Date` de JS o cadenas de tiempo como `'2012-03-12 11:13:54'`), debe especificarse `parser: 'time'` como `config: { dimension: 'date', order: 'desc', parser: 'time' }` + - Si se pretende ordenar valores con sufijos de unidad (como `'33%'`, `'16px'`), es necesario usar `parser: 'number'`. + +Ver un ejemplo de ordenación múltiple: + +```js +option = { + dataset: [ + { + dimensions: ['name', 'age', 'profession', 'score', 'date'], + source: [ + [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'], + ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'], + [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'], + ['Li Lei', 37, 'Teacher', 219, '2011-02-18'], + [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'], + [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'], + ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'], + [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'], + ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12'] + ] + }, + { + transform: { + type: 'sort', + config: [ + // Sort by the two dimensions. + { dimension: 'profession', order: 'desc' }, + { dimension: 'score', order: 'desc' } + ] + } + } + ], + series: { + type: 'bar', + datasetIndex: 1 + } + // ... +}; +``` + + + +Finalmente, damos la definición formal de la configuración de la transformación de ordenación aquí: + +```ts +type SortTransform = { + type: 'sort'; + config: OrderExpression | OrderExpression[]; +}; +type OrderExpression = { + dimension: DimensionName | DimensionIndex; + order: 'asc' | 'desc'; + incomparable?: 'min' | 'max'; + parser?: 'time' | 'trim' | 'number'; +}; +type DimensionName = string; +type DimensionIndex = number; +``` + +> Nota: cuando se utiliza [Minimal Bundle](${lang}/basics/import#shrinking-bundle-size), si necesitas usar esta transformación incorporada, además del componente `Dataset` es necesario importar el componente `Transform`. + +```ts +import { + DatasetComponent, + TransformComponent +} from 'echarts/components'; + +echarts.use([ + DatasetComponent, + TransformComponent +]); +``` + +## Usar Transformaciones Externas + +Además de las transformaciones incorporadas (como 'filtro', 'ordenación'), también podemos usar transformaciones externas para proporcionar funcionalidades más poderosas. Aquí usamos una biblioteca de terceros [ecStat](https://github.com/ecomfe/echarts-stat) como ejemplo: + +Este caso muestra cómo hacer una línea de regresión mediante ecStat: + +```js +// Register the external transform at first. +echarts.registerTransform(ecStatTransform(ecStat).regression); +``` + +```js +option = { + dataset: [ + { + source: rawData + }, + { + transform: { + // Reference the registered external transform. + // Note that external transform has a namespace (like 'ecStat:xxx' + // has namespace 'ecStat'). + // built-in transform (like 'filter', 'sort') does not have a namespace. + type: 'ecStat:regression', + config: { + // Parameters needed by the external transform. + method: 'exponential' + } + } + } + ], + xAxis: { type: 'category' }, + yAxis: {}, + series: [ + { + name: 'scatter', + type: 'scatter', + datasetIndex: 0 + }, + { + name: 'regression', + type: 'line', + symbol: 'none', + datasetIndex: 1 + } + ] +}; +``` + +Ejemplos con echarts-stat: + +- [Aggregate](${exampleEditorPath}data-transform-aggregate&edit=1&reset=1) +- [Bar histogram](${exampleEditorPath}bar-histogram&edit=1&reset=1) +- [Scatter clustering](${exampleEditorPath}scatter-clustering&edit=1&reset=1) +- [Scatter linear regression](${exampleEditorPath}scatter-linear-regression&edit=1&reset=1) +- [Scatter exponential regression](${exampleEditorPath}scatter-exponential-regression&edit=1&reset=1) +- [Scatter logarithmic regression](${exampleEditorPath}scatter-logarithmic-regression&edit=1&reset=1) +- [Scatter polynomial regression](${exampleEditorPath}scatter-polynomial-regression&edit=1&reset=1) diff --git a/contents/es/concepts/dataset.md b/contents/es/concepts/dataset.md new file mode 100644 index 000000000..0eb95cd9e --- /dev/null +++ b/contents/es/concepts/dataset.md @@ -0,0 +1,535 @@ +# Dataset + +`dataset` es un componente dedicado a gestionar los datos. Aunque puedes definir los datos en `series.data` para cada serie, te recomendamos utilizar el `dataset` para gestionar los datos desde ECharts 4, ya que permite que los datos se reutilicen en múltiples componentes y facilita la separación de "datos y configuraciones". Después de todo, los datos son la parte que más cambia, mientras que las otras configuraciones generalmente no cambian en tiempo de ejecución. + +## Definir **datos** bajo **series** + +Si defines los datos bajo `series`, por ejemplo: + +```js live +option = { + xAxis: { + type: 'category', + data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'] + }, + yAxis: {}, + series: [ + { + type: 'bar', + name: '2015', + data: [89.3, 92.1, 94.4, 85.4] + }, + { + type: 'bar', + name: '2016', + data: [95.8, 89.4, 91.2, 76.9] + }, + { + type: 'bar', + name: '2017', + data: [97.7, 83.1, 92.5, 78.1] + } + ] +}; +``` + +Definir los `data` bajo `series` es adecuado para la personalización de estructuras de datos especiales como "árbol", "gráfico" y grandes volúmenes de datos. Sin embargo, no es conveniente para compartir los datos entre varias series ni para organizar los tipos de gráficos y series basados en los datos originales. Otra desventaja es que los programadores siempre tienen que dividir los datos en series separadas (y categorías) primero. + +## Definir **datos** en **dataset** + +Aquí están las ventajas si defines los `datos` en el `dataset`: + +- Sigue la lógica de visualización de datos: (I) Proporciona los datos, (II) Mapea los datos a la visualización para convertirlos en un gráfico. +- Separa los datos de otras configuraciones. Los datos cambian frecuentemente, pero las otras configuraciones no lo hacen. Es fácil gestionarlos por separado. +- Los datos pueden ser reutilizados por varias series o componentes, sin necesidad de crear copias de grandes volúmenes de datos para cada serie. +- Soporta formatos de datos más comunes, como un arreglo 2D, arreglo de clases, etc., para evitar que los usuarios tengan que convertir los datos a un formato específico. + +Aquí tienes un ejemplo simple de `dataset`: + +```js live +option = { + legend: {}, + tooltip: {}, + dataset: { + // Provide a set of data. + source: [ + ['product', '2015', '2016', '2017'], + ['Matcha Latte', 43.3, 85.8, 93.7], + ['Milk Tea', 83.1, 73.4, 55.1], + ['Cheese Cocoa', 86.4, 65.2, 82.5], + ['Walnut Brownie', 72.4, 53.9, 39.1] + ] + }, + // Declare an x-axis (category axis). + // The category map the first column in the dataset by default. + xAxis: { type: 'category' }, + // Declare a y-axis (value axis). + yAxis: {}, + // Declare several 'bar' series, + // every series will auto-map to each column by default. + series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }] +}; +``` + +O intenta usar el formato "array of classes": + +```js live +option = { + legend: {}, + tooltip: {}, + dataset: { + // Define the dimension of array. In cartesian coordinate system, + // if the type of x-axis is category, map the first dimension to + // x-axis by default, the second dimension to y-axis. + // You can also specify 'series.encode' to complete the map + // without specify dimensions. Please see below. + + dimensions: ['product', '2015', '2016', '2017'], + source: [ + { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 }, + { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 }, + { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 }, + { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 } + ] + }, + xAxis: { type: 'category' }, + yAxis: {}, + series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }] +}; +``` + +## Mapeo de Datos a Gráfico + +Las ideas de visualización de datos son: (I) Proporcionar los datos, (II) Mapear los datos a la visualización para convertirlos en un gráfico. + +En resumen, puedes configurar estos mapeos: + +- Especifica la 'columna' o 'fila' del `dataset` para mapear a la `series`. Puedes usar [series.seriesLayoutBy](${optionPath}series.seriesLayoutBy) para configurarlo. El valor por defecto es mapear según la columna. +- Regla de mapeo de dimensiones: cómo mapear las dimensiones de 'dataset' a `axis`, `tooltip`, `label` y `visualMap`. Para configurar el mapeo usa [series.encode](${optionPath}series.encode) y [visualMap](${optionPath}visualMap). En el caso anterior no se proporcionó la configuración de mapeo, por lo que ECharts seguirá el comportamiento por defecto: si el eje X es de tipo categoría, mapea a la primera fila en `dataset.source`; un gráfico de tres columnas mapea con cada fila en `dataset.source` una por una. + +Los detalles de la configuración se muestran a continuación: + +## Mapeo de Fila o Columna de **dataset** a **series** + +Teniendo el dataset, puedes configurar de manera flexible cómo los datos se mapean al eje y la serie. + +Puedes usar `seriesLayoutBy` para cambiar la interpretación de fila y columna del gráfico. `seriesLayoutBy` puede ser: + +- `'column'`: Valor por defecto. Las series se colocan sobre la columna del `dataset`. +- `'row'`: Las series se colocan sobre la fila del `dataset`. + +Mira este caso: + +```js live +option = { + legend: {}, + tooltip: {}, + dataset: { + source: [ + ['product', '2012', '2013', '2014', '2015'], + ['Matcha Latte', 41.1, 30.4, 65.1, 53.3], + ['Milk Tea', 86.5, 92.1, 85.7, 83.1], + ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4] + ] + }, + xAxis: [ + { type: 'category', gridIndex: 0 }, + { type: 'category', gridIndex: 1 } + ], + yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }], + grid: [{ bottom: '55%' }, { top: '55%' }], + series: [ + // These series will show in the first coordinate, each series map a row in dataset. + { type: 'bar', seriesLayoutBy: 'row', xAxisIndex: 0, yAxisIndex: 0 }, + { type: 'bar', seriesLayoutBy: 'row', xAxisIndex: 0, yAxisIndex: 0 }, + { type: 'bar', seriesLayoutBy: 'row', xAxisIndex: 0, yAxisIndex: 0 }, + // These series will show in the second coordinate, each series map a column in dataset. + { type: 'bar', seriesLayoutBy: 'column', xAxisIndex: 1, yAxisIndex: 1 }, + { type: 'bar', seriesLayoutBy: 'column', xAxisIndex: 1, yAxisIndex: 1 }, + { type: 'bar', seriesLayoutBy: 'column', xAxisIndex: 1, yAxisIndex: 1 }, + { type: 'bar', seriesLayoutBy: 'column', xAxisIndex: 1, yAxisIndex: 1 } + ] +}; +``` + +El efecto de la configuración se muestra en [this case](${exampleEditorPath}dataset-series-layout-by). + +## Dimensión + +La mayoría de los datos descritos en los gráficos comúnmente usados tienen una estructura de "tabla bidimensional", en el caso anterior, usamos un arreglo 2D para contener una tabla bidimensional. Ahora, cuando asignamos una serie a una columna, esa columna se llama "dimensión" y cada fila se llama "elemento", y viceversa. + +La dimensión puede tener su propio nombre para mostrarse en el gráfico. El nombre de la dimensión puede definirse en la primera columna (fila). En [next case](${lang}/concepts/dataset/#map-from-data-to-charts-(series.encode)), `'score'`, `'amount'`, `'product'` son los nombres de las dimensiones. Los datos reales se encuentran en la segunda fila. ECharts verificará automáticamente si la primera columna (fila) contiene el nombre de la dimensión en `dataset.source`. También puedes usar `dataset.sourceHeader: true` declarar que la primera columna (fila) representa el nombre de la dimensión. + +Intenta usar solo `dataset.dimensions` o algunas `series.dimensions` para definir las dimensiones, por lo tanto, puedes especificar el nombre y el tipo juntos. + +```js +var option1 = { + dataset: { + dimensions: [ + { name: 'score' }, + // can be abbreviated as 'string', to indicate dimension name + 'amount', + // Specify dimensions in 'type'. + { name: 'product', type: 'ordinal' } + ], + source: [] + } + // ... +}; + +var option2 = { + dataset: { + source: [] + }, + series: { + type: 'line', + // series.dimensions will cover the config in dataset.dimension + dimensions: [ + null, // use null if you do not want dimension name. + 'amount', + { name: 'product', type: 'ordinal' } + ] + } + // ... +}; +``` + +En la mayoría de los casos, no es necesario definir el tipo de dimensión porque ECharts lo determinará automáticamente. Si el juicio es inexacto, puedes definirlo manualmente. + +El tipo de dimensión puede ser uno de los siguientes valores: + +- `'number'`: Predeterminado, datos normales.. +- `'ordinal'`: Datos de tipo cadena como categorías, texto, que solo se pueden usar en el eje con el tipo de dimensión 'ordinal'. ECharts intentará determinar automáticamente este tipo, pero puede ser inexacto, por lo que puedes especificarlo manualmente. +- `'time'`: Para representar datos de tiempo, ECharts puede analizar automáticamente los datos como una marca de tiempo si el tipo de dimensión se define como `'time'`. Por ejemplo, ECharts lo analizará automáticamente si los datos de esta dimensión son '2017-05-10'. Si la dimensión se usa como un eje de tiempo ([axis.type](${optionPath}xAxis.type) = `'time'`), el tipo de dimensión también será `'time'`. Consulta [data](${optionPath}series.data) para más soporte de tipo de tiempo. +- `'float'`: Utiliza `TypedArray` para optimizar el rendimiento en la dimensión `'float'`. +- `'int'`: Utiliza `TypedArray` para optimizar el rendimiento en la dimensión `'int'`. + +## Mapeo de Datos a Gráficos (series.encode) + +Después de entender el concepto de dimensión, puedes usar [series.encode](${optionPath}series.encode) para hacer un mapeo: + +```js live +var option = { + dataset: { + source: [ + ['score', 'amount', 'product'], + [89.3, 58212, 'Matcha Latte'], + [57.1, 78254, 'Milk Tea'], + [74.4, 41032, 'Cheese Cocoa'], + [50.1, 12755, 'Cheese Brownie'], + [89.7, 20145, 'Matcha Cocoa'], + [68.1, 79146, 'Tea'], + [19.6, 91852, 'Orange Juice'], + [10.6, 101852, 'Lemon Juice'], + [32.7, 20112, 'Walnut Brownie'] + ] + }, + xAxis: {}, + yAxis: { type: 'category' }, + series: [ + { + type: 'bar', + encode: { + // Map "amount" column to x-axis. + x: 'amount', + // Map "product" row to y-axis. + y: 'product' + } + } + ] +}; +``` + +La estructura básica de la declaración `series.encode`: + +- A la izquierda del colon: Nombre específico del eje o etiqueta. +- A la derecha del colon: Nombre de la dimensión (cadena) o número (entero, contando desde 0), para especificar una o varias dimensiones (usando un arreglo). + +En general, la siguiente información no es necesario definirla. Completa según sea necesario. + +Atributos sugeridos por `series.encode` + +```js +// Supported in every coordinate and series: +encode: { + // Display the value of dimension named "product" and "score" in tooltip. + tooltip: ['product', 'score'] + // Connect dimension name of "Dimension 1" and "Dimension 3" as the series name. (Avoid to repeat longer names in series.name) + seriesName: [1, 3], + // Means to use the value in "Dimension 2" as the id. It makes the new and old data correspond by id + // when using setOption to update data, so that it can show animation properly. + itemId: 2, + // The itemName will show in the legend of Pie Charts. + itemName: 3 +} + +// Grid/cartesian coordinate unique configs: +encode: { + // Map "Dimension 1", "Dimension 5" and "dimension named 'score'" to x-axis: + x: [1, 5, 'score'], + // Map "Dimension 0" to y-axis: + y: 0 +} + +// singleAxis unique configs: +encode: { + single: 3 +} + +// Polar coordinate unique configs: +encode: { + radius: 3, + angle: 2 +} + +// Geo-coordinate unique configs: +encode: { + lng: 3, + lat: 2 +} + +// For some charts without coordinate like pie chart, funnel chart: +encode: { + value: 3 +} +``` + +Este es un ejemplo más completo de [example](${exampleEditorPath}dataset-encode1) `series.encode`. + +## series.encode por defecto + +Vale la pena mencionar que ECharts utilizará algunas reglas de mapeo por defecto para algunos gráficos generales (línea, barra, dispersión, velas, etc.) si no se especifica `series.encode` La regla predeterminada es: + +- En un sistema de coordenadas (por ejemplo, cartesiano, polar): + - Si hay un eje de categoría ([axis.type](${optionPath}xAxis.type) = `'category'`), mapea la primera columna (fila) al eje y cada columna (fila) subsecuente a cada serie. + - Si ambos ejes no son de categoría, entonces mapea cada par de columnas en una serie a dos ejes. +- Sin eje (por ejemplo, gráfico de torta): + - Usa la primera columna (fila) como el nombre, la segunda columna (fila) como el valor. ECharts no asignará un nombre si solo hay una columna (fila). + +Si la regla predeterminada no satisface los requisitos, puedes configurar `encode` bpor ti mismo, lo cual no es complicado. Aquí tienes un [example](${exampleEditorPath}dataset-default). + +## Algunos ajustes normales de series.encode + +Q: ¿Cómo establecer la tercera columna como el eje x, y la quinta columna como el eje y? + +A: + +```js +option = { + series: { + // dimensionIndex count from 0, so the 3rd line is dimensions[2]. + encode: { x: 2, y: 4 } + // ... + } +}; +``` + +Q: ¿Cómo establecer la tercera fila como el eje x, y la quinta fila como el eje y? + +A: + +```js +option = { + series: { + encode: { x: 2, y: 4 }, + seriesLayoutBy: 'row' + // ... + } +}; +``` + +Q: ¿Cómo establecer la segunda columna como etiqueta? + +A: +Ahora soportamos rastrear el valor de una dimensión específica para [label.formatter](${optionPath}series.label.formatter): + +```js +series: { + label: { + // `'{@score}'` means the value in the dimension named "score". + // `'{@[4]}'` means the value in dimension 4. + formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd'; + } +} +``` + +Q: ¿Cómo mostrar la segunda y tercera columna en el tooltip? + +A: + +```js +option = { + series: { + encode: { + tooltip: [1, 2] + // ... + } + // ... + } +}; +``` + +Q: ¿Cómo definir el nombre de la dimensión si no está incluido en el conjunto de datos? + +A: + +```js +var option = { + dataset: { + dimensions: ['score', 'amount'], + source: [ + [89.3, 3371], + [92.1, 8123], + [94.4, 1954], + [85.4, 829] + ] + } +}; +``` + +Q: ¿Cómo asignar la tercera columna al tamaño del gráfico de dispersión? + +A: + +```js live +var option = { + dataset: { + source: [ + [12, 323, 11.2], + [23, 167, 8.3], + [81, 284, 12], + [91, 413, 4.1], + [13, 287, 13.5] + ] + }, + visualMap: { + show: false, + dimension: 2, // means the 3rd column + min: 2, // lower bound + max: 15, // higher bound + inRange: { + // Size of the bubble. + symbolSize: [5, 60] + } + }, + xAxis: {}, + yAxis: {}, + series: { + type: 'scatter' + } +}; +``` + +Q: Especificé una asignación en encode, ¿por qué no funcionó? + +A: Revisa tu ortografía, por ejemplo, si escribiste mal el nombre de la dimensión `'Life Expectancy'` como `'Life Expectency'` en encode. + +## Mapeo de Canales Visuales + +Podemos mapear un canal visual usando [visualMap](${optionPath}visualMap). Consulta los detalles en el documento de [visualMap](${optionPath}visualMap) Aquí hay un [example](${exampleEditorPath}dataset-encode0). + +## Formatos de Gráficos + +En la mayoría de los gráficos normales, los datos se describen adecuadamente en forma de una tabla bidimensional. Programas conocidos como 'MS Excel' y 'Numbers' utilizan tablas bidimensionales. Sus datos pueden exportarse a formato JSON e ingresarse en `dataset.source` lo que evita algunos pasos de procesamiento de datos. + +> Puedes convertir archivos .csv a JSON usando herramientas como [dsv](https://github.com/d3/d3-dsv) o [PapaParse](https://github.com/mholt/PapaParse). + +Como se muestra en el ejemplo posterior, en la transmisión de datos de JavaScript, los datos bidimensionales pueden almacenarse directamente en un array bidimensional. + +Aparte del array bidimensional, el conjunto de datos también admite el uso de pares clave-valor, que también es una forma común. Sin embargo, actualmente no soportamos [seriesLayoutBy](${optionPath}series.seriesLayoutBy) en este formato. + +```js +dataset: [ + { + // column by column key-value array is a normal format + source: [ + { product: 'Matcha Latte', count: 823, score: 95.8 }, + { product: 'Milk Tea', count: 235, score: 81.4 }, + { product: 'Cheese Cocoa', count: 1042, score: 91.2 }, + { product: 'Walnut Brownie', count: 988, score: 76.9 } + ] + }, + { + // row by row key-value + source: { + product: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'], + count: [823, 235, 1042, 988], + score: [95.8, 81.4, 91.2, 76.9] + } + } +]; +``` + +## Cómo Referenciar Varios Conjuntos de Datos + +ECharts permite definir varios conjuntos de datos al mismo tiempo. Las series pueden asignar uno a referencia mediante [series.datasetIndex](${optionPath}series.datasetIndex). Por ejemplo: + +```js +var option = { + dataset: [ + { + // 1st Dataset + source: [] + }, + { + // 2nd Dataset + source: [] + }, + { + // 3rd Dataset + source: [] + } + ], + series: [ + { + // Use 2nd dataset + datasetIndex: 1 + }, + { + // Use 1st dataset + datasetIndex: 0 + } + ] +}; +``` + +## series.data en ECharts 3 + +ECharts 4 aún soporta la declaración de datos de la manera de ECharts 3. Si la serie ya ha declarado [series.data](${optionPath}series.data), entonces usa [series.data](${optionPath}series.data) pero no `dataset`. + +```js +option = { + xAxis: { + type: 'category', + data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'] + }, + yAxis: {}, + series: [ + { + type: 'bar', + name: '2015', + data: [89.3, 92.1, 94.4, 85.4] + }, + { + type: 'bar', + name: '2016', + data: [95.8, 89.4, 91.2, 76.9] + }, + { + type: 'bar', + name: '2017', + data: [97.7, 83.1, 92.5, 78.1] + } + ] +}; +``` + +De hecho, [series.data](${optionPath}series.data) es un método de configuración importante que siempre existirá. Algunos gráficos especiales en formatos no tabulares, como [treemap](${optionPath}series-treemap), [graph](${optionPath}series-graph) y [lines](${optionPath}series-lines) aún no pueden editarse en el conjunto de datos, por lo que aún necesitas usar [series.data](${optionPath}series.data). De otra manera, para representar grandes cantidades de datos (más de un millón), deberás usar [appendData](${mainSitePath}api.html#echartsInstance.appendData) que no es compatible con `dataset`. + +## Otros + +Los siguientes gráficos ahora soportan dataset: +`line`, `bar`, `pie`, `scatter`, `effectScatter`, `parallel`, `candlestick`, `map`, `funnel`, `custom`. + ECharts soportará más gráficos en el futuro. + +Al final, aquí hay un [example](${exampleEditorPath}dataset-link) de varios gráficos compartiendo un `dataset` con interacción de vinculación. diff --git a/contents/es/concepts/event.md b/contents/es/concepts/event.md new file mode 100644 index 000000000..778548cc6 --- /dev/null +++ b/contents/es/concepts/event.md @@ -0,0 +1,369 @@ +# Evento y Acción + +Los usuarios pueden activar eventos correspondientes con sus acciones. El desarrollador puede manejar la función de retroalimentación escuchando estos eventos, como saltar a un nuevo sitio web, mostrar un cuadro de diálogo emergente o profundizar en los datos. + +El nombre del evento y el evento DOM son cadenas en minúsculas. Aquí hay un ejemplo de cómo enlazar la escucha del evento `click`. + +```js +myChart.on('click', function(params) { + // Print name in console + console.log(params.name); +}); +``` + +Existen dos tipos de eventos en ECharts: uno ocurre cuando el usuario hace clic con el ratón o pasa el cursor sobre los elementos del gráfico, y el otro sucede cuando el usuario activa alguna acción interactiva. Por ejemplo,['legendselectchanged'](${mainSitePath}api.html#events.legendselectchanged) se activa cuando se cambia la selección de la leyenda (ten en cuenta que `legendselected` no se activará en esta situación), ['datazoom'](${mainSitePath}api.html#events.legendselectchanged) se activa cuando se hace zoom en el área de datos. + +## Manejo de los Eventos del Ratón + +ECharts soporta eventos generales del ratón: `'click'`, `'dblclick'`, `'mousedown'`, `'mousemove'`, `'mouseup'`, `'mouseover'`, `'mouseout'`, `'globalout'`, `'contextmenu'`. Este es un ejemplo de abrir la página de resultados de búsqueda después de hacer clic en un gráfico de barras. + +```js +// Init the ECharts base on DOM +var myChart = echarts.init(document.getElementById('main')); + +// Config +var option = { + xAxis: { + data: [ + 'Shirt', + 'Wool sweater', + 'Chiffon shirt', + 'Pants', + 'High-heeled shoes', + 'socks' + ] + }, + yAxis: {}, + series: [ + { + name: 'Sales', + type: 'bar', + data: [5, 20, 36, 10, 10, 20] + } + ] +}; +// Use the option and data to display the chart +myChart.setOption(option); +// Click and jump to Baidu search website +myChart.on('click', function(params) { + window.open( + 'https://www.google.com/search?q=' + encodeURIComponent(params.name) + ); +}); +``` + +Todos los eventos del ratón incluyen `params` que contiene los datos del objeto. + +Formato: + +```js +type EventParams = { + // The component name clicked, + // component type, could be 'series'、'markLine'、'markPoint'、'timeLine', etc.. + componentType: string, + // series type, could be 'line'、'bar'、'pie', etc.. Works when componentType is 'series'. + seriesType: string, + // the index in option.series. Works when componentType is 'series'. + seriesIndex: number, + // series name, works when componentType is 'series'. + seriesName: string, + // name of data (categories). + name: string, + // the index in 'data' array. + dataIndex: number, + // incoming raw data item + data: Object, + // charts like 'sankey' and 'graph' included nodeData and edgeData as the same time. + // dataType can be 'node' or 'edge', indicates whether the current click is on node or edge. + // most of charts have one kind of data, the dataType is meaningless + dataType: string, + // incoming data value + value: number | Array, + // color of the shape, works when componentType is 'series'. + color: string +}; +``` +Identificar dónde se hizo clic con el ratón. + +```js +myChart.on('click', function(params) { + if (params.componentType === 'markPoint') { + // Clicked on the markPoint + if (params.seriesIndex === 5) { + // clicked on the markPoint of the series with index = 5 + } + } else if (params.componentType === 'series') { + if (params.seriesType === 'graph') { + if (params.dataType === 'edge') { + // clicked at the edge of graph. + } else { + // clicked at the node of graph. + } + } + } +}); +``` + +Usar `query` para activar la función de retroalimentación de un componente especificado: + +```js +chart.on(eventName, query, handler); +``` + +`query` puede ser una `string` o un `Object`. + +Si es un `string`, el formato puede ser `mainType` o `mainType.subType`, como: + +```js +chart.on('click', 'series', function () {...}); +chart.on('click', 'series.line', function () {...}); +chart.on('click', 'dataZoom', function () {...}); +chart.on('click', 'xAxis.category', function () {...}); +``` + +Si es un `Object`, `query` puede incluir más de un atributo: + +```js +{ + ${mainType}Index: number // component index + ${mainType}Name: string // component name + ${mainType}Id: string // component id + dataIndex: number // data item index + name: string // data item name + dataType: string // date item type, such as 'node', 'edge' + element: string // name of element in custom series. +} +``` +Como por ejemplo: + +```js +chart.setOption({ + // ... + series: [ + { + name: 'uuu' + // ... + } + ] +}); +chart.on('mouseover', { seriesName: 'uuu' }, function() { + // when elements in series named 'uuu' triggered 'mouseover' +}); +``` +Por ejemplo: + +```js +chart.setOption({ + // ... + series: [ + { + // ... + }, + { + // ... + data: [ + { name: 'xx', value: 121 }, + { name: 'yy', value: 33 } + ] + } + ] +}); +chart.on('mouseover', { seriesIndex: 1, name: 'xx' }, function() { + // when data named 'xx' in series index 1 triggered 'mouseover'. +}); +``` +Por ejemplo: + +```js +chart.setOption({ + // ... + series: [ + { + type: 'graph', + nodes: [ + { name: 'a', value: 10 }, + { name: 'b', value: 20 } + ], + edges: [{ source: 0, target: 1 }] + } + ] +}); +chart.on('click', { dataType: 'node' }, function() { + // call this method while the node of graph was clicked. +}); +chart.on('click', { dataType: 'edge' }, function() { + // call this method while the edge of graph was clicked. +}); +``` +Por ejemplo: + +```js +chart.setOption({ + // ... + series: { + // ... + type: 'custom', + renderItem: function(params, api) { + return { + type: 'group', + children: [ + { + type: 'circle', + name: 'my_el' + // ... + }, + { + // ... + } + ] + }; + }, + data: [[12, 33]] + } +}); +chart.on('mouseup', { element: 'my_el' }, function() { + // when data named 'my_el' triggered 'mouseup'. +}); +``` + +Puedes mostrar una ventana emergente, actualizar los gráficos utilizando los resultados de la consulta de tu base de datos por el nombre de los datos o el nombre de la serie en la función de retroalimentación. Aquí tienes un ejemplo: + +```js +myChart.on('click', function(parmas) { + $.get('detail?q=' + params.name, function(detail) { + myChart.setOption({ + series: [ + { + name: 'pie', + // using pie chart to show the data distribution in one column. + data: [detail.data] + } + ] + }); + }); +}); +``` + +## Evento de Interacción de Componentes + +Toda interacción de componentes en ECharts disparará un evento correspondiente. Los eventos normales y sus parámetros están listados en el documento de [events](${mainSitePath}/api.html#events) document. + +Aquí hay un ejemplo de escuchar un evento de leyenda: + +```js +// Show/hide the legend only trigger legendselectchanged event +myChart.on('legendselectchanged', function(params) { + // State if legend is selected. + var isSelected = params.selected[params.name]; + // print in the console. + console.log( + (isSelected ? 'Selected' : 'Not Selected') + 'legend' + params.name + ); + // print for all legends. + console.log(params.selected); +}); +``` + +## Escribir Código para Activar Acciones de Componentes Manualmente + +Puedes activar eventos como `'legendselectchanged'` no solo por el usuario sino también manualmente con código. Esto se puede usar para mostrar el tooltip, seleccionar la leyenda. + +En ECharts `myChart.dispatchAction({ type: '' })` se utiliza para activar el comportamiento. Esto maneja todas las acciones y puede registrar los comportamientos de manera conveniente. + + +Los comportamientos más comunes y sus parámetros correspondientes están listados en [action](${mainSitePath}/api.html#action). + +El siguiente ejemplo muestra cómo resaltar cada sector uno por uno en un gráfico de pastel usando `dispatchAction`. + +```js live +option = { + tooltip: { + trigger: 'item', + formatter: '{a}
{b} : {c} ({d}%)' + }, + legend: { + orient: 'vertical', + left: 'left', + data: [ + 'Direct Access', + 'Email Marketing', + 'Affiliate Ads', + 'Video Ads', + 'Search Engines' + ] + }, + series: [ + { + name: 'Access Source', + type: 'pie', + radius: '55%', + center: ['50%', '60%'], + data: [ + { value: 335, name: 'Direct Access' }, + { value: 310, name: 'Email Marketing' }, + { value: 234, name: 'Affiliate Ads' }, + { value: 135, name: 'Video Ads' }, + { value: 1548, name: 'Search Engines' } + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] +}; + +let currentIndex = -1; + +setInterval(function() { + var dataLen = option.series[0].data.length; + myChart.dispatchAction({ + type: 'downplay', + seriesIndex: 0, + dataIndex: currentIndex + }); + currentIndex = (currentIndex + 1) % dataLen; + myChart.dispatchAction({ + type: 'highlight', + seriesIndex: 0, + dataIndex: currentIndex + }); + myChart.dispatchAction({ + type: 'showTip', + seriesIndex: 0, + dataIndex: currentIndex + }); +}, 1000); +``` + +## Escuchar Eventos en el Área Vacía + +A veces los desarrolladores necesitan escuchar los eventos que se disparan desde el área vacía del lienzo. Por ejemplo, es necesario restablecer el gráfico cuando los usuarios hacen clic en el área vacía. + +Antes de hablar sobre esta función, necesitamos aclarar dos tipos de eventos: eventos zrender y eventos echarts. + +```js +myChart.getZr().on('click', function(event) { + // This listener is listening to a `zrender event`. +}); +myChart.on('click', function(event) { + // This listener is listening to a `echarts event`. +}); +``` + +Los eventos de zrender son diferentes de los eventos de echarts. Los primeros se activan cuando el ratón/puntero está en cualquier lugar, mientras que los segundos solo se activan cuando el ratón/puntero está sobre los elementos gráficos. De hecho, los eventos de echarts se implementan basándose en los eventos de zrender, es decir, cuando un evento de zrender se activa sobre un elemento gráfico, echarts activará un evento de echarts. + +Teniendo en cuenta los eventos de zrender, podemos implementar la escucha de eventos desde el área en blanco de la siguiente manera: + +```js +myChart.getZr().on('click', function(event) { + // No "target" means that mouse/pointer is not on + // any of the graphic elements, which is "blank". + if (!event.target) { + // Click on blank. Do something. + } +}); +``` diff --git a/contents/es/concepts/legend.md b/contents/es/concepts/legend.md new file mode 100644 index 000000000..34a643c0f --- /dev/null +++ b/contents/es/concepts/legend.md @@ -0,0 +1,143 @@ +# Leyenda + +Las leyendas se utilizan para anotar el contenido del gráfico utilizando diferentes colores, formas y textos para indicar distintas categorías. Al hacer clic en las leyendas, el usuario puede mostrar u ocultar las categorías correspondientes. La leyenda es clave para entender el gráfico. + +## Diseño + +La leyenda siempre se coloca en la esquina superior derecha del gráfico. Todas las leyendas en la misma página deben ser consistentes, alineándose horizontal o verticalmente según el diseño general del espacio del gráfico. Cuando el gráfico tiene poco espacio vertical o el área de contenido está congestionada, también es una buena opción colocar la leyenda en la parte inferior del gráfico. A continuación se muestran algunos diseños de leyenda: + +```js live +option = { + legend: { + // Try 'horizontal' + orient: 'vertical', + right: 10, + top: 'center' + }, + dataset: { + source: [ + ['product', '2015', '2016', '2017'], + ['Matcha Latte', 43.3, 85.8, 93.7], + ['Milk Tea', 83.1, 73.4, 55.1], + ['Cheese Cocoa', 86.4, 65.2, 82.5], + ['Walnut Brownie', 72.4, 53.9, 39.1] + ] + }, + xAxis: { type: 'category' }, + yAxis: {}, + series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }] +}; +``` +Usa un control desplazable si hay muchas leyendas. + + +```js +option = { + legend: { + type: 'scroll', + orient: 'vertical', + right: 10, + top: 20, + bottom: 20, + data: ['Legend A', 'Legend B', 'Legend C' /* ... */, , 'Legend x'] + // ... + } + // ... +}; +``` + +## Estilo + +Para fondos de color oscuro, utiliza un color claro para la capa de fondo y el texto mientras cambias el fondo a translúcido. + +```js +option = { + legend: { + data: ['Legend A', 'Legend B', 'Legend C'], + backgroundColor: '#ccc', + textStyle: { + color: '#ccc' + // ... + } + // ... + } + // ... +}; +``` + +El color de la leyenda tiene muchas formas de diseñarse. Para diferentes gráficos, el estilo de la leyenda puede ser distinto. + + + +```js +option = { + legend: { + data: ['Legend A', 'Legend B', 'Legend C'], + icon: 'rect' + // ... + } + // ... +}; +``` + +## Interactivo + +Dependiendo de la demanda ambiental, la leyenda puede soportar operaciones interactivas. Haz clic en la leyenda para mostrar u ocultar las categorías correspondientes: + +```js +option = { + legend: { + data: ['Legend A', 'Legend B', 'Legend C'], + selected: { + 'Legend A': true, + 'Legend B': true, + 'Legend C': false + } + // ... + } + // ... +}; +``` + +## Consejos + +La leyenda debe utilizarse según la situación. Algunos gráficos de doble eje incluyen varios tipos de gráficos. Los diferentes tipos de leyenda deben distinguirse. + +```js +option = { + legend: { + data: [ + { + name: 'Legend A', + icon: 'rect' + }, + { + name: 'Legend B', + icon: 'circle' + }, + { + name: 'Legend C', + icon: 'pin' + } + ] + // ... + }, + series: [ + { + name: 'Legend A' + // ... + }, + { + name: 'Legend B' + // ... + }, + { + name: 'Legend C' + // ... + } + ] + // ... +}; +``` + +Cuando hay solo un tipo de dato en el gráfico, usa el título del gráfico en lugar de la leyenda para explicarlo. diff --git a/contents/es/concepts/options.md b/contents/es/concepts/options.md new file mode 100644 index 000000000..e69de29bb diff --git a/contents/es/concepts/series.md b/contents/es/concepts/series.md new file mode 100644 index 000000000..e69de29bb diff --git a/contents/es/concepts/style.md b/contents/es/concepts/style.md new file mode 100644 index 000000000..cc6ad0c3f --- /dev/null +++ b/contents/es/concepts/style.md @@ -0,0 +1,356 @@ +# Resumen de la Personalización de Estilos + +Este artículo ofrece un resumen de los diferentes enfoques sobre la personalización de estilos en Apache EChartsTM. Por ejemplo, cómo configurar el color, tamaño, sombra de los elementos gráficos y etiquetas. + +> El término "estilo" puede no seguir la convención de la visualización de datos, pero lo usamos en este artículo porque es popular y fácil de entender. + +A continuación, se presentarán los enfoques. Las funcionalidades de estos pueden solaparse, pero son adecuados para diferentes escenarios. + +- Tema +- Paleta de Colores +- Personalizar estilo explícitamente (itemStyle, lineStyle, areaStyle, label, ...) +- Codificación visual (visualMap component) + +## Tema + +Establecer un tema es la forma más sencilla de cambiar el estilo de color. Por ejemplo, en la [Examples page](${mainSitePath}examples),podemos cambiar a modo oscuro y ver el resultado de un tema diferente. + +En nuestro proyecto, podemos cambiar a un tema oscuro de la siguiente manera: + +```js +var chart = echarts.init(dom, 'dark'); +``` + +Otros temas no están incluidos por defecto, y necesitamos cargarlos nosotros mismos si queremos utilizarlos. Los temas pueden ser visitados y descargados en el [theme builder](${mainSitePath}theme-builder.html). En él, también se pueden crear o editar temas. El tema descargado se puede usar de la siguiente manera: + +Si un tema se descarga como un archivo JSON, debemos registrarlo nosotros mismos, por ejemplo: + +```js +// Assume the theme name is "vintage". +fetch('theme/vintage.json') + .then(r => r.json()) + .then(theme => { + echarts.registerTheme('vintage', theme); + var chart = echarts.init(dom, 'vintage'); + }) +``` + +If a theme is downloaded as a JS file, it will auto register itself: + +```js +// Import the `vintage.js` file in HTML, then: +var chart = echarts.init(dom, 'vintage'); +// ... +``` + +## Paleta de Colores + +La paleta de colores puede proporcionarse en la opción. Estas proporcionan un grupo de colores, que serán seleccionados automáticamente por las series y los datos. Podemos dar una paleta global, o una paleta exclusiva para ciertas series. + +```js +option = { + // Global palette: + color: [ + '#c23531', + '#2f4554', + '#61a0a8', + '#d48265', + '#91c7ae', + '#749f83', + '#ca8622', + '#bda29a', + '#6e7074', + '#546570', + '#c4ccd3' + ], + + series: [ + { + type: 'bar', + // A palette only work for the series: + color: [ + '#dd6b66', + '#759aa0', + '#e69d87', + '#8dc1a9', + '#ea7e53', + '#eedd78', + '#73a373', + '#73b9bc', + '#7289ab', + '#91ca8c', + '#f49f42' + ] + // ... + }, + { + type: 'pie', + // A palette only work for the series: + color: [ + '#37A2DA', + '#32C5E9', + '#67E0E3', + '#9FE6B8', + '#FFDB5C', + '#ff9f7f', + '#fb7293', + '#E062AE', + '#E690D1', + '#e7bcf3', + '#9d96f5', + '#8378EA', + '#96BFFF' + ] + // ... + } + ] +}; +``` + +## Personalizar Estilo de Forma Explícita + +Es una forma común de establecer estilos de manera explícita. A lo largo de la [option](${optionPath}), de ECharts, se pueden configurar opciones relacionadas con el estilo en varios lugares, incluyendo [itemStyle](${optionPath}series.itemStyle), [lineStyle](${optionPath}series-line.lineStyle), [areaStyle](${optionPath}series-line.areaStyle), [label](${optionPath}series.label), etc. + +En términos generales, todos los componentes y series incorporados siguen la convención de nombres como `itemStyle`, `lineStyle`, `areaStyle`, `label` etc, aunque pueden aparecer en diferentes lugares según la serie o componente. + +En el siguiente código, añadimos sombra y degradado a un gráfico de burbujas. + +```js live +var data = [ + [ + [28604, 77, 17096869, 'Australia', 1990], + [31163, 77.4, 27662440, 'Canada', 1990], + [1516, 68, 1154605773, 'China', 1990], + [13670, 74.7, 10582082, 'Cuba', 1990], + [28599, 75, 4986705, 'Finland', 1990], + [29476, 77.1, 56943299, 'France', 1990], + [31476, 75.4, 78958237, 'Germany', 1990], + [28666, 78.1, 254830, 'Iceland', 1990], + [1777, 57.7, 870601776, 'India', 1990], + [29550, 79.1, 122249285, 'Japan', 1990], + [2076, 67.9, 20194354, 'North Korea', 1990], + [12087, 72, 42972254, 'South Korea', 1990], + [24021, 75.4, 3397534, 'New Zealand', 1990], + [43296, 76.8, 4240375, 'Norway', 1990], + [10088, 70.8, 38195258, 'Poland', 1990], + [19349, 69.6, 147568552, 'Russia', 1990], + [10670, 67.3, 53994605, 'Turkey', 1990], + [26424, 75.7, 57110117, 'United Kingdom', 1990], + [37062, 75.4, 252847810, 'United States', 1990] + ], + [ + [44056, 81.8, 23968973, 'Australia', 2015], + [43294, 81.7, 35939927, 'Canada', 2015], + [13334, 76.9, 1376048943, 'China', 2015], + [21291, 78.5, 11389562, 'Cuba', 2015], + [38923, 80.8, 5503457, 'Finland', 2015], + [37599, 81.9, 64395345, 'France', 2015], + [44053, 81.1, 80688545, 'Germany', 2015], + [42182, 82.8, 329425, 'Iceland', 2015], + [5903, 66.8, 1311050527, 'India', 2015], + [36162, 83.5, 126573481, 'Japan', 2015], + [1390, 71.4, 25155317, 'North Korea', 2015], + [34644, 80.7, 50293439, 'South Korea', 2015], + [34186, 80.6, 4528526, 'New Zealand', 2015], + [64304, 81.6, 5210967, 'Norway', 2015], + [24787, 77.3, 38611794, 'Poland', 2015], + [23038, 73.13, 143456918, 'Russia', 2015], + [19360, 76.5, 78665830, 'Turkey', 2015], + [38225, 81.4, 64715810, 'United Kingdom', 2015], + [53354, 79.1, 321773631, 'United States', 2015] + ] +]; + +option = { + backgroundColor: { + type: 'radial', + x: 0.3, + y: 0.3, + r: 0.8, + colorStops: [ + { + offset: 0, + color: '#f7f8fa' + }, + { + offset: 1, + color: '#cdd0d5' + } + ] + }, + grid: { + left: 10, + containLabel: true, + bottom: 10, + top: 10, + right: 30 + }, + xAxis: { + splitLine: { + show: false + } + }, + yAxis: { + splitLine: { + show: false + }, + scale: true + }, + series: [ + { + name: '1990', + data: data[0], + type: 'scatter', + symbolSize: function(data) { + return Math.sqrt(data[2]) / 5e2; + }, + emphasis: { + focus: 'series', + label: { + show: true, + formatter: function(param) { + return param.data[3]; + }, + position: 'top' + } + }, + itemStyle: { + shadowBlur: 10, + shadowColor: 'rgba(120, 36, 50, 0.5)', + shadowOffsetY: 5, + color: { + type: 'radial', + x: 0.4, + y: 0.3, + r: 1, + colorStops: [ + { + offset: 0, + color: 'rgb(251, 118, 123)' + }, + { + offset: 1, + color: 'rgb(204, 46, 72)' + } + ] + } + } + }, + { + name: '2015', + data: data[1], + type: 'scatter', + symbolSize: function(data) { + return Math.sqrt(data[2]) / 5e2; + }, + emphasis: { + focus: 'series', + label: { + show: true, + formatter: function(param) { + return param.data[3]; + }, + position: 'top' + } + }, + itemStyle: { + shadowBlur: 10, + shadowColor: 'rgba(25, 100, 150, 0.5)', + shadowOffsetY: 5, + color: { + type: 'radial', + x: 0.4, + y: 0.3, + r: 1, + colorStops: [ + { + offset: 0, + color: 'rgb(129, 227, 238)' + }, + { + offset: 1, + color: 'rgb(25, 183, 207)' + } + ] + } + } + } + ] +}; +``` + +## Estado de Estilo de Énfasis + +Cuando el mouse pasa por encima de un elemento gráfico, generalmente se mostrará el estilo de énfasis. Por defecto, el estilo de énfasis se genera automáticamente a partir del estilo normal. Sin embargo, se puede especificar mediante la propiedad [emphasis](${optionPath}series-bar.emphasis) Las opciones en [emphasis](${optionPath}series-bar.emphasis) son las mismas que las del estado normal, por ejemplo: + +```js +option = { + series: { + type: 'scatter', + + // Styles for normal state. + itemStyle: { + // Color of the point. + color: 'red' + }, + label: { + show: true, + // Text of labels. + formatter: 'This is a normal label.' + }, + + // Styles for emphasis state. + emphasis: { + itemStyle: { + // Color in emphasis state. + color: 'blue' + }, + label: { + show: true, + // Text in emphasis. + formatter: 'This is a emphasis label.' + } + } + } +}; +``` + +Nota: Antes de ECharts4, el estilo de énfasis debía escribirse de la siguiente manera: + +```js +option = { + series: { + type: 'scatter', + + itemStyle: { + // Styles for normal state. + normal: { + color: 'red' + }, + // Styles for emphasis state. + emphasis: { + color: 'blue' + } + }, + + label: { + // Styles for normal state. + normal: { + show: true, + formatter: 'This is a normal label.' + }, + // Styles for emphasis state. + emphasis: { + show: true, + formatter: 'This is a emphasis label.' + } + } + } +}; +``` + +El formato de opción sigue siendo **compatible**, pero no se recomienda. De hecho, en la mayoría de los casos, los usuarios solo configuran el estilo normal y utilizan el estilo de énfasis predeterminado. Por lo tanto, desde ECharts4, se admite escribir el estilo sin el término "normal", lo que hace que la opción sea más simple y ordenada. + +## Codificación Visual mediante el Componente visualMap + +El [visualMap component](${optionPath}visualMap) permite configurar la regla que mapea un valor a un canal visual (color, tamaño, ...). Puedes encontrar más detalles en [Visual Map of Data](${lang}/concepts/visual-map/). diff --git a/contents/es/concepts/tooltip.md b/contents/es/concepts/tooltip.md new file mode 100644 index 000000000..e69de29bb diff --git a/contents/es/concepts/visual-map.md b/contents/es/concepts/visual-map.md new file mode 100644 index 000000000..888326fe7 --- /dev/null +++ b/contents/es/concepts/visual-map.md @@ -0,0 +1,137 @@ +# Mapa Visual de Datos + +La visualización de datos es un proceso de mapeo de datos en elementos visuales. Este procedimiento también puede llamarse codificación visual, y los elementos visuales también pueden llamarse canales visuales. + +Cada tipo de gráfico en Apache EChartsTM tiene este procedimiento de mapeo incorporado. Por ejemplo, el gráfico de líneas mapea los datos en líneas, el gráfico de barras mapea los datos en altura. Algunos gráficos más complicados, como `graph`, `themeRiver`, y `treemap` , tienen su propio mapeo incorporado. + +Además, ECharts proporciona el [visualMap component](${optionPath}visualMap) para mapeo visual general. Los elementos visuales permitidos en el componente `visualMap` son: + +- `symbol`, `symbolSize` +- `color`, `opacity`, `colorAlpha`, +- `colorLightness`, `colorSaturation`, `colorHue` + +A continuación, vamos a presentar cómo usar el componente `visualMap`. + +## Datos y Dimensiones + +Los datos suelen almacenarse en [series.data](${optionPath}series.data) en ECharts. Dependiendo del tipo de gráfico, como lista, árbol, gráfico, etc., la forma de los datos puede variar. Pero tienen una característica común: son una colección de elementos de datos. Cada elemento de datos contiene un valor de datos y otra información si es necesario. Cada valor de datos puede ser un valor único (una dimensión) o un arreglo (varias dimensiones). + +Por ejemplo, [series.data](${optionPath}series.data) es la forma más común, que es una `list`, un arreglo común: + +```js +series: { + data: [ + { + // every item here is a dataItem + value: 2323, // this is data value + itemStyle: {} + }, + 1212, // it can also be a value of dataItem, which is a more common case + 2323, // every data value here is one dimension + 4343, + 3434 + ]; +} +``` + +```js +series: { + data: [ + { + // every item here is a dataItem + value: [3434, 129, 'San Marino'], // this is data value + itemStyle: {} + }, + [1212, 5454, 'Vatican'], // it can also be a value of dataItem, which is a more common case + [2323, 3223, 'Nauru'], // every data value here is three dimension + [4343, 23, 'Tuvalu'] // If is scatter chart, usually map the first dimension to x axis, + // the second dimension to y axis, + // and the third dimension to symbolSize + ]; +} +``` + +Normalmente, las primeras una o dos dimensiones se utilizan para el mapeo. Por ejemplo, mapear la primera dimensión al eje x, y la segunda dimensión al eje y. Si deseas representar más dimensiones,`visualMap` es lo que necesitas. Es probable que los [scatter charts](${optionPath}series-scatter) usen el radio para representar la tercera dimensión. + +## El Componente visualMap + +El componente visualMap define el mapeo de qué dimensión de los datos a qué elementos visuales. + + +Los siguientes dos tipos de componentes visualMap están soportados, identificados con[visualMap.type](${optionPath}visualMap.type). + +Su estructura se define de la siguiente manera: + +```js +option = { + visualMap: [ + // can define multiple visualMap components at the same time + { + // the first visualMap component + type: 'continuous' // defined as continuous visualMap + // ... + }, + { + // the second visualMap component + type: 'piecewise' // defined as discrete visualMap + // ... + } + ] + // ... +}; +``` + +## Componentes de Mapeo Visual Continuo y Discreto + +El componente de mapeo visual de ECharts se divide en continuo +([visualMapContinuous](${optionPath}visualMap-continuous)) y discreto ([visualMapPiecewise](${optionPath}visualMap-piecewise)). + +Continuo significa que la dimensión de los datos para el mapeo visual es un valor continuo, mientras que discreto significa que los datos se dividen en múltiples segmentos o datos discretos. + +### Mapeo Visual Continuo + +El mapeo visual de tipo continuo puede determinar el rango del mapeo visual especificando los valores máximos y mínimos. + +```js +option = { + visualMap: [ + { + type: 'continuous', + min: 0, + max: 5000, + dimension: 3, // the fourth dimension of series.data (i.e. value[3]) is mapped + seriesIndex: 4, // The fourth series is mapped. + inRange: { + // The visual configuration in the selected range + color: ['blue', '#121122', 'red'], // A list of colors that defines the graph color mapping + // the minimum value of the data is mapped to 'blue', and + // the maximum value is mapped to 'red', // the maximum value is mapped to 'red', // the maximum value is mapped to 'red'. + // The rest is automatically calculated linearly. + symbolSize: [30, 100] // Defines the mapping range for the graphic size. + // The minimum value of the data is mapped to 30, // and the maximum value is mapped to 100. + // The maximum value is mapped to 100. + // The rest is calculated linearly automatically. + }, + outOfRange: { + // Check the out of range visual configuration + symbolSize: [30, 100] + } + } + // ... + ] +}; +``` + +donde [visualMap.inRange](${optionPath}visualMap.inRange) indica el estilo utilizado para los datos dentro del rango de mapeo de datos; mientras que [visualMap.outOfRange](${optionPath}visualMap.outOfRange) especifica el estilo para los datos fuera del rango de mapeo. + +[visualMap.dimension](~visualMap.dimension) especifica qué dimensión de los datos será mapeada visualmente. + +### Mapeo Visual por Segmentos + +El componente de mapeo visual por segmentos tiene tres modos. + +- Segmentación promedio de datos continuos: basada en [visualMap-piecewise.splitNumber](${optionPath}visualMap-piecewise.splitNumber) para dividir automáticamente los datos en partes iguales. +- Segmentación personalizada de datos continuos: define el rango de cada parte basado en [visualMap-piecewise.pieces](${optionPath}visualMap-piecewise.pieces). +- Datos discretos (datos categóricos): las categorías se definen en [visualMap-piecewise.categories](${optionPath}visualMap-piecewise.categories). + +Para utilizar un mapa visual segmentado, debes configurar `type` a `'piecewise'` y elegir uno de los tres elementos de configuración mencionados. diff --git a/contents/es/get-started.md b/contents/es/get-started.md new file mode 100644 index 000000000..67f1e265b --- /dev/null +++ b/contents/es/get-started.md @@ -0,0 +1,91 @@ +# Empezando + +## Obtener Apache Echarts + +Apache Echarts soporta varios metodos de descarga, los cuales se explican +con mas detalles en el siguiente tutorial [Installation](${lang}/basics/download). +Aqui, tomamos el ejemplo de obtenerlo desde el CDN desde [jsDelivr](https://www.jsdelivr.com/package/npm/echarts) +y explicamos como instalarlo rapidamente. + +En [https://www.jsdelivr.com/package/npm/echarts](https://www.jsdelivr.com/package/npm/echarts) selecciona `dist/echarts.js`, haz click y guarda el archivo como `echarts.js` file. + +> Mas Informacion sobre estos archivos se puede encontrar en el siguiente tutorial [Installation](${lang}/basics/download). + +## Incluir Echarts + +Crea un nuevo archivo `index.html` en el directorio donde guardaste el archivo `echarts.js`, con el siguiente contenido: + +```html + + + + + + + + +``` + +Cuando abras este `index.html`, veras una pagina vacia. pero no te preocupes. Abre la consoloa y asegurate de que no se reporte ningun, mensaje de error, luego puedes proceder al siguiente paso. + +## Dibuja un grafico Simple + +Antes de Dibujar, necesitamos preparar un contenedor DOM para Echarts con una altura y un ancho definidos. Agregar el siguiente codigo despues de la etiqueta que introdujiste anteriormente. + +```html + + +
+ +``` + +Luego, puedes inicializar una instancia de Echarts con el metodo [echarts.init](${mainSitePath}api.html#echarts.init) y establecer la instancia de Echarts con el Metodo [setOption](${mainSitePath}api.html#echartsInstance.setOption) para generar un grafico de barras simple. Aqui tienes el codigo completo. + +```html + + + + + ECharts + + + + + +
+ + + +``` + +Y ahi esta tu primer grafico con Apache ECharts! + + diff --git a/contents/es/how-to/animation/transition.md b/contents/es/how-to/animation/transition.md new file mode 100644 index 000000000..a7a1733b8 --- /dev/null +++ b/contents/es/how-to/animation/transition.md @@ -0,0 +1,187 @@ +# Transición de Datos + + +Apache EChartsTM aplicará transiciones en la posición, escala y forma al agregar, actualizar y eliminar datos. Esto hace que el gráfico sea más suave y muestra mejor las relaciones entre los datos. A menudo, el desarrollador no necesita preocuparse por cómo usar las animaciones, sino que simplemente usa `setOption` para actualizar los datos, y ECharts encontrará la diferencia con los datos anteriores y aplicará automáticamente la animación de transición más adecuada. + +Por ejemplo, el siguiente ejemplo muestra la transición en una actualización programada de los datos de un gráfico circular. + +```js live {layout: 'lr'} +function makeRandomData() { + return [ + { + value: Math.random(), + name: 'A' + }, + { + value: Math.random(), + name: 'B' + }, + { + value: Math.random(), + name: 'C' + } + ]; +} +option = { + series: [ + { + type: 'pie', + radius: [0, '50%'], + data: makeRandomData() + } + ] +}; + +setInterval(() => { + myChart.setOption({ + series: { + data: makeRandomData() + } + }); +}, 2000); +``` + +## Configuración de Transiciones + + +Debido a que agregar y actualizar datos generalmente requiere animaciones diferentes, por ejemplo, esperamos que la animación de actualización sea más corta, ECharts distingue entre dos configuraciones de animación. + +- Para agregar datos, aplicamos una animación de entrada, utilizando +`animationDuration`, `animationEasing`, y `animationDelay` para configurar la duración, el tipo de transición y el retraso de la animación, respectivamente. + +- Para actualizar datos, aplicamos una animación de actualización con `animationDurationUpdate`, `animationEasingUpdate`, y `animationDelayUpdate` para configurar la duración, el tipo de transición y el retraso de la animación, respectivamente. + + +Como se puede ver, la configuración de la animación de actualización es la configuración de la animación de entrada con el sufijo `Update`. + +> ECada vez que se usa setOption en ECharts, se realiza una comparación entre los datos actuales y los datos actualizados por última vez, y se ejecutan tres estados para los datos según el resultado de la comparación: agregar, actualizar y eliminar. Esta comparación se basa en el `name` de los datos. Por ejemplo, si la última actualización tenía tres `names` de `'A'`, `'B'`, `'C'`, y la nueva actualización tiene `'B'`, `'C'`, `'D'`, entonces los datos `'B'`, `'C'` se actualizarán, los datos `'A'` se eliminarán y los datos `' D'` se agregarán. Si es la primera vez que se usa `setOption`, como no hay datos anteriores, todos los datos se agregarán. Dependiendo de estos tres estados, ECharts aplicará las animaciones de entrada, actualización y salida respectivamente. + +Todas estas configuraciones pueden establecerse a nivel superior de `option` para todos los series y componentes, o por separado para cada serie. + +Si queremos desactivar las animaciones, simplemente podemos establecer `option.animation` a `false`. + +### Duración de la Animación + +`animationDuration` y `animationDurationUpdate` se usan para configurar la duración de la animación en milisegundos `ms`. Establecer una duración de animación más larga permite que el usuario vea más claramente el efecto de la animación de transición, pero también debemos tener cuidado, ya que un tiempo demasiado largo puede hacer que el usuario pierda la paciencia mientras espera que la animación termine. + +Un valor de `0` desactivará la animación, y esto se puede lograr estableciendo la configuración correspondiente en `0` individualmente cuando solo queramos desactivar la animación de entrada o de actualización. + +### Función de Transición de la Animación + +`animationEasing` y `animationEasingUpdate` se utilizan para configurar la función de suavizado de la animación, que es una función que toma el tiempo de la animación como entrada y genera el progreso de la animación. + +```ts +(t: number) => number; +``` + +Las funciones de suavizado comunes como `'cubicIn'` and `'cubicOut'` están integradas en ECharts y se pueden usar directamente. + +Funciones de suavizado integradas. + + + +### Retraso de la Animación + +`animationDelay` y `animationDelayUpdate` se usan para configurar el momento en que comienza el retraso de la animación. Normalmente utilizamos una función de devolución de llamada para establecer diferentes retrasos para diferentes datos y lograr el efecto de animaciones escalonadas: + +```ts live { layout: 'lr' } +var xAxisData = []; +var data1 = []; +var data2 = []; +for (var i = 0; i < 100; i++) { + xAxisData.push('A' + i); + data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5); + data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5); +} +option = { + legend: { + data: ['bar', 'bar2'] + }, + xAxis: { + data: xAxisData, + splitLine: { + show: false + } + }, + yAxis: {}, + series: [ + { + name: 'bar', + type: 'bar', + data: data1, + emphasis: { + focus: 'series' + }, + animationDelay: function(idx) { + return idx * 10; + } + }, + { + name: 'bar2', + type: 'bar', + data: data2, + emphasis: { + focus: 'series' + }, + animationDelay: function(idx) { + return idx * 10 + 100; + } + } + ], + animationEasing: 'elasticOut', + animationDelayUpdate: function(idx) { + return idx * 5; + } +}; +``` + +## Optimización del Rendimiento de las Animaciones + +Cuando la cantidad de datos es particularmente grande, ejecutar animaciones puede generar problemas de rendimiento, por lo que podemos establecer `animation: false` para desactivar la animación. + +Para gráficos donde la cantidad de datos cambia dinámicamente, se recomienda usar la configuración `animationThreshold` que permite a ECharts desactivar automáticamente la animación cuando el número de gráficos en el lienzo supera este umbral para mejorar el rendimiento del dibujo. Este es un valor empírico, y ECharts generalmente es capaz de renderizar miles de gráficos en tiempo real (el valor predeterminado también se establece en 2000), pero si tus gráficos son complejos, o tu entorno de usuario es muy exigente y hay mucho otro código complejo ejecutándose en la página al mismo tiempo, puede ser apropiado ajustar este valor hacia abajo para garantizar la suavidad de toda la aplicación. + +## Escuchar el Fin de la Animación + +A veces queremos obtener el resultado del renderizado actual, si no se utiliza animación, ECharts realizará el renderizado directamente después de `setOption` y podemos usar el método `getDataURL` para obtener el resultado de manera sincrónica. + +```ts +const chart = echarts.init(dom); +chart.setOption({ + animation: false + //... +}); +// can be executed directly and synchronously +const dataUrl = chart.getDataURL(); +``` + +Pero si el gráfico está animado, ejecutar `getDataURL`de inmediato nos dará la imagen al comienzo de la animación, no el resultado final. Así que necesitamos saber cuándo ha terminado la animación y luego ejecutar `getDataURL` para obtener el resultado. + +Si estás seguro de la duración de la animación, una manera más simple y drástica es retrasar la ejecución con `setTimeout` según la duración de la animación: + +```ts +chart.setOption({ + animationDuration: 1000 + //... +}); +setTimeout(() => { + const dataUrl = chart.getDataURL(); +}, 1000); +``` + +Alternativamente, podemos usar el evento `rendered` proporcionado por ECharts para determinar que ECharts ha terminado de animar y ha detenido el renderizado: + +```ts +chart.setOption({ + animationDuration: 1000 + //... +}); + +function onRendered() { + const dataUrl = chart.getDataURL(); + // ... + // This event will also be triggered if there is a subsequent interaction and the interaction is redrawn, so it needs to be removed when you're done using it + chart.off('rendered', onRendered); +} +chart.on('rendered', onRendered); +``` diff --git a/contents/es/how-to/chart-types/bar/bar-race.md b/contents/es/how-to/chart-types/bar/bar-race.md new file mode 100755 index 000000000..00b8f7f23 --- /dev/null +++ b/contents/es/how-to/chart-types/bar/bar-race.md @@ -0,0 +1,87 @@ +# Gráfico de Barras con Ordenamiento Dinámico + +## Opciones relacionadas + +El gráfico de barras de carrera es un gráfico que muestra los cambios en el ranking de los datos a lo largo del tiempo y está soportado por defecto desde ECharts 5. + +> Los gráficos de barras de carrera usualmente utilizan barras horizontales. Si deseas usar barras verticales, simplemente invierte los ejes X y Y en este tutorial. + +1. Establece `realtimeSort` de la serie de barras a `true` para habilitar el gráfico de barras de carrera. +2. Establece `yAxis.inverse` a `true` para mostrar las barras más largas en la parte superior. +3. Se sugiere establecer `yAxis.animationDuration` en `300` para la animación de reordenamiento de barras por primera vez. +4. Se sugiere establecer `yAxis.animationDurationUpdate` en `300` para la animación de reordenamiento de barras en tiempos posteriores. +5. Establece `yAxis.max` en n - 1_ donde n es el número de barras a mostrar; de lo contrario, se mostrarán todas las barras. +6. Se sugiere establecer `xAxis.max`en `'dataMax'` para que se utilice el valor máximo de los datos como el máximo en el eje X. +7. Si se requiere cambio en las etiquetas en tiempo real, establece `series.label.valueAnimation` a `true` +8. Establece `animationDuration` a `0` para que la primera animación no empiece desde 0; si deseas lo contrario, ponlo al mismo valor que `animationDurationUpdate`. +9. Se sugiere establecer `animationDurationUpdate` en `3000` para la duración de la animación de actualización, la cual debe ser igual a la frecuencia de llamada de +duration, which should be the same as the frequency of calling `setOption` +10. Llama `setOption` para actualizar los datos con el siguiente valor en el tiempo usando `setInterval` a la frecuencia de `animationDurationUpdate` + +## Demo + +Un demo completo: + +js +Copy code + + +```js live +var data = []; +for (let i = 0; i < 5; ++i) { + data.push(Math.round(Math.random() * 200)); +} + +option = { + xAxis: { + max: 'dataMax' + }, + yAxis: { + type: 'category', + data: ['A', 'B', 'C', 'D', 'E'], + inverse: true, + animationDuration: 300, + animationDurationUpdate: 300, + max: 2 // only the largest 3 bars will be displayed + }, + series: [ + { + realtimeSort: true, + name: 'X', + type: 'bar', + data: data, + label: { + show: true, + position: 'right', + valueAnimation: true + } + } + ], + legend: { + show: true + }, + animationDuration: 0, + animationDurationUpdate: 3000, + animationEasing: 'linear', + animationEasingUpdate: 'linear' +}; + +function run() { + var data = option.series[0].data; + for (var i = 0; i < data.length; ++i) { + if (Math.random() > 0.9) { + data[i] += Math.round(Math.random() * 2000); + } else { + data[i] += Math.round(Math.random() * 200); + } + } + myChart.setOption(option); +} + +setTimeout(function() { + run(); +}, 0); +setInterval(function() { + run(); +}, 3000); +``` diff --git a/contents/es/how-to/chart-types/bar/basic-bar.md b/contents/es/how-to/chart-types/bar/basic-bar.md new file mode 100755 index 000000000..7df5f7338 --- /dev/null +++ b/contents/es/how-to/chart-types/bar/basic-bar.md @@ -0,0 +1,185 @@ +# Gráfico de Barras Básico + +El gráfico de barras es un gráfico que presenta comparaciones entre datos discretos. La longitud de las barras está proporcionalmente relacionada con los datos categóricos. + +Para configurar el gráfico de barras, necesitas establecer el type de `type` of `series` como `'bar'`. + +[[Option]](${optionPath}series-bar) + +## Ejemplo Simple + +Comencemos con un gráfico de barras básico: + +```js live +option = { + xAxis: { + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + }, + yAxis: {}, + series: [ + { + type: 'bar', + data: [23, 24, 18, 25, 27, 28, 25] + } + ] +}; +``` + +En este caso, el eje x es de tipo categoría. Por lo tanto, debes definir algunos valores correspondientes para `'xAxis'`. Mientras tanto, el tipo de datos del eje y es numérico. El rango del eje y se generará automáticamente a partir de la `data` en `'series'`. + +## Gráfico de Barras con Múltiples Series + +Puedes usar varias series para representar un grupo de datos relacionados. Para mostrar múltiples series en el mismo gráfico, necesitas agregar un arreglo más bajo la propiedad `series`. + +```js live +option = { + xAxis: { + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + }, + yAxis: {}, + series: [ + { + type: 'bar', + data: [23, 24, 18, 25, 27, 28, 25] + }, + { + type: 'bar', + data: [26, 24, 18, 22, 23, 20, 27] + } + ] +}; +``` + +## Gráfico de Barras Personalizado + +### Estilos + +Es una buena idea instalar el estilo del gráfico de barras utilizando ['series.itemStyle'](${optionPath}series-bar.itemStyle). Descripción del SCI:: + +- Color de la columna(`'color'`); +- Color del borde(`'borderColor'`), ancho(`'borderWidth'`), tipo(`'borderType'`) de la columna; +- Radio de borde de la columna (`'barBorderRadius'`); +- Transparencia(`'opacity'`); +- Tipo de sombra(`'shadowBlur'`, `'shadowColor'`, `'shadowOffsetX'`, `'shadowOffsetY'`) + +Aquí tienes un ejemplo: + + +```js live +option = { + xAxis: { + data: ['A', 'B', 'C', 'D', 'E'] + }, + yAxis: {}, + series: [ + { + type: 'bar', + data: [ + 10, + 22, + 28, + { + value: 43, + // Specify the style for single bar + itemStyle: { + color: '#91cc75', + shadowColor: '#91cc75', + borderType: 'dashed', + opacity: 0.5 + } + }, + 49 + ], + itemStyle: { + barBorderRadius: 5, + borderWidth: 1, + borderType: 'solid', + borderColor: '#73c0de', + shadowColor: '#5470c6', + shadowBlur: 3 + } + } + ] +}; +``` + +En este caso, definimos el estilo del gráfico de barras usando `'itemStyle'` de la correspondiente `series`. Para obtener más detalles sobre los elementos de configuración y su uso, consulta el manual de configuración: [`series.itemStyle`](${optionPath}series-bar.itemStyle)。 + +### Ancho y Alto de la Columna + +Puedes usar [`barWidth`](${optionPath}#series-bar.barWidth) para cambiar el ancho de la barra. Por ejemplo, en el siguiente caso `'barWidth'` se establece en `'20%'`. Esto indica que el ancho de cada barra es el 20% del ancho de la categoría. Como hay 5 datos en cada serie, el 20% de `'barWidth'` significa el 4% del ancho total del eje x. + +```js live +option = { + xAxis: { + data: ['A', 'B', 'C', 'D', 'E'] + }, + yAxis: {}, + series: [ + { + type: 'bar', + data: [10, 22, 28, 43, 49], + barWidth: '20%' + } + ] +}; +``` + +Además, [`barMaxWidth`](${optionPath}series-bar.barMaxWidth) limita el ancho máximo de la barra. Para algunos valores pequeños, puedes declarar una altura mínima para la barra [`barMinHeight`](${optionPath}series-bar.barMinHeight). Cuando la altura correspondiente de los datos sea más pequeña que el límite, ECharts tomará 'barMinHeight' como la altura reemplazada. + +### Espaciado entre Columnas + +Hay dos tipos de espaciado entre columnas. Uno es el espaciado entre diferentes series bajo la misma categoría: [`barGap`](${optionPath}series-bar.barGap). El otro es el espaciado entre categorías: [`barCategoryGap`](${optionPath}series-bar.barCategoryGap). + +```js live +option = { + xAxis: { + data: ['A', 'B', 'C', 'D', 'E'] + }, + yAxis: {}, + series: [ + { + type: 'bar', + data: [23, 24, 18, 25, 18], + barGap: '20%', + barCategoryGap: '40%' + }, + { + type: 'bar', + data: [12, 14, 9, 9, 11] + } + ] +}; +``` + +En este caso, el `barGap` es `'20%'`. Esto significa que la distancia entre las barras de la misma categoría es el 20% del ancho de la barra. Por ejemplo, si establecemos el `barCategoryGap` en `'40%'`, el espacio en cada lado de la barra ocupará un 40% del espacio en las categorías (en comparación con el ancho de la columna). + +Generalmente, no es necesario especificar `barWidth` si se configuran `'barGap'` y `barCategoryGap` Si necesitas asegurarte de que la barra no sea demasiado ancha mientras el gráfico es grande, intenta usar `barMaxWidth` para limitar el ancho máximo de las barras. + +> En el mismo sistema de coordenadas cartesianas, la propiedad será compartida por varias series de barras. Para asegurarte de que tenga efecto en el gráfico, establece la propiedad en la última serie de barras del sistema. + +### Agregar Color de Fondo a las Barras + +A veces, puede que quieras cambiar el color de fondo de las barras. Después de ECharts v4.7.0, esta función se puede habilitar mediante ['showBackground'](${optionPath}series-bar.showBackground) y configurar mediante ['backgroundStyle'](${optionPath}series-bar.backgroundStyle). + +```js live +option = { + xAxis: { + type: 'category', + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + }, + yAxis: { + type: 'value' + }, + series: [ + { + data: [120, 200, 150, 80, 70, 110, 130], + type: 'bar', + showBackground: true, + backgroundStyle: { + color: 'rgba(220, 220, 220, 0.8)' + } + } + ] +}; +``` diff --git a/contents/es/how-to/chart-types/bar/polar-bar.md b/contents/es/how-to/chart-types/bar/polar-bar.md new file mode 100755 index 000000000..cec1e999b --- /dev/null +++ b/contents/es/how-to/chart-types/bar/polar-bar.md @@ -0,0 +1,2 @@ +# Bar Chart in Polar Coordinate System + diff --git a/contents/es/how-to/chart-types/bar/stacked-bar.md b/contents/es/how-to/chart-types/bar/stacked-bar.md new file mode 100755 index 000000000..84d4430b3 --- /dev/null +++ b/contents/es/how-to/chart-types/bar/stacked-bar.md @@ -0,0 +1,32 @@ +# Gráfico de Barras Apiladas + +A veces, esperamos no solo analizar las series por separado, sino también la tendencia de la suma. Una buena opción para implementarlo es usando el gráfico de barras apiladas. Como su nombre indica, en el gráfico de barras apiladas, los datos de la misma categoría se apilan en una sola columna. La altura total de la barra explica el cambio total. + +Hay una forma sencilla de implementar un gráfico de barras apiladas con ECharts. Solo necesitas establecer el mismo valor de tipo cadena para un grupo de series en `stack`. Las series con el mismo valor de `stack` rán en la misma categoría. + +```js live +option = { + xAxis: { + data: ['A', 'B', 'C', 'D', 'E'] + }, + yAxis: {}, + series: [ + { + data: [10, 22, 28, 43, 49], + type: 'bar', + stack: 'x' + }, + { + data: [5, 4, 3, 5, 10], + type: 'bar', + stack: 'x' + } + ] +}; +``` + +En este caso, la posición de la segunda serie se basa en la posición de la primera serie, y la altura aumentada corresponde a la altura de la primera serie. Por lo tanto, desde la posición de la segunda serie, puedes ver la tendencia del cambio de la suma de ambas. + +> El valor de `stack` explica qué series se apilarán juntas. Teóricamente, el valor específico de 'stack' no tiene un significado importante. Sin embargo, preferimos usar cadenas sugerentes para facilitar la lectura +> +> Por ejemplo, aquí hay un gráfico con 4 series que cuentan la cantidad de hombres y mujeres. "Hombre adulto" y "Niño" deben apilarse, mientras que "Mujer adulta" y "Niña" también deben apilarse. En este caso, el valor sugerido para `stack` is `'male'` y `'female'`. Aunque cadenas sin sentido como `'a'` y `'b'` pueden lograr el mismo efecto, el código tendrá una menor legibilidad. diff --git a/contents/es/how-to/chart-types/bar/waterfall.md b/contents/es/how-to/chart-types/bar/waterfall.md new file mode 100755 index 000000000..7d254df8c --- /dev/null +++ b/contents/es/how-to/chart-types/bar/waterfall.md @@ -0,0 +1,96 @@ +# Cascada + +No existe una serie de cascada en Apache ECharts, pero podemos simular el efecto utilizando un gráfico de barras apiladas. + +Suponiendo que los valores en el arreglo de datos representan un aumento o disminución con respecto al valor anterior. + +```js +var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203]; +``` + +That is, the first data is `900` and the second data `345` represents the addition of `345` to `900`, etc. When presenting this data as a stepped waterfall chart, we can use three series: the first is a non-interactive transparent series to implement the suspension bar effect, the second series is used to represent positive numbers, and the third series is used to represent negative numbers. + +```js live +var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203]; +var help = []; +var positive = []; +var negative = []; +for (var i = 0, sum = 0; i < data.length; ++i) { + if (data[i] >= 0) { + positive.push(data[i]); + negative.push('-'); + } else { + positive.push('-'); + negative.push(-data[i]); + } + + if (i === 0) { + help.push(0); + } else { + sum += data[i - 1]; + if (data[i] < 0) { + help.push(sum + data[i]); + } else { + help.push(sum); + } + } +} + +option = { + title: { + text: 'Waterfall' + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: { + type: 'category', + splitLine: { show: false }, + data: (function() { + var list = []; + for (var i = 1; i <= 11; i++) { + list.push('Oct/' + i); + } + return list; + })() + }, + yAxis: { + type: 'value' + }, + series: [ + { + type: 'bar', + stack: 'all', + itemStyle: { + normal: { + barBorderColor: 'rgba(0,0,0,0)', + color: 'rgba(0,0,0,0)' + }, + emphasis: { + barBorderColor: 'rgba(0,0,0,0)', + color: 'rgba(0,0,0,0)' + } + }, + data: help + }, + { + name: 'positive', + type: 'bar', + stack: 'all', + data: positive + }, + { + name: 'negative', + type: 'bar', + stack: 'all', + data: negative, + itemStyle: { + color: '#f33' + } + } + ] +}; +``` diff --git a/contents/es/how-to/chart-types/line/area-line.md b/contents/es/how-to/chart-types/line/area-line.md new file mode 100755 index 000000000..030f932e7 --- /dev/null +++ b/contents/es/how-to/chart-types/line/area-line.md @@ -0,0 +1,29 @@ +# Gráfico de Área + +El gráfico de área rellena el espacio entre la línea y el eje con el color de fondo, para expresar los datos según el tamaño del área. En comparación con el gráfico de líneas normal, el gráfico de área tiene efectos visuales más intuitivos. Es especialmente adecuado para escenarios con pocas series. + +```js live +option = { + xAxis: { + data: ['A', 'B', 'C', 'D', 'E'] + }, + yAxis: {}, + series: [ + { + data: [10, 22, 28, 23, 19], + type: 'line', + areaStyle: {} + }, + { + data: [25, 14, 23, 35, 10], + type: 'line', + areaStyle: { + color: '#ff0', + opacity: 0.5 + } + } + ] +}; +``` + +Si deseas cambiar el estilo del área en el gráfico de líneas, intenta usar[`areaStyle`](${optionPath}series-line.areaStyle). Establece `'areaStyle'` en `{}` para usar el tipo predeterminado: usa el color de la serie para rellenar el área de forma translúcida. Si deseas cambiar el estilo, intenta sobrescribir los elementos de configuración en`'areaStyle'`. Por ejemplo, el color de la segunda serie se cambió a amarillo con un 50% de opacidad. diff --git a/contents/es/how-to/chart-types/line/basic-line.md b/contents/es/how-to/chart-types/line/basic-line.md new file mode 100755 index 000000000..933ca22cd --- /dev/null +++ b/contents/es/how-to/chart-types/line/basic-line.md @@ -0,0 +1,133 @@ +# Gráfico de Línea Básico + +## Ejemplo Simple + +Podemos usar el siguiente código para construir un gráfico de líneas que tenga el eje x como `category`, y el eje y como `value`: + +```js live +option = { + xAxis: { + type: 'category', + data: ['A', 'B', 'C'] + }, + yAxis: { + type: 'value' + }, + series: [ + { + data: [120, 200, 150], + type: 'line' + } + ] +}; +``` + +En este caso, establecemos el tipo de eje como `category` y `value` en `xAxis` y `yAxis`. También especificamos el contenido del eje x a través de `data`. En `series`, establecemos el tipo como `line`, y especificamos los valores de tres puntos a través de `data`. De esta manera, obtenemos un gráfico de líneas simple. + +> El `type` aquí puede omitirse porque los valores predeterminados del eje son `value` mientras que el `xAxis` ya ha especificado los `data` de la categoría. En este caso, `ECharts` puede reconocer que este es un eje de categoría. + +## Gráfico de Línea en un Sistema de Coordenadas Cartesianas + +¿Cómo implementarlo si queremos que el gráfico de líneas sea continuo? La respuesta es simple, siempre que cada valor en `data` de la `series` esté representado por un arreglo que contenga dos elementos. + +```js live +option = { + xAxis: {}, + yAxis: {}, + series: [ + { + data: [ + [20, 120], + [50, 200], + [40, 50] + ], + type: 'line' + } + ] +}; +``` + +## Gráfico de Línea Personalizado + +### Estilo de Línea + +El estilo de la línea se puede cambiar mediante la configuración `lineStyle` Puedes especificar el color, el grosor de la línea, el tipo de polilínea y la opacidad, entre otros. Para más detalles, consulta el manual [`series.lineStyle`](${optionPath}series-line.lineStyle) para más información. + +Aquí hay un ejemplo de cómo establecer el color, el grosor de la línea y el tipo. + +```js live +option = { + xAxis: { + data: ['A', 'B', 'C', 'D', 'E'] + }, + yAxis: {}, + series: [ + { + data: [10, 22, 28, 23, 19], + type: 'line', + lineStyle: { + normal: { + color: 'green', + width: 4, + type: 'dashed' + } + } + } + ] +}; +``` + +Cuando configuramos el grosor de la línea aquí, el grosor de las líneas de los elementos no cambiará. El estilo de la línea de los elementos debe configurarse por separado. + +### Estilo del Elemento + +El estilo de los elementos se puede cambiar mediante [`series.itemStyle`](${optionPath}series-line.itemStyle).Incluye `color`, `borderColor`, `borderStyle`, `borderWidth`, `borderType`, `shadowColor`, `opacity`. Funciona de la misma manera que `lineType`, por lo que no entraremos en más detalles. + +## Mostrar Valores en los Elementos + +En la serie, la etiqueta del elemento está especificada por [`series.label`](${optionPath}series-line.label). Si cambiamos `show` bajo `label` a `true`, el valor se mostrará por defecto. De lo contrario, si [`series.emphasis.label.show`](${optionPath}series-line.emphasis.label.show) es `true`, la etiqueta solo se mostrará si el ratón pasa por encima del elemento. + +```js live +option = { + xAxis: { + data: ['A', 'B', 'C', 'D', 'E'] + }, + yAxis: {}, + series: [ + { + data: [10, 22, 28, 23, 19], + type: 'line', + label: { + show: true, + position: 'bottom', + textStyle: { + fontSize: 20 + } + } + } + ] +}; +``` + +## Datos Vacíos + +En una `series`, pueden existir datos vacíos. Esto tiene algunas diferencias con un valor de `0`. Mientras haya elementos vacíos, el gráfico de líneas ignorará ese punto sin pasarlo por él—los elementos vacíos no estarán conectados a los puntos siguientes. + +En ECharts, usamos `'-'` para representar datos nulos. Esto es aplicable para datos en otras series. + +```js live +option = { + xAxis: { + data: ['A', 'B', 'C', 'D', 'E'] + }, + yAxis: {}, + series: [ + { + data: [0, 22, '-', 23, 19], + type: 'line' + } + ] +}; +``` + +> Ten en cuenta la diferencia entre los datos vacíos y el valor 0. diff --git a/contents/es/how-to/chart-types/line/smooth-line.md b/contents/es/how-to/chart-types/line/smooth-line.md new file mode 100755 index 000000000..0e57bfd0a --- /dev/null +++ b/contents/es/how-to/chart-types/line/smooth-line.md @@ -0,0 +1,19 @@ +# Gráfico de Línea Suave + +El gráfico de línea suave es también una variante del gráfico de líneas básico. Es una mejor opción para lograr una experiencia visual más cómoda. Al usar ECharts, solo necesitas cambiar el valor de `smooth` a `true` para lograr este efecto. + +```js live +option = { + xAxis: { + data: ['A', 'B', 'C', 'D', 'E'] + }, + yAxis: {}, + series: [ + { + data: [10, 22, 28, 23, 19], + type: 'line', + smooth: true + } + ] +}; +``` diff --git a/contents/es/how-to/chart-types/line/stacked-line.md b/contents/es/how-to/chart-types/line/stacked-line.md new file mode 100755 index 000000000..e4b1e142a --- /dev/null +++ b/contents/es/how-to/chart-types/line/stacked-line.md @@ -0,0 +1,49 @@ +# Gráfico de Líneas Apiladas + +Similar al [Stacked Bar Chart](${lang}/how-to/chart-types/bar/stacked-bar), el Gráfico de Líneas Apiladas usa `'stack'` en `series` para decidir qué series deben apilarse juntas. + +```js live +option = { + xAxis: { + data: ['A', 'B', 'C', 'D', 'E'] + }, + yAxis: {}, + series: [ + { + data: [10, 22, 28, 43, 49], + type: 'line', + stack: 'x' + }, + { + data: [5, 4, 3, 5, 10], + type: 'line', + stack: 'x' + } + ] +}; +``` + +Sin embargo, sin una aclaración, es difícil juzgar si se trata de un gráfico de líneas apiladas o de un gráfico de líneas normal. Por lo tanto, se recomienda rellenar el área bajo la línea con color para indicar que se trata de un gráfico de líneas apiladas. + +```js live +option = { + xAxis: { + data: ['A', 'B', 'C', 'D', 'E'] + }, + yAxis: {}, + series: [ + { + data: [10, 22, 28, 43, 49], + type: 'line', + stack: 'x', + areaStyle: {} + }, + { + data: [5, 4, 3, 5, 10], + type: 'line', + stack: 'x', + areaStyle: {} + } + ] +}; +``` diff --git a/contents/es/how-to/chart-types/line/step-line.md b/contents/es/how-to/chart-types/line/step-line.md new file mode 100755 index 000000000..b4b1aa0a2 --- /dev/null +++ b/contents/es/how-to/chart-types/line/step-line.md @@ -0,0 +1,40 @@ +# Gráfico de Líneas Escalonadas + +El gráfico de líneas normal conecta dos puntos mediante una línea recta directamente, mientras que el gráfico de líneas escalonadas, también conocido como gráfico de onda cuadrada, utiliza solo líneas horizontales y verticales para conectar los puntos cercanos entre sí. En comparación con el gráfico de líneas normal, el gráfico de líneas escalonadas muestra de manera más destacada los cambios repentinos de los datos analizados. + +En ECharts, `step` se utiliza para caracterizar el tipo de conexión del gráfico de líneas escalonadas. Tiene tres valores disponibles: `'start'`, `'end'`, y `'middle'`. Para los elementos A y B, estos valores indican que el cambio abrupto ocurre en A, B o en el punto medio entre A y B. + +```js live +option = { + legend: {}, + xAxis: { + type: 'category', + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + }, + yAxis: { + type: 'value' + }, + series: [ + { + name: 'Step Start', + type: 'line', + step: 'start', + data: [120, 132, 101, 134, 90, 230, 210] + }, + { + name: 'Step Middle', + type: 'line', + step: 'middle', + data: [220, 282, 201, 234, 290, 430, 410] + }, + { + name: 'Step End', + type: 'line', + step: 'end', + data: [450, 432, 401, 454, 590, 530, 510] + } + ] +}; +``` + +> Enfócate en la diferencia de las líneas entre los tres tipos separados. diff --git a/contents/es/how-to/chart-types/pie/basic-pie.md b/contents/es/how-to/chart-types/pie/basic-pie.md new file mode 100755 index 000000000..58df4494a --- /dev/null +++ b/contents/es/how-to/chart-types/pie/basic-pie.md @@ -0,0 +1,117 @@ +# Gráfico de Pastel Básico + +Los gráficos de pastel se utilizan principalmente para mostrar la proporción de varias categorías en comparación con el total. Los radianes representan la proporción de cada categoría. + +## Ejemplo Simple + +La configuración del gráfico de pastel no es completamente la misma que la de los gráficos de líneas y de barras. No es necesario configurar el eje. El nombre y el valor de los datos deben definirse en la serie. Comencemos con un gráfico de pastel básico: + +```js live +option = { + series: [ + { + type: 'pie', + data: [ + { + value: 335, + name: 'Direct Visit' + }, + { + value: 234, + name: 'Union Ad' + }, + { + value: 1548, + name: 'Search Engine' + } + ] + } + ] +}; +``` + +Cabe mencionar que el `value` aquí no necesita ser un dato en porcentaje. ECharts distribuirá proporcionalmente sus radianes correspondientes en el gráfico de pastel según todos los datos. + +## Gráfico de Pastel Personalizado + +### Radio del Gráfico de Pastel + +El radio del gráfico de pastel puede definirse mediante [`series.radius`](${optionPath}series-pie.radius). Se pueden usar tanto cadenas de porcentaje(`'60%'`) como cadenas de píxeles absolutos (`'200'`).Cuando se usa una cadena de porcentaje, está relacionada proporcionalmente con el borde más corto del contenedor(`'div'`). + +```js live +option = { + series: [ + { + type: 'pie', + data: [ + { + value: 335, + name: 'Direct Visit' + }, + { + value: 234, + name: 'Union Ad' + }, + { + value: 1548, + name: 'Search Engine' + } + ], + radius: '50%' + } + ] +}; +``` + +## Ocultar el Gráfico Cuando la Suma de Datos es 0 + +Por defecto, si la suma de los datos es 0, la serie dividirá la forma de manera equitativa. Por ejemplo, si no deseas mostrar ninguna forma cuando todas las 4 series tengan un valor igual a 0, puedes definir [`series.stillShowZeroSum`](${optionPath}series-pie.stillShowZeroSum) como `false`. + +```js live +option = { + series: [ + { + type: 'pie', + stillShowZeroSum: false, + data: [ + { + value: 0, + name: 'Direct Visit' + }, + { + value: 0, + name: 'Union Ad' + }, + { + value: 0, + name: 'Search Engine' + } + ] + } + ] +}; +``` + +Si también deseas ocultar la etiqueta, define [`series.label.show`](${optionPath}series-pie.label.show) como `false`. + +```js live +option = { + series: [{ + type: 'pie', + stillShowZeroSum: false, + label: { + show: false + } + data: [{ + value: 0, + name: 'Direct Visit' + }, { + value: 0, + name: 'Union Ad' + }, { + value: 0, + name: 'Search Engine' + }] + }] +}; +``` diff --git a/contents/es/how-to/chart-types/pie/doughnut.md b/contents/es/how-to/chart-types/pie/doughnut.md new file mode 100755 index 000000000..291d719e4 --- /dev/null +++ b/contents/es/how-to/chart-types/pie/doughnut.md @@ -0,0 +1,87 @@ +# Gráfico de Rosca + +Los gráficos de rosca también se utilizan para mostrar la proporción de los valores en comparación con el total. A diferencia del gráfico de pastel, el espacio en el centro del gráfico puede usarse para proporcionar información adicional. Esto hace que el gráfico de rosca sea un tipo de gráfico comúnmente utilizado. + +## Gráfico de Rosca Básico + +En ECharts, el radio del gráfico de pastel también podría ser un arreglo con 2 elementos. Cada elemento en el arreglo podría ser una cadena de texto o un valor. El primer elemento representa el radio interno, mientras que el segundo es el radio externo. + +Desde esta perspectiva, el gráfico de pastel es un subconjunto del gráfico de rosca que tiene el radio interno igual a 0. + +```js live +option = { + title: { + text: 'A Case of Doughnut Chart', + left: 'center', + top: 'center' + }, + series: [ + { + type: 'pie', + data: [ + { + value: 335, + name: 'A' + }, + { + value: 234, + name: 'B' + }, + { + value: 1548, + name: 'C' + } + ], + radius: ['40%', '70%'] + } + ] +}; +``` + +Si configuramos un radio como una cadena con un valor de porcentaje, mientras que el otro es un valor numérico, el radio interno será más pequeño que el radio externo en algunas resoluciones. ECharts elegirá automáticamente el elemento más pequeño para el radio interno. Sin embargo, esto no debería causar un resultado inesperado. + +## Mostrar Texto en el Centro de la Rosca desde el Sector Destacado + +El caso anterior te muestra cómo mostrar texto fijo en el centro del gráfico de rosca. El siguiente caso te enseñará cómo mostrar el texto correspondiente del sector resaltado por el mouse. La idea general es fijar la `label` en el centro del gráfico mientras se oculta la `label` por defecto. + +```js live +option = { + legend: { + orient: 'vertical', + x: 'left', + data: ['A', 'B', 'C', 'D', 'E'] + }, + series: [ + { + type: 'pie', + radius: ['50%', '70%'], + avoidLabelOverlap: false, + label: { + show: false, + position: 'center' + }, + labelLine: { + show: false + }, + emphasis: { + label: { + show: true, + fontSize: '30', + fontWeight: 'bold' + } + }, + data: [ + { value: 335, name: 'A' }, + { value: 310, name: 'B' }, + { value: 234, name: 'C' }, + { value: 135, name: 'D' }, + { value: 1548, name: 'E' } + ] + } + ] +}; +``` + +En este caso, `avoidLabelOverlap` se usa para controlar si ECharts ajusta la posición de la etiqueta para evitar solapamientos. El valor por defecto de `avoidLabelOverlap` es `true`. Queremos que la etiqueta esté fija en el centro, por lo que necesitamos definirla como `false`. + +Por lo tanto, el centro del gráfico de rosca mostrará el`name` del sector resaltado. diff --git a/contents/es/how-to/chart-types/pie/rose.md b/contents/es/how-to/chart-types/pie/rose.md new file mode 100755 index 000000000..f2426e224 --- /dev/null +++ b/contents/es/how-to/chart-types/pie/rose.md @@ -0,0 +1,38 @@ +# Gráfico de Rosa (Gráfico de Nightingale) + +El Gráfico de Rosa, que también se conoce como gráfico de Nightingale, generalmente indica categorías por sectores del mismo radio pero con radios diferentes. + +ECharts puede implementar el Gráfico de Rosa definiendo [`series.roseType`](${optionPath}series-pie.roseType) del gráfico de pastel como `'area'`.Todas las demás configuraciones son las mismas que para un gráfico de pastel básico. + +```js live +option = { + series: [ + { + type: 'pie', + data: [ + { + value: 100, + name: 'A' + }, + { + value: 200, + name: 'B' + }, + { + value: 300, + name: 'C' + }, + { + value: 400, + name: 'D' + }, + { + value: 500, + name: 'E' + } + ], + roseType: 'area' + } + ] +}; +``` diff --git a/contents/es/how-to/chart-types/scatter/basic-scatter.md b/contents/es/how-to/chart-types/scatter/basic-scatter.md new file mode 100644 index 000000000..08a46ecf9 --- /dev/null +++ b/contents/es/how-to/chart-types/scatter/basic-scatter.md @@ -0,0 +1,121 @@ +# Gráfico de Dispersión Básico + +El gráfico de dispersión, un tipo de gráfico ampliamente utilizado, se construye con varios "puntos". Estos puntos a veces representan la posición del valor en el sistema de coordenadas (sistema de coordenadas cartesiano, sistema de coordenadas geográficas, etc.), y otras veces el tamaño y color de los elementos pueden mapearse al valor, representando datos de alta dimensionalidad. + +## Ejemplo Simple + +El siguiente ejemplo es una configuración básica de un gráfico de dispersión con el eje x como categoría y el eje y como valor: + +```js live +option = { + xAxis: { + data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] + }, + yAxis: {}, + series: [ + { + type: 'scatter', + data: [220, 182, 191, 234, 290, 330, 310] + } + ] +}; +``` + +## Gráfico de Dispersión en Sistema de Coordenadas Cartesianas + +En el caso anterior, el eje x del gráfico de dispersión es un eje de categoría discreto y el eje y es un eje de valor continuo. Sin embargo, el escenario normal para el gráfico de dispersión es tener dos ejes de valor continuo (también conocido como el sistema de coordenadas cartesianas). El tipo de serie es diferente en que tanto el valor del eje x como el del eje y están incluidos en `data`, pero no en `xAxis` ni en `yAxis`. + +```js live +option = { + xAxis: {}, + yAxis: {}, + series: [ + { + type: 'scatter', + data: [ + [10, 5], + [0, 8], + [6, 10], + [2, 12], + [8, 9] + ] + } + ] +}; +``` + +## Gráfico de dispersión personalizado + +### Estilo de símbolo + +El símbolo se refiere a la forma del ítem en un gráfico de dispersión. Hay tres tipos de configuraciones disponibles. El primero es la forma incorporada en ECharts, el segundo es una imagen, y el último es el path SVG. + +Las formas incorporadas en ECharts incluyen: `'circle'`, `'rect'`(rectangle), `'roundRect'`(rounded rectangle), `'triangle'`, `'diamond'`, `'pin'` and `'arrow'`. To use built-in shapes, you need to state the `symbol` con la cadena correspondiente. + +Si deseas definir la forma como cualquier imagen, puedes usar `'image'` seguido de la ruta, por ejemplo, `'image://http://example.com/xxx.png'` o `'image://./xxx.png'`. + +El `symbol` de ECharts también admite gráficos vectoriales SVG. Puedes definir el `symbol` como una ruta de archivo SVG que comienza con `'path://'` para ubicar los gráficos vectoriales. Las ventajas de los gráficos vectoriales son su tamaño más pequeño y que no presentan bordes dentados o borrosos. + +Método para encontrar el path SVG: Abre un archivo `SVG` busca un path similar a ``; agrega el valor de `d`'después de `'path://'`. Veamos cómo definir un ítem con la forma vectorial de un corazón. + +Primero, necesitamos un archivo `SVG` de un corazón. Puedes dibujarlo con un software de edición vectorial, o descargar uno de internet. Aquí está el contenido: + +```xml + + + + +``` + +En ECharts, define el `symbol` como el path de d: + +```js live +option = { + xAxis: { + data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] + }, + yAxis: {}, + series: [ + { + type: 'scatter', + data: [220, 182, 191, 234, 290, 330, 310], + symbolSize: 20, + symbol: + 'path://M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014 C52.216,18.553,51.97,16.611,51.911,16.242z' + } + ] +}; +``` + +De esta manera, tenemos un gráfico con la forma vectorial de un corazón. + +### Tamaño del símbolo + +El tamaño del símbolo se define con [`series.symbolSize`](${optionPath}series-scatter.symbolSize). Puede ser un valor en píxeles que represente el tamaño del ítem, o un arreglo que incluya dos números para definir el ancho y la altura. + +Además, puede definirse como una función de retorno de llamada. Aquí tienes un ejemplo del formato: + + +```ts +(value: Array | number, params: Object) => number | Array; +``` + +El primer argumento es el valor de los datos, y el segundo argumento incluye otros parámetros del ítem de datos. En el siguiente ejemplo, definimos el tamaño del ítem en proporción al valor de los datos. + +```js live +option = { + xAxis: { + data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] + }, + yAxis: {}, + series: [ + { + type: 'scatter', + data: [220, 182, 191, 234, 290, 330, 310], + symbolSize: function(value) { + return value / 10; + } + } + ] +}; +``` diff --git a/contents/es/how-to/cross-platform/server.md b/contents/es/how-to/cross-platform/server.md new file mode 100644 index 000000000..f2c9d5833 --- /dev/null +++ b/contents/es/how-to/cross-platform/server.md @@ -0,0 +1,319 @@ +# Renderizado del lado del servidor + +Normalmente, Apache EChartsTM renderiza el gráfico dinámicamente en el navegador y vuelve a renderizarse después de las interacciones del usuario. Sin embargo, hay escenarios específicos en los que también necesitamos renderizar los gráficos del lado del servidor: + +- Reducir el tiempo de primer renderizado (FCP) y garantizar que el gráfico se muestre inmediatamente.. +- Incrustar gráficos en entornos como Markdown o PDF que no admiten scripts. + +En estos casos, ECharts ofrece soluciones de renderizado del lado del servidor (SSR) tanto en SVG como en Canvas. + + +| Solution | Rendering Result | Pros | +| ----------------- | ----------------- | ----------------- | +| Server-Side SVG Rendering | SVG string | Smaller than Canvas images;
Vector SVG images are not blurred;
Support for initial animation | +| Server-Side Canvas Rendering | Image | The image format is available for a wider range of scenarios, and is optional for scenarios that do not support SVG | + +En general, se debe preferir la solución de renderizado SVG del lado del servidor, o si SVG no es aplicable, se puede considerar la solución de renderizado en Canvas. + +El renderizado del lado del servidor también tiene algunas limitaciones, especialmente en lo que respecta a interacciones que no pueden ser soportadas. Por lo tanto, si tienes requisitos de interacción, puedes consultar la sección "Renderizado del lado del servidor con hidratación" a continuación. + +## Renderizado del lado del servidor + + +### Renderizado del lado del servidor en SVG + +> Actualización de versión: + +> +> - 5.3.0: Introducción de una nueva solución de renderizado basada en cadenas SVG sin dependencias y soporte para animaciones iniciales. +> - 5.5.0: Se añadió un entorno de ejecución ligero en el cliente, que permite algunas interacciones sin necesidad de cargar el ECharts completo en el cliente. + +Introdujimos una nueva solución de renderizado del lado del servidor basada en cadenas SVG sin dependencias en la versión 5.3.0. + +```ts +// Server-side code +const echarts = require('echarts'); + +// In SSR mode the first container parameter is not required +let chart = echarts.init(null, null, { + renderer: 'svg', // must use SVG rendering mode + ssr: true, // enable SSR + width: 400, // need to specify height and width + height: 300 +}); + +// use setOption as normal +chart.setOption({ + //... +}); + +// Output a string +const svgStr = chart.renderToSVGString(); + +// If chart is no longer useful, consider disposing it to release memory. +chart.dispose(); +chart = null; +``` + +La estructura general del código es casi la misma que en el navegador, comenzando con `init` para inicializar un gráfico de ejemplo y luego configurando los elementos del gráfico mediante `setOption`. Sin embargo, los parámetros pasados a `init` serán diferentes a los utilizados en el navegador. + +- En primer lugar, dado que el SVG renderizado en el lado del servidor es basado en cadenas, no necesitamos un contenedor para mostrar el contenido renderizado, por lo que podemos pasar `null` o `undefined` como primer `container` parametro de `init`. +- Luego, en el tercer parámetro de `init` debemos indicarle a ECharts que habilite el modo de renderizado del lado del servidor especificando `ssr: true`.De esta manera, ECharts sabrá que debe desactivar el bucle de animación y los módulos de eventos. +- También debemos especificar la `height` y `width` del gráfico, por lo que si el tamaño del gráfico debe ser sensible al contenedor, es posible que debas pensar si el renderizado del lado del servidor es adecuado para tu escenario. + +En el navegador, ECharts renderiza automáticamente el resultado en la página después de `setOption` y luego determina en cada cuadro si hay una animación que necesita ser redibujada, pero en Node.js no hacemos esto después de establecer `ssr: true`. En su lugar, usamos `renderToSVGString` para renderizar el gráfico actual como una cadena SVG, que luego puede ser devuelta al frontend mediante la respuesta HTTP o guardada en un archivo local. + +Respuesta al navegador (usando Express.js como ejemplo): + +```ts +res.writeHead(200, { + 'Content-Type': 'application/xml' +}); +res.write(svgStr); // svgStr is the result of chart.renderToSVGString() +res.end(); +``` + +Or save to a local file + +```ts +fs.writeFile('bar.svg', svgStr, 'utf-8'); +``` + +#### Animaciones en el renderizado del lado del servidor + +Como puedes ver en el ejemplo anterior, incluso con el renderizado del lado del servidor, ECharts aún puede proporcionar efectos de animación, que se logran insertando animaciones CSS en la cadena SVG de salida. No se necesita JavaScript adicional para ejecutar la animación. + +Sin embargo, las limitaciones de las animaciones CSS impiden implementar animaciones más flexibles en el renderizado del lado del servidor, como animaciones de gráficos de barras en carrera, animaciones de etiquetas y efectos especiales en la serie `lines` La animación de algunas series, como `pie`, ha sido optimizada específicamente para el renderizado del lado del servidor. + + +Si no deseas esta animación, puedes desactivarla configurando`animation: false` al utilizar `setOption`. + +```ts +setOption({ + animation: false +}); +``` + +### Renderizado del lado del servidor en Canvas + +Si deseas que la salida sea una imagen en lugar de una cadena SVG, o si estás utilizando una versión más antigua, te recomendamos usar [node-canvas](https://github.com/Automattic/node-canvas) para el renderizado del lado del servidor.[node-canvas](https://github.com/Automattic/node-canvas) es una implementación de Canvas en Node.js que proporciona una interfaz casi idéntica a la de Canvas en el navegador. + +Aquí tienes un ejemplo simple: + +```ts +var echarts = require('echarts'); +const { createCanvas } = require('canvas'); + +// In versions earlier than 5.3.0, you had to register the canvas factory with setCanvasCreator. +// Not necessary since 5.3.0 +echarts.setCanvasCreator(() => { + return createCanvas(); +}); + +const canvas = createCanvas(800, 600); +// ECharts can use the Canvas instance created by node-canvas as a container directly +let chart = echarts.init(canvas); + +// setOption as normal +chart.setOption({ + //... +}); + +const buffer = renderChart().toBuffer('image/png'); + +// If chart is no longer useful, consider disposing it to release memory. +chart.dispose(); +chart = null; + +// Output the PNG image via Response +res.writeHead(200, { + 'Content-Type': 'image/png' +}); +res.write(buffer); +res.end(); +``` + +#### Carga de imágenes + +[node-canvas](https://github.com/Automattic/node-canvas) proporciona una implementación de `Image` para la carga de imágenes. Si utilizas imágenes en tu código, podemos adaptarlas utilizando la interfaz `setPlatformAPI` que se introdujo en la versión `5.3.0`. + +```ts +echarts.setPlatformAPI({ + // Same with the old setCanvasCreator + createCanvas() { + return createCanvas(); + }, + loadImage(src, onload, onerror) { + const img = new Image(); + // must be bound to this context. + img.onload = onload.bind(img); + img.onerror = onerror.bind(img); + img.src = src; + return img; + } +}); +``` +Si está utilizando imágenes de forma remota, le recomendamos que prefetch la imagen a través de una petición http para obtener `base64` antes de pasarlo como la URL de la imagen, para asegurarse de que la imagen se carga cuando se renderiza. + + +## Hidratación del cliente + +### Carga diferida de ECharts completa + +Con la última versión de ECharts, la solución de renderizado del lado del servidor puede hacer lo siguiente al renderizar el gráfico: + +- Soporte para la animación inicial (es decir, la animación que se reproduce cuando el gráfico se renderiza por primera vez). +- Estilos de resaltado (es decir, el efecto de resaltado cuando el mouse pasa sobre una barra en un gráfico de barras). + +Pero hay características que no pueden ser soportadas por el renderizado del lado del servidor: + +- Cambio dinámico de datos +- Hacer clic en una leyenda para alternar si la serie se muestra o no +- Mover el mouse para mostrar un tooltip +- Otras características relacionadas con la interacción + +Si tienes tales requisitos, puedes considerar usar renderizado del lado del servidor para generar rápidamente el gráfico en la primera pantalla, luego esperar a que `echarts.js` termine de cargarse y volver a renderizar el mismo gráfico en el lado del cliente, para que puedas lograr efectos de interacción normales y cambiar los datos dinámicamente. Ten en cuenta que al renderizar en el lado del cliente, debes activar los componentes interactivos como `tooltip: { show: true }` y desactivar la animación inicial con `animation: 0` (la animación inicial debe ser realizada por la animación SVG del resultado renderizado en el servidor). + +Como se puede ver, desde el punto de vista de la experiencia del usuario, casi no hay un proceso de renderizado secundario, y el efecto de cambio es muy fluido. También puedes usar una biblioteca como [pace-js](https://www.npmjs.com/package/pace-js) para mostrar una barra de progreso de carga durante la carga de `echarts.js` como en el ejemplo anterior, para resolver el problema de la falta de retroalimentación interactiva antes de que los ECharts estén completamente cargados. + +Usar renderizado del lado del servidor con renderizado del lado del cliente y carga diferida de `echarts.js` en el lado del cliente es una buena solución para escenarios en los que se necesita renderizar rápidamente la primera pantalla y luego se debe admitir la interacción. Sin embargo, toma algo de tiempo cargar `echarts.js` y, antes de que se cargue completamente, no hay retroalimentación interactiva, por lo que se podría mostrar un texto de "Cargando" al usuario. Esta es una solución comúnmente recomendada para escenarios donde se necesita renderizar rápidamente la primera pantalla y luego se debe admitir la interacción. + +### Tiempo de ejecución ligero en el cliente + +La solución A proporciona una forma de implementar interacciones completas, pero en algunos escenarios, no necesitamos interacciones complejas, solo esperamos poder realizar algunas interacciones simples en el cliente basadas en el renderizado del lado del servidor, como: hacer clic en la leyenda para alternar si la serie se muestra. En este caso, ¿podemos evitar cargar al menos unos cientos de KBs del código de ECharts en el cliente? + +A partir de la versión v5.5.0, si el gráfico solo necesita los siguientes efectos e interacciones, se puede lograr mediante el renderizado SVG del lado del servidor + tiempo de ejecución ligero en el cliente: + +- Animación inicial del gráfico (principio de implementación: el SVG renderizado por el servidor incluye animación CSS). +- Estilo de resaltado (principio de implementación: el SVG renderizado por el servidor incluye animación CSS) +- Cambio dinámico de datos (principio de implementación: el tiempo de ejecución ligero solicita renderizado secundario al servidor). +- Hacer clic en la leyenda para alternar si la serie se muestra (principio de implementación: el tiempo de ejecución ligero solicita renderizado secundario al servidor). + +```html +
+ + + +``` + +El servidor realiza el renderizado secundario basado en la información pasada por el cliente sobre si cada serie se muestra (`isSeriesShown`) y devuelve una nueva cadena SVG. El código del lado del servidor [is the same as above](#server-side-svg-rendering), por lo que no se repetirá. + +> Acerca del registro del estado: En comparación con el renderizado puramente del lado del cliente, los desarrolladores deben registrar y mantener información adicional (como si cada serie se muestra en este ejemplo). Esto es inevitable porque las solicitudes HTTP son sin estado. Si quieres implementar un estado, o el cliente lo registra y lo pasa como en el ejemplo anterior, o el servidor mantiene el estado (por ejemplo, a través de una sesión, pero esto requiere más memoria del servidor y una lógica de destrucción más compleja, por lo que no se recomienda). + +Usar renderizado SVG del lado del servidor más tiempo de ejecución ligero del lado del cliente tiene la ventaja de que el cliente ya no necesita cargar cientos de KBs del código de ECharts, solo necesita cargar un código de tiempo de ejecución ligero de menos de 4 KB; y desde la experiencia del usuario, se pierde muy poco (admite animación inicial, resaltado al pasar el mouse). La desventaja es que requiere un costo de desarrollo para mantener información de estado adicional y no admite interacciones con requisitos de tiempo real muy altos (como mostrar tooltips al mover el mouse). En general, **se recomienda usarlo en entornos con requisitos muy estrictos para el volumen de código.**. + +## Usando Tiempo de Ejecución Ligero + +El tiempo de ejecución ligero en el cliente permite la interacción con los gráficos SVG renderizados por el servidor al comprender el contenido. + +El tiempo de ejecución ligero en el cliente se puede importar de las siguientes maneras: + +```html + + + + +``` + +### API + +Las siguientes APIs se proporcionan en la variable global `window['echarts-ssr-client']`: + +#### hydrate(dom: HTMLElement, options: ECSSRClientOptions) + +- `dom`: El contenedor del gráfico, cuyo contenido debe establecerse como el gráfico SVG renderizado por el servidor antes de llamar a este método. +- `options`: Elementos de configuración + +##### ECSSRClientOptions + +```ts +on?: { + mouseover?: (params: ECSSRClientEventParams) => void, + mouseout?: (params: ECSSRClientEventParams) => void, + click?: (params: ECSSRClientEventParams) => void +} +``` + +Al igual que los [chart mouse events](${mainSitePath}api.html#events.Mouse%20events), los eventos aquí son para los elementos del gráfico (por ejemplo, las barras de un gráfico de barras, el ítem de datos de un gráfico de líneas, etc.), no para el contenedor del gráfico. + +##### ECSSRClientEventParams + +```ts +{ + type: 'mouseover' | 'mouseout' | 'click'; + ssrType: 'legend' | 'chart'; + seriesIndex?: number; + dataIndex?: number; + event: Event; +} +``` + +- `type`: Event type +- `ssrType`: Event object type, `legend` represents legend data, `chart` represents chart data object +- `seriesIndex`: Series index +- `dataIndex`: Data index +- `event`: Native event object + +### Ejemplo + +Ver la sección de "Tiempo de ejecución ligero en el cliente" anterior. + +## Resumen + +Arriba, hemos introducido varias soluciones de renderizado diferentes, incluyendo: + +- Client-side rendering +- Server-side SVG rendering +- Server-side Canvas rendering +- Client-side lightweight runtime rendering + +These four rendering methods can be used in combination. Let's summarize their respective applicable scenarios: + +| Rendering Solution | Loading Volume | Loss of Function and Interaction | Relative Development Workload | Recommended Scenario | +| --- | --- | --- | --- | --- | +| Client-side rendering | Largest | None | Minimum | The first screen load time is not sensitive, and there is a high demand for complete functionality and interaction | +| Client-side rendering ([partial package importing](${lang}/basics/import#shrinking-bundle-size) on demand) | Large | Large: the packages not included cannot use the corresponding functions | Small | The first screen load time is not sensitive, there is no strict requirement for code volume but hope to be as small as possible, only use a small part of ECharts functions, no server resources | +| One-time server-side SVG rendering | Small | Large: unable to dynamically change data, does not support legend toggle series display, does not support tooltips and other interactions with high real-time requirements | Medium | The first screen load time is sensitive, low demand for complete functionality and interaction | +| One-time server-side Canvas rendering | Large | Largest: the same as above and does not support initial animation, larger image volume, blurry when enlarged | Medium | The first screen load time is sensitive, low demand for complete functionality and interaction, platform restrictions cannot use SVG | +| Server-side SVG rendering plus client-side ECharts lazy loading | Small, then large | Medium: cannot interact before lazy loading is completed | Medium | The first screen load time is sensitive, high demand for complete functionality and interaction, the chart is best not needed for interaction immediately after loading | +| Server-side SVG rendering plus client-side lightweight runtime | Small | Medium: Cannot implement interactions with high real-time requirements | Large (need to maintain chart status, define client-server interface protocol) | The first screen load time is sensitive, low demand for complete functionality and interaction, very strict requirements for code volume, not strict requirements for interaction real-time | +| Server-side SVG rendering plus client-side ECharts lazy loading, using lightweight runtime before lazy loading is completed | Small, then large | Small: Cannot perform complex interactions before lazy loading is completed | Largest | The first screen load time is sensitive, high demand for complete functionality and interaction, sufficient development time | + + +Por supuesto, existen otras posibilidades de combinación, pero las más comunes son las anteriores. Creo que si entiendes las características de estas soluciones de renderizado, podrás elegir la solución adecuada en función de tu propio escenario. \ No newline at end of file diff --git a/contents/es/how-to/data/drilldown.md b/contents/es/how-to/data/drilldown.md new file mode 100644 index 000000000..e69de29bb diff --git a/contents/es/how-to/data/dynamic-data.md b/contents/es/how-to/data/dynamic-data.md new file mode 100644 index 000000000..d727263b0 --- /dev/null +++ b/contents/es/how-to/data/dynamic-data.md @@ -0,0 +1,114 @@ +# Carga Asíncrona de Datos y Actualización Dinámica + +## Carga Asíncrona + +En el [Getting Started Example](${lang}/get-started) los datos se actualizan directamente usando `setOption`. Pero en muchos casos, los datos necesitan ser llenados mediante carga asíncrona de manera frecuente. `ECharts` puede implementar la carga asíncrona de manera sencilla. Puedes obtener los datos de manera asíncrona a través de una función como jQuery y usar `setOption` para llenar los datos y configuraciones después de que el gráfico haya sido inicializado. + +```js +var myChart = echarts.init(document.getElementById('main')); + +$.get('data.json').done(function(data) { + // Structure of data: + // { + // categories: ["Shirt","Wool sweater","Chiffon shirt","Pants","High-heeled shoes","socks"], + // values: [5, 20, 36, 10, 10, 20] + // } + myChart.setOption({ + title: { + text: 'Asynchronous Loading Example' + }, + tooltip: {}, + legend: {}, + xAxis: { + data: data.categories + }, + yAxis: {}, + series: [ + { + name: 'Sales', + type: 'bar', + data: data.values + } + ] + }); +}); +``` + +O mostrar los ejes vacíos con todos los estilos definidos antes de llenar los datos: + +```js +var myChart = echarts.init(document.getElementById('main')); +// Show title, legends and empty axes +myChart.setOption({ + title: { + text: 'Asynchronous Loading Example' + }, + tooltip: {}, + legend: { + data: ['Sales'] + }, + xAxis: { + data: [] + }, + yAxis: {}, + series: [ + { + name: 'Sales', + type: 'bar', + data: [] + } + ] +}); + +// Asynchronous Data Loading +$.get('data.json').done(function(data) { + // Fill in the data + myChart.setOption({ + xAxis: { + data: data.categories + }, + series: [ + { + // Find series by name + name: 'Sales', + data: data.data + } + ] + }); +}); +``` + +Por ejemplo: + + + +Necesitas usar `name` para "navegar" en ECharts cuando actualices los datos. En el ejemplo anterior, el gráfico puede actualizarse normalmente dependiendo del orden de las series, pero te recomendamos agregar el dato `name` al actualizar los datos. + +## Animación de Carga + +Cuando toma mucho tiempo cargar los datos, el usuario puede estar viendo un gráfico vacío con solo los ejes y preguntarse si hay un error. + +ECharts tiene una animación de carga sencilla por defecto. Puedes llamar a [showLoading](${mainSitePath}/api.html#echartsInstance.showLoading) para mostrarla. Cuando la carga de datos haya finalizado, llama a [hideLoading](${mainSitePath}/api.html#echartsInstance.hideLoading) para ocultar la animación. + +```js +myChart.showLoading(); +$.get('data.json').done(function (data) { + myChart.hideLoading(); + myChart.setOption(...); +}); +``` + +Aquí está el efecto: + + + + +## Actualización Dinámica + +ECharts está impulsado por los datos, cualquier cambio en los datos provocará cambios en la presentación del gráfico. Por lo tanto, es sorprendentemente sencillo implementar una actualización dinámica. + +Todas las actualizaciones de datos se implementan mediante [setOption](${mainSitePath}/api.html#echartsInstance.setOption). Solo necesitas obtener los datos periódicamente. ECharts encontrará la diferencia entre dos conjuntos de datos para elegir la forma adecuada de animación. + +Mira el siguiente ejemplo. + + diff --git a/contents/es/how-to/interaction/coarse-pointer.md b/contents/es/how-to/interaction/coarse-pointer.md new file mode 100644 index 000000000..23486c3ab --- /dev/null +++ b/contents/es/how-to/interaction/coarse-pointer.md @@ -0,0 +1,30 @@ +# Ajuste Inteligente del Puntero + +Algunos elementos interactivos pueden ser relativamente pequeños en los gráficos, por lo que a veces es difícil para los usuarios hacer clic y realizar otras operaciones con precisión, especialmente en dispositivos móviles. Por lo tanto, en Apache EChartsTM 5.4.0, se introdujo el concepto de "ajuste inteligente del puntero". + +A partir de esta versión, ECharts habilita por defecto el ajuste del puntero para gráficos en dispositivos móviles y lo deshabilita para gráficos en dispositivos no móviles. + + +> Si es necesario habilitarlo para todas las plataformas, se puede lograr configurando `opt.useCoarsePointer` a `true` en [init](${mainSitePath}api.html#echarts.init); configurarlo a `false` o desactivará para todas las plataformas. + +## Algoritmo de Ajuste + +Cuando ocurre un evento de ratón o toque, ECharts determinará si está intersectando con un elemento interactivo en función de la posición del ratón o del toque. Si es así, el elemento será el objeto con el que se interactúa, lo que es la misma lógica que antes de esta optimización. Si no es así, se buscará un elemento que esté más cerca de la posición del ratón o toque dentro de un rango determinado. + + +> El rango predeterminado es de 44px (see [W3C standard](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html)), los desarrolladores pueden configurar este valor a través de `opt.pointerSize` cuando [init](${mainSitePath}api.html#echarts.init). + +Más específicamente, ECharts recorrerá diferentes ángulos y diferentes radios (dentro de `opt.pointerSize`) alrededor de la posición del ratón o toque hasta encontrar un elemento que lo intercepte. Si se encuentra, el elemento se considera el objeto interactivo. + + + + +Es decir, si un elemento se encuentra dentro del radio `opt.pointerSize` de la posición del ratón o toque, el elemento intersectado más cercano será considerado el objeto interactivo. + +## Rendimiento + +En cuanto a la implementación, primero se juzga la intersección entre la posición del ratón o toque y la caja delimitadora AABB de todos los elementos interactivos, para eliminar rápidamente la mayoría de los elementos que no están intersectando. Luego, se realiza un juicio de intersección más preciso en los elementos restantes. Por lo tanto, desde la perspectiva de la experiencia del usuario, casi no hay pérdida de rendimiento perceptible. + + +Para gráficos de series con grandes cantidades de datos (es decir, gráficos de barras, gráficos de dispersión, etc., con `large: true` enabled), el ajuste no se habilitará. diff --git a/contents/es/how-to/interaction/drag.md b/contents/es/how-to/interaction/drag.md new file mode 100644 index 000000000..97bc4c568 --- /dev/null +++ b/contents/es/how-to/interaction/drag.md @@ -0,0 +1,271 @@ +# Un Ejemplo: Implementación de Arrastre + +Este es un ejemplo pequeño que introduce cómo implementar el arrastre de elementos gráficos en Apache EChartsTM. Con este ejemplo, veremos cómo crear una aplicación rica en interactividad basada en la API de ECharts. + + + + +Este ejemplo implementa principalmente el arrastre de puntos de una curva, lo que modifica la curva. Aunque es un ejemplo simple, se pueden hacer muchas más cosas a partir de él, como editar gráficos visualmente. Así que comencemos con este ejemplo simple. + +## Implementar arrastre básico + + +Primero, creamos un gráfico de líneas básico [line chart (line series)](${optionPath}series-line): + +```js +var symbolSize = 20; +var data = [ + [15, 0], + [-50, 10], + [-56.5, 20], + [-46.5, 30], + [-22.1, 40] +]; + +myChart.setOption({ + xAxis: { + min: -100, + max: 80, + type: 'value', + axisLine: { onZero: false } + }, + yAxis: { + min: -30, + max: 60, + type: 'value', + axisLine: { onZero: false } + }, + series: [ + { + id: 'a', + type: 'line', + smooth: true, + // Set a big symbolSize for dragging convenience. + symbolSize: symbolSize, + data: data + } + ] +}); +``` + +Dado que los símbolos en la línea no son arrastrables, los hacemos arrastrables utilizando el [graphic component](${optionPath}graphic) para agregar elementos circulares arrastrables a los símbolos, respectivamente. + +```js +myChart.setOption({ + // Declare a graphic component, which contains some graphic elements + // with the type of 'circle'. + // Here we have used the method `echarts.util.map`, which has the same + // behavior as Array.prototype.map, and is compatible with ES5-. + graphic: echarts.util.map(data, function(dataItem, dataIndex) { + return { + // 'circle' means this graphic element is a shape of circle. + type: 'circle', + + shape: { + // The radius of the circle. + r: symbolSize / 2 + }, + // Transform is used to located the circle. position: + // [x, y] means translate the circle to the position [x, y]. + // The API `convertToPixel` is used to get the position of + // the circle, which will introduced later. + position: myChart.convertToPixel('grid', dataItem), + + // Make the circle invisible (but mouse event works as normal). + invisible: true, + // Make the circle draggable. + draggable: true, + // Give a big z value, which makes the circle cover the symbol + // in line series. + z: 100, + // This is the event handler of dragging, which will be triggered + // repeatly while dragging. See more details below. + // A util method `echarts.util.curry` is used here to generate a + // new function the same as `onPointDragging`, except that the + // first parameter is fixed to be the `dataIndex` here. + ondrag: echarts.util.curry(onPointDragging, dataIndex) + }; + }) +}); +``` + +En el código anterior, se utiliza la API [convertToPixel](${mainSitePath}api.html#echartsInstance.convertToPixel) para convertir los datos a sus "coordenadas en píxeles", con las cuales cada elemento gráfico se puede renderizar en el lienzo. El término "coordenadas en píxeles" significa que la coordenada está en píxeles del lienzo, cuyo origen está en la parte superior izquierda del lienzo. En la sentencia `myChart.convertToPixel('grid', dataItem)`, el primer parámetro `'grid'` indica que `dataItem` debe ser convertido en el primer componente de cuadrícula [grid component (cartesian)](${optionPath}grid). + +**Nota:** `convertToPixel` no debe llamarse antes de que se llame por primera vez a `setOption`. Es decir, solo se puede usar después de que los sistemas de coordenadas (cuadrícula/polar/...) hayan sido inicializados. + +Ahora los puntos se han vuelto arrastrables. A continuación, vinculamos los controladores de eventos al arrastrar esos puntos. + +```js +// This function will be called repeatly while dragging. +// The mission of this function is to update `series.data` based on +// the new points updated by dragging, and to re-render the line +// series based on the new data, by which the graphic elements of the +// line series can be synchronized with dragging. +function onPointDragging(dataIndex) { + // Here the `data` is declared in the code block in the beginning + // of this article. The `this` refers to the dragged circle. + // `this.position` is the current position of the circle. + data[dataIndex] = myChart.convertFromPixel('grid', this.position); + // Re-render the chart based on the updated `data`. + myChart.setOption({ + series: [ + { + id: 'a', + data: data + } + ] + }); +} +``` + +En el código anterior, se utiliza la API [convertFromPixel](api.html#echartsInstance.convertFromPixel) que es el proceso inverso de [convertToPixel](api.html#echartsInstance.convertToPixel). `myChart.convertFromPixel('grid', this.position)` convierte una coordenada en píxeles a un elemento de datos en [grid (cartesian)](${optionPath}grid). + +Finalmente, agregamos este código para hacer que los elementos gráficos respondan a los cambios en el tamaño del lienzo. + +```js +window.addEventListener('resize', function() { + // Re-calculate the position of each circle and update chart using `setOption`. + myChart.setOption({ + graphic: echarts.util.map(data, function(item, dataIndex) { + return { + position: myChart.convertToPixel('grid', item) + }; + }) + }); +}); +``` + +## Agregar el componente de tooltip + +Ahora que la funcionalidad básica ha sido implementada en la primera parte, si queremos que los datos se muestren en tiempo real mientras arrastramos, podemos usar el [tooltip component](${optionPath}tooltip) para hacerlo. Sin embargo, el componente tooltip tiene una regla predeterminada de "mostrar/ocultar", que no es aplicable en este caso. Por lo tanto, necesitamos personalizar la "regla de mostrar/ocultar" para nuestro caso. + +Agregamos estos fragmentos de código al bloque de código anterior: + +```js +myChart.setOption({ + // ..., + tooltip: { + // Means disable default "show/hide rule". + triggerOn: 'none', + formatter: function(params) { + return ( + 'X: ' + + params.data[0].toFixed(2) + + '
Y: ' + + params.data[1].toFixed(2) + ); + } + } +}); +``` + +```js +myChart.setOption({ + graphic: data.map(function(item, dataIndex) { + return { + type: 'circle', + // ..., + // Customize "show/hide rule", show when mouse over, hide when mouse out. + onmousemove: echarts.util.curry(showTooltip, dataIndex), + onmouseout: echarts.util.curry(hideTooltip, dataIndex) + }; + }) +}); + +function showTooltip(dataIndex) { + myChart.dispatchAction({ + type: 'showTip', + seriesIndex: 0, + dataIndex: dataIndex + }); +} + +function hideTooltip(dataIndex) { + myChart.dispatchAction({ + type: 'hideTip' + }); +} +``` + +Se utiliza la API [dispatchAction](${mainSitePath}/api.html#echartsInstance.dispatchAction) para mostrar/ocultar el contenido del tooltip, donde se despachan las acciones [showTip](${mainSitePath}/api.html#action.tooltip.showTip) y [hideTip](api.html#action.tooltip.hideTip) is dispatched. + +## Código Completo + +El código completo es el siguiente: + +```js +import echarts from 'echarts'; + +var symbolSize = 20; +var data = [ + [15, 0], + [-50, 10], + [-56.5, 20], + [-46.5, 30], + [-22.1, 40] +]; +var myChart = echarts.init(document.getElementById('main')); +myChart.setOption({ + tooltip: { + triggerOn: 'none', + formatter: function(params) { + return ( + 'X: ' + + params.data[0].toFixed(2) + + '
Y: ' + + params.data[1].toFixed(2) + ); + } + }, + xAxis: { min: -100, max: 80, type: 'value', axisLine: { onZero: false } }, + yAxis: { min: -30, max: 60, type: 'value', axisLine: { onZero: false } }, + series: [ + { id: 'a', type: 'line', smooth: true, symbolSize: symbolSize, data: data } + ] +}); +myChart.setOption({ + graphic: echarts.util.map(data, function(item, dataIndex) { + return { + type: 'circle', + position: myChart.convertToPixel('grid', item), + shape: { r: symbolSize / 2 }, + invisible: true, + draggable: true, + ondrag: echarts.util.curry(onPointDragging, dataIndex), + onmousemove: echarts.util.curry(showTooltip, dataIndex), + onmouseout: echarts.util.curry(hideTooltip, dataIndex), + z: 100 + }; + }) +}); +window.addEventListener('resize', function() { + myChart.setOption({ + graphic: echarts.util.map(data, function(item, dataIndex) { + return { position: myChart.convertToPixel('grid', item) }; + }) + }); +}); +function showTooltip(dataIndex) { + myChart.dispatchAction({ + type: 'showTip', + seriesIndex: 0, + dataIndex: dataIndex + }); +} +function hideTooltip(dataIndex) { + myChart.dispatchAction({ type: 'hideTip' }); +} +function onPointDragging(dataIndex, dx, dy) { + data[dataIndex] = myChart.convertFromPixel('grid', this.position); + myChart.setOption({ + series: [ + { + id: 'a', + data: data + } + ] + }); +} +``` + +Con los conocimientos introducidos anteriormente, se pueden implementar más características. Por ejemplo, se puede agregar un [dataZoom component](${optionPath}dataZoom) para cooperar con el sistema cartesiano, o crear una pizarra de gráficos sobre sistemas de coordenadas. ¡Usa tu imaginación! \ No newline at end of file diff --git a/contents/es/how-to/label/rich-text.md b/contents/es/how-to/label/rich-text.md new file mode 100644 index 000000000..0018b4369 --- /dev/null +++ b/contents/es/how-to/label/rich-text.md @@ -0,0 +1,502 @@ +# Texto Enriquecido + +El texto enriquecido se puede utilizar en las etiquetas de las series, ejes u otros componentes de Apache ECharts™ desde la versión 3.7. Esta característica admite: + +- Estilos de caja (fondo, borde, sombra, etc.), rotación y posición de un bloque de texto pueden especificarse. +- Se pueden personalizar estilos (color, fuente, ancho/alto, fondo, sombra, etc.) y alineación en fragmentos de texto. +- Se pueden usar imágenes en el texto como íconos o fondo. +- Combinando estas configuraciones, se pueden crear efectos especiales, como tablas simples o reglas horizontales (hr). + +Al principio, es importante aclarar los significados de dos términos que se utilizarán a continuación: + +- Text Block: Todo el bloque de texto de la etiqueta. +- Text fragment: Una parte del texto en un bloque de texto. + +Por ejemplo: + + + +## Opciones sobre el texto + +ECharts proporciona muchas opciones de texto, incluyendo: + +- Basic font style: `fontStyle`, `fontWeight`, `fontSize`, `fontFamily`. +- Fill of text: `color`. +- Stroke of text: `textBorderColor`, `textBorderWidth`. +- Shadow of text: `textShadowColor`, `textShadowBlur`, `textShadowOffsetX`, `textShadowOffsetY`. +- Box size of text block or text fragment: `lineHeight`, `width`, `height`, `padding`. +- Alignment of text block or text fragment: `align`, `verticalAlign`. +- Border, background (color or image) of text block or text fragment: `backgroundColor`, `borderColor`, `borderWidth`, `borderRadius`. +- Shadow of text block or text fragment: `shadowColor`, `shadowBlur`, `shadowOffsetX`, `shadowOffsetY`. +- Position and rotation of text block: `position`, `distance`, `rotate`. + + +El usuario puede definir estilos para un fragmento de texto en la propiedad `rich` property. Por ejemplo, [series-bar.label.rich](option.html#series-bar.label.rich) + +Por ejemplo: + +```js +labelOption = { + // Styles defined in 'rich' can be applied to some fragments + // of text by adding some markers to those fragment, like + // `{styleName|text content text content}`. + // `'\n'` is the newline character. + formatter: [ + '{a|Style "a" is applied to this fragment}', + '{b|Style "b" is applied to this fragment}This fragment use default style{x|use style "x"}' + ].join('\n'), + + // Styles for the whole text block are defined here: + color: '#333', + fontSize: 5, + fontFamily: 'Arial', + borderWidth: 3, + backgroundColor: '#984455', + padding: [3, 10, 10, 5], + lineHeight: 20, + + // Styles for text fragments are defined here: + rich: { + a: { + color: 'red', + lineHeight: 10 + }, + b: { + backgroundColor: { + image: 'xxx/xxx.jpg' + }, + height: 40 + }, + x: { + fontSize: 18, + fontFamily: 'Microsoft YaHei', + borderColor: '#449933', + borderRadius: 4 + } + // ... + } +}; +``` + +> Notice: `width` and `height` only work when `rich` specified. + +## Estilos básicos de texto, bloque de texto y fragmento de texto + +El estilo básico de la fuente se puede establecer en el texto: `fontStyle`, `fontWeight`, `fontSize`, `fontFamily`. + +El color de relleno y el color de contorno se pueden establecer en el texto: `color`, `textBorderColor`, `textBorderWidth`. + +El estilo de borde y el fondo se pueden establecer en el bloque de texto: `borderColor`, `borderWidth`, `backgroundColor`, `padding`. + +El estilo de borde y el fondo también se pueden establecer en el fragmento de texto: `borderColor`, `borderWidth`, `backgroundColor`, `padding`. + +Ejemplo: + +```js live +option = { + series: [ + { + type: 'scatter', + symbolSize: 1, + data: [ + { + value: [0, 0], + label: { + show: true, + formatter: [ + 'Plain text', + '{textBorder|textBorderColor + textBorderWidth}', + '{textShadow|textShadowColor + textShadowBlur + textShadowOffsetX + textShadowOffsetY}', + '{bg|backgroundColor + borderRadius + padding}', + '{border|borderColor + borderWidth + borderRadius + padding}', + '{shadow|shadowColor + shadowBlur + shadowOffsetX + shadowOffsetY}' + ].join('\n'), + backgroundColor: '#eee', + borderColor: '#333', + borderWidth: 2, + borderRadius: 5, + padding: 10, + color: '#000', + fontSize: 14, + shadowBlur: 3, + shadowColor: '#888', + shadowOffsetX: 0, + shadowOffsetY: 3, + lineHeight: 30, + rich: { + textBorder: { + fontSize: 20, + textBorderColor: '#000', + textBorderWidth: 3, + color: '#fff' + }, + textShadow: { + fontSize: 16, + textShadowBlur: 5, + textShadowColor: '#000', + textShadowOffsetX: 3, + textShadowOffsetY: 3, + color: '#fff' + }, + bg: { + backgroundColor: '#339911', + color: '#fff', + borderRadius: 15, + padding: 5 + }, + border: { + color: '#000', + borderColor: '#449911', + borderWidth: 1, + borderRadius: 3, + padding: 5 + }, + shadow: { + backgroundColor: '#992233', + padding: 5, + color: '#fff', + shadowBlur: 5, + shadowColor: '#336699', + shadowOffsetX: 6, + shadowOffsetY: 6 + } + } + } + } + ] + } + ], + xAxis: { + show: false, + min: -1, + max: 1 + }, + yAxis: { + show: false, + min: -1, + max: 1 + } +}; +``` + +## Posición de la etiqueta + +La opción `label` se puede usar en gráficos como `bar`, `line`, `scatter`, etc. La posición de una etiqueta se puede especificar mediante [label.position](option.html#series-scatter.label.position)、[label.distance](option.html#series-scatter.label.distance). + +Prueba a modificar la opción `position` y `distance` en el siguiente ejemplo: + +```js live +option = { + series: [ + { + type: 'scatter', + symbolSize: 160, + symbol: 'roundRect', + data: [[1, 1]], + label: { + // Options: 'left', 'right', 'top', 'bottom', 'inside', 'insideTop', 'insideLeft', 'insideRight', 'insideBottom', 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight' + position: 'top', + distance: 10, + + show: true, + formatter: ['Label Text'].join('\n'), + backgroundColor: '#eee', + borderColor: '#555', + borderWidth: 2, + borderRadius: 5, + padding: 10, + fontSize: 18, + shadowBlur: 3, + shadowColor: '#888', + shadowOffsetX: 0, + shadowOffsetY: 3, + textBorderColor: '#000', + textBorderWidth: 3, + color: '#fff' + } + } + ], + xAxis: { + max: 2 + }, + yAxis: { + max: 2 + } +}; +``` + +> Nota, existen diferentes valores opcionales de `position` según el tipo de gráfico. Y `distance` no es compatible con todos los gráficos. Se puede consultar más información detallada en el [option doc](${mainSitePath}option.html). + +## Rotación de Etiquetas + +En algunos casos, es necesario rotar las etiquetas. Por ejemplo: + +```js live {layout: 'lr'} +const labelOption = { + show: true, + rotate: 90, + formatter: '{c} {name|{a}}', + fontSize: 16, + rich: { + name: {} + } +}; + +option = { + xAxis: [ + { + type: 'category', + data: ['2012', '2013', '2014', '2015', '2016'] + } + ], + yAxis: [ + { + type: 'value' + } + ], + series: [ + { + name: 'Forest', + type: 'bar', + barGap: 0, + label: labelOption, + emphasis: { + focus: 'series' + }, + data: [320, 332, 301, 334, 390] + }, + { + name: 'Steppe', + type: 'bar', + label: labelOption, + emphasis: { + focus: 'series' + }, + data: [220, 182, 191, 234, 290] + } + ] +}; +``` + +[align](option.html#series-bar.label.align) y [verticalAlign](option.html#series-bar.label.verticalAlign) pueden usarse para ajustar la ubicación de la etiqueta en este caso. + +Nota, `align` y `verticalAlign`se aplican primero, luego se rota. + +## Diseño y Alineación de Fragmentos de Texto + +Para entender la regla de diseño, se puede imaginar cada fragmento de texto como un elemento `inline-block` en CSS. + +El `content box size` de un fragmento de texto está determinado por su tamaño de fuente por defecto. También se puede especificar directamente mediante `width` y `height`, aunque rara vez se establece. El `border box size` de un fragmento de texto se calcula añadiendo el `border box size` y `padding`. + +Solo `'\n'` es el carácter de nueva línea, que rompe una línea. + +Existen múltiples fragmentos de texto en una sola línea. La altura de la línea está determinada por el mayor `lineHeight` de los fragmentos de texto. El `lineHeight` de un fragmento de texto puede especificarse en `rich`, o en el nivel superior de `rich`, de lo contrario, se usa el `box size` del fragmento de texto. + +Con el `lineHeight` determinado, la posición vertical de los fragmentos de texto puede determinarse mediante `verticalAlign` (existe una pequeña diferencia respecto a la regla en CSS): + +- `'bottom'`: El borde inferior del fragmento de texto se adhiere al borde inferior de la línea. +- `'top'`: El borde superior del fragmento de texto se adhiere al borde superior de la línea. +- `'middle'`: En el centro de la línea. + +El ancho de un bloque de texto puede especificarse mediante `width`, de lo contrario, se determinará por la línea más larga. Con el ancho determinado, los fragmentos de texto se colocan en cada línea, y la posición horizontal de los fragmentos de texto puede determinarse mediante su `align`. + +- Primero, coloca los fragmentos de texto cuyo `align` sea `'left'` de izquierda a derecha de forma continua. +- En segundo lugar, coloca los fragmentos de texto cuyo `align` sea `'right'` de derecha a izquierda de forma continua. +- Finalmente, los fragmentos de texto restantes se colocan en el centro del espacio restante. + +La posición del texto en un fragmento de texto: + +- Si `align` es `'center'`, el texto se alinea en el centro del cuadro del fragmento de texto. +- Si `align` es `'left'`, el texto se alinea a la izquierda del cuadro del fragmento de texto. +- Si `align` es `'right'`, el texto se alinea a la derecha del cuadro del fragmento de texto. + +## Efectos: Icono, Regla Horizontal, Bloque de Título, Tabla Simple + +Mira el ejemplo: + + +```js live {layout: 'lr'} +option = { + series: [ + { + type: 'scatter', + data: [ + { + value: [0, 0], + label: { + formatter: [ + '{tc|Center Title}{titleBg|}', + ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ', + '{hr|}', + ' xxxxx {showers|} xxxxxxxx xxxxxxxxx ' + ].join('\n'), + rich: { + titleBg: { + align: 'right' + } + } + } + }, + { + value: [0, 1], + label: { + formatter: [ + '{titleBg|Left Title}', + ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ', + '{hr|}', + ' xxxxx {showers|} xxxxxxxx xxxxxxxxx ' + ].join('\n') + } + }, + { + value: [0, 2], + label: { + formatter: [ + '{titleBg|Right Title}', + ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ', + '{hr|}', + ' xxxxx {showers|} xxxxxxxx xxxxxxxxx ' + ].join('\n'), + rich: { + titleBg: { + align: 'right' + } + } + } + } + ], + symbolSize: 1, + label: { + show: true, + backgroundColor: '#ddd', + borderColor: '#555', + borderWidth: 1, + borderRadius: 5, + color: '#000', + fontSize: 14, + rich: { + titleBg: { + backgroundColor: '#000', + height: 30, + borderRadius: [5, 5, 0, 0], + padding: [0, 10, 0, 10], + width: '100%', + color: '#eee' + }, + tc: { + align: 'center', + color: '#eee' + }, + hr: { + borderColor: '#777', + width: '100%', + borderWidth: 0.5, + height: 0 + }, + sunny: { + height: 30, + align: 'left', + backgroundColor: { + image: + 'https://echarts.apache.org/examples/data/asset/img/weather/sunny_128.png' + } + }, + cloudy: { + height: 30, + align: 'left', + backgroundColor: { + image: + 'https://echarts.apache.org/examples/data/asset/img/weather/cloudy_128.png' + } + }, + showers: { + height: 30, + align: 'left', + backgroundColor: { + image: + 'https://echarts.apache.org/examples/data/asset/img/weather/showers_128.png' + } + } + } + } + } + ], + xAxis: { + show: false, + min: -1, + max: 1 + }, + yAxis: { + show: false, + min: 0, + max: 2, + inverse: true + } +}; +``` + +Icon is implemented by using image in `backgroundColor`. + +```js +rich: { + Sunny: { + backgroundColor: { + image: './data/asset/img/weather/sunny_128.png' + }, + // Can only height specified, but leave width auto obtained + // from the image, where the aspect ratio kept. + height: 30 + } +} +``` + +Horizontal rule (like HTML <hr> tag) can be implemented by border: + +```js +rich: { + hr: { + borderColor: '#777', + // width is set as '100%' to fullfill the text block. + // Notice, the percentage is based on the content box, without + // padding. Although it is a little different from CSS rule, + // it is convinent in most cases. + width: '100%', + borderWidth: 0.5, + height: 0 + } +} +``` + +Title block can be implemented by `backgroundColor`: + +```js +// Title is at left. +formatter: '{titleBg|Left Title}', +rich: { + titleBg: { + backgroundColor: '#000', + height: 30, + borderRadius: [5, 5, 0, 0], + padding: [0, 10, 0, 10], + width: '100%', + color: '#eee' + } +} + +// Title is in the center of the line. +// This implementation is a little tricky, but is works +// without more complicated layout mechanism involved. +formatter: '{tc|Center Title}{titleBg|}', +rich: { + titleBg: { + align: 'right', + backgroundColor: '#000', + height: 30, + borderRadius: [5, 5, 0, 0], + padding: [0, 10, 0, 10], + width: '100%', + color: '#eee' + } +} +``` +Una tabla simple se puede implementar especificando el mismo ancho para los fragmentos de texto que están en la misma columna de diferentes líneas. Consulta el [example](${exampleEditorPath}pie-rich-text). diff --git a/contents/es/meta/edit-guide.md b/contents/es/meta/edit-guide.md new file mode 100644 index 000000000..2c7a0edc1 --- /dev/null +++ b/contents/es/meta/edit-guide.md @@ -0,0 +1,339 @@ +# Directrices para la Edicion de Documentos + +## Agregar un Archivo Markdown + +Agregar un archivo markdown en los directorios `contents/zh/` (Chinese posts) o `contents/en/` (English posts) hasta tres niveles. Actualiza la informacion de la ruta y el titulo en `contents/zh/posts.yml` o`contents/en/posts.yml`. + +Los nombres de los archivos markdown deben estar en minusculas. + +## Usar Prettier para Formate el Codigo Automaticamente + +Antes de comenzar, te recomendamos instalar [prettier VSCode plugin](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode), que formateara automaticamente el codigo cuando lo guardes. + +Si sientes que el formato automatico esta alterando tut bloque de codigo, puedes agregar el siguiente comentario para evitar que prettier formatee el codigo dentro del bloque: + +```markdown + + +``` + +Si encuentras bloques de codigo que no estan formateados, primero revisa si hay errores de sintaxis en el codigo. + +## Variables Incorpordas + +- `optionPath` +- `mainSitePath` +- `exampleViewPath` +- `exampleEditorPath` +- `lang` + +Uso: + +``` +${xxxxx} +``` + +## Enlace a Otros Articulos + +```markdown +[Get Apache ECharts](${lang}/basics/download) +``` + +[Get Apache ECharts](${lang}/basics/download) + +## Incluir Codigo + +### Uso Basico + + + +```markdown +```js +option = { + series: [{ + type: 'bar', + data: [23, 24, 18, 25, 27, 28, 25] + }] +}; +\``` +``` + + + +```js +option = { + series: [ + { + type: 'bar', + data: [23, 24, 18, 25, 27, 28, 25] + } + ] +}; +``` + +### Forma Recomendada de Escribir el Codigo + +Para permitir que la herramienta nos ayude a formatear el codigo, debemos tratar evitar estilos de escritura sintaticamente problematicos. + +Por ejemplo, el comentario `...` + +```js +option = { + series: [ + { + type: 'bar' + // ... + } + ] +}; +``` + +### Previa y Edicion en Vivo + +> Actualmente solo se soporta la vista previa del codigo de Option + + +```markdown +\```js live +option = { + xAxis: { + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + }, + yAxis: {}, + series: [ + { + type: 'bar', + data: [23, 24, 18, 25, 27, 28, 25] + } + ] +}; +\``` +``` + + + +```js live +option = { + xAxis: { + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + }, + yAxis: {}, + series: [ + { + type: 'bar', + data: [23, 24, 18, 25, 27, 28, 25] + } + ] +}; +``` + +### Mas Disposicion de la Vista Previa + +#### De Izquierda a Derecha + + + +```markdown +```js live {layout: 'lr'} +option = { + ... +}; +\``` +``` + + + +```js live {layout: 'lr'} +option = { + xAxis: { + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + }, + yAxis: {}, + series: [ + { + type: 'bar', + data: [23, 24, 18, 25, 27, 28, 25] + } + ] +}; +``` + +#### De Derecha a Izquierda + + + +```markdown +```js live {layout: 'rl'} +option = { + ... +}; +\``` +``` + + + +```js live {layout: 'rl'} +option = { + xAxis: { + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + }, + yAxis: {}, + series: [ + { + type: 'bar', + data: [23, 24, 18, 25, 27, 28, 25] + } + ] +}; +``` + +#### De Abajo a Arriba + + + +```markdown +```js live {layout: 'bt'} +option = { + ... +}; +\``` +``` + + + +```js live {layout: 'bt'} +option = { + xAxis: { + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + }, + yAxis: {}, + series: [ + { + type: 'bar', + data: [23, 24, 18, 25, 27, 28, 25] + } + ] +}; +``` + +### Resaltar Lineas de Codigo y Agregar Nombre de Archivos + +Usa. + + + +```markdown +```js{1,3-5}[option.js] +option = { + series: [ + { + type: 'bar', + data: [23, 24, 18, 25, 27, 28, 25] + } + ] +}; +\``` +``` + + + +Effects. + +```js{1,3-5}[option.js] +option = { + series: [ + { + type: 'bar', + data: [23, 24, 18, 25, 27, 28, 25] + } + ] +}; +``` + +## Incrustar Imagenes + +Las imagenes fuente se almacenan bajo `static/images/`. + +```markdown +![image description](images/demo.png) +``` + +### Establecer la Altura y Ancho de la Imagen + +Para el estilo temporal de la pagina actual, puedes escribir directamente en HTML. + +```markdown + +``` + +## Añadir un ejemplo de Iframe + +`src` es la cadena que sigue a `?c=` en la direccion https://echarts.apache.org/examples/en/editor.html?c=line-simple address + +Uso: + +```markdown + +``` + +Resultado: + + +## Añadir un Enlace a un elemento de Opcion + +Uso: + +```markdown + +``` + +Resultado: + + +## Uso de mas componentes + +La documentacion admite el uso de componentes `markdown` registrados globalmente.Ademas del componente `md-example` que se describio anteriormente, los siguientes componentenes tambien estan disponibles. + +### md-alert + +Componentes de Alerta + +```markdown + +Esta es una alerta de Informacion. + +``` + + +Esta es una alerta de Informacion. + + +```markdown + +Esta es una alerta de exito. + +``` + + +Esta es una alerta de Informacion. + + +```markdown + +Esta es una alerta de Advertencia. + +``` + + +Esta es una alerta de Advertencia. + + +```markdown + +Esta es una alerta de peligro. + +``` + + +Esta es una alerta de peligro. + diff --git a/contents/es/posts.yml b/contents/es/posts.yml new file mode 100644 index 000000000..956aaeba2 --- /dev/null +++ b/contents/es/posts.yml @@ -0,0 +1,159 @@ +- title: Empezar + dir: get-started +- title: Basicos + dir: basics + children: + - title: Descargar ECharts + dir: download + - title: Importar ECharts + dir: import + - title: Recursos + dir: resource + draft: true + # - title: Inspiration + # dir: inspiration + - title: Obtener Ayudar + dir: help + - title: Novedades + dir: release-note + children: + - title: ECharts 5 Features + dir: v5-feature + - title: Migration from v4 to v5 + dir: v5-upgrade-guide + - title: 5.2 + dir: 5-2-0 + - title: 5.3 + dir: 5-3-0 + - title: 5.4 + dir: 5-4-0 + - title: 5.5 + dir: 5-5-0 + - title: 5.6 + dir: 5-6-0 +- title: Conceptos + dir: concepts + children: + - title: Contenedor de Graficos + dir: chart-size + - title: Opciones de Graficos + dir: options + draft: true + - title: Series + dir: series + draft: true + - title: Estilos + dir: style + - title: Conjunto de Datos + dir: dataset + - title: Trasformacion de Datos + dir: data-transform + - title: Coordenadas + dir: coordinate + draft: true + - title: Axis + dir: axis + - title: Mapeo Visual + dir: visual-map + - title: Leyenda + dir: legend + - title: Eventos y Acciones + dir: event +- title: Guias de Como Hacer + dir: how-to + children: + - title: Graficos Comunes + dir: chart-types + children: + - title: Barras + dir: bar + children: + - title: Barra Basica + dir: basic-bar + - title: Barra Apilada + dir: stacked-bar + - title: Barra en Carrera + dir: bar-race + - title: Barra Polar + dir: polar-bar + draft: true + - title: Cascada + dir: waterfall + - title: Lineas + dir: line + children: + - title: Linea Basica + dir: basic-line + - title: Linea Apilada + dir: stacked-line + - title: Grafico de Area + dir: area-line + - title: Linea Suavizada + dir: smooth-line + - title: Linea de Escalon + dir: step-line + - title: Pastel + dir: pie + children: + - title: Pastel Basico + dir: basic-pie + - title: Estilo de Anillo + dir: doughnut + - title: Estilo Rosa + dir: rose + - title: Dispersion + dir: scatter + children: + - title: Dispersion Basica + dir: basic-scatter + - title: Movil + dir: mobile + draft: true + - title: Plataforma Cruzada + dir: cross-platform + children: + - title: Renderizado del Lado del Servidor + dir: server + - title: Datos + dir: data + children: + - title: Datos Dinamicos + dir: dynamic-data + - title: Drilldown + dir: drilldown + draft: true + - title: Etiquetas + dir: label + children: + - title: Texto en Ricos + dir: rich-text + - title: Animacion + dir: animation + children: + - title: Transicion de Datos + dir: transition + - title: Interaccion + dir: interaction + children: + - title: Arrastre + dir: drag + - title: Conectar + dir: connect + draft: true + - title: Ajuste Inteligente de Puntero + dir: coarse-pointer +- title: Mejores Practicas + dir: best-practices + children: + - title: Optimizacion para Moviles + dir: mobile + draft: true + - title: Canvas vs. SVG + dir: canvas-vs-svg + - title: Aria + dir: aria +- title: Edit Manual + dir: meta + children: + - title: Editar Guia + dir: edit-guide diff --git a/nuxt.config.js b/nuxt.config.js index ff5e55d76..8be94142c 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -69,16 +69,16 @@ export default { [ 'nuxt-i18n', { - locales: ['en', 'zh'], + locales: ['en', 'zh' ,'es'], strategy: 'prefix', - defaultLocale: 'en', + defaultLocale: 'es', detectBrowserLanguage: { useCookie: true, cookieKey: 'i18n_redirected', onlyOnRoot: true }, vueI18n: { - fallbackLocale: 'en', + fallbackLocale: 'zh', messages: { en: { inThisPage: 'In This Page', @@ -93,6 +93,13 @@ export default { contributorsWithThisDocument: '本文贡献者', editInThisDocumentTip: '编辑本文', editInGithub: '在 GitHub 上编辑本页' + }, + es: { + inThisPage: 'En esta página', + searchHandbook: 'Buscar en el manual', + contributorsWithThisDocument: 'Contribuidores', + editInThisDocumentTip: 'Editar este documento', + editInGithub: 'Editar esta página en GitHub' } } } diff --git a/pages/_.vue b/pages/_.vue index 0f359ecd6..4700e0209 100644 --- a/pages/_.vue +++ b/pages/_.vue @@ -7,7 +7,7 @@
  • {{ link.title }}
    • diff --git a/pages/index.vue b/pages/index.vue index b839fad7f..78bed7462 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -1,8 +1,9 @@ diff --git a/store/index.js b/store/index.js index 2594e1359..1cd1a72b4 100644 --- a/store/index.js +++ b/store/index.js @@ -1,6 +1,8 @@ import zhPosts from '~/contents/zh/posts.yml' import enPosts from '~/contents/en/posts.yml' +import esPosts from '~/contents/es/posts.yml' import config from '~/configs/config' +import { effectScope } from '@vue/composition-api' export const state = () => ({ filled: false, @@ -12,7 +14,8 @@ export const state = () => ({ focusMode: false, posts: { zh: zhPosts, - en: enPosts + en: enPosts, + es: esPosts }, config: config })