{"id":14247,"date":"2021-08-26T23:12:30","date_gmt":"2021-08-26T23:12:30","guid":{"rendered":"https:\/\/freehost.page\/?p=14247"},"modified":"2021-08-26T23:12:30","modified_gmt":"2021-08-26T23:12:30","slug":"tao-cot-du-lieu-phuc-tap-hon","status":"publish","type":"post","link":"https:\/\/kiencang.net\/tao-cot-du-lieu-phuc-tap-hon\/","title":{"rendered":"T\u1ea1o b\u1ea3ng bi\u1ec3u c\u1ed9t, \u0111\u01b0\u1eddng ph\u1ee9c t\u1ea1p h\u01a1n &#8211; h\u1ecdc th\u01b0 vi\u1ec7n JS ECharts (ph\u1ea7n 2)"},"content":{"rendered":"\n<p>Trong ph\u1ea7n m\u1ed9t <a href=\"https:\/\/kiencang.net\/hoc-echarts-qua-vi-du-p1\/\" target=\"_blank\" rel=\"noreferrer noopener\">ch\u00fang ta \u0111\u00e3 l\u00e0m quen v\u1edbi c\u00e1c c\u00fa ph\u00e1p, c\u00e2u l\u1ec7nh c\u01a1 b\u1ea3n c\u1ee7a ECharts<\/a>, trong b\u00e0i 2 n\u00e0y t\u00f4i s\u1ebd th\u1eed t\u00ecm hi\u1ec3u c\u00e1c b\u1ea3ng bi\u1ec3u d\u1ea1ng c\u1ed9t \u0111\u00e3 \u0111\u01b0\u1ee3c \u0111\u1ec1 c\u1eadp trong b\u00e0i \u0111\u1ea7u nh\u01b0ng c\u00f3 nhi\u1ec1u t\u00ednh n\u0103ng h\u01a1n.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_60 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >M\u1ee5c l\u1ee5c<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\" role=\"button\"><label for=\"item-6577d64baa60b\" ><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input aria-label=\"Toggle\" aria-label=\"item-6577d64baa60b\"  type=\"checkbox\" id=\"item-6577d64baa60b\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/kiencang.net\/tao-cot-du-lieu-phuc-tap-hon\/#A_Bieu_do_cot_giup_noi_bat_thong_tin_khi_di_chuot_qua_axis_align_with_tick\" title=\"A. Bi\u1ec3u \u0111\u1ed3 c\u1ed9t gi\u00fap n\u1ed5i b\u1eadt th\u00f4ng tin khi di chu\u1ed9t qua (axis align with tick)\">A. Bi\u1ec3u \u0111\u1ed3 c\u1ed9t gi\u00fap n\u1ed5i b\u1eadt th\u00f4ng tin khi di chu\u1ed9t qua (axis align with tick)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/kiencang.net\/tao-cot-du-lieu-phuc-tap-hon\/#B_Them_ten_bang_dieu_chinh_khoang_cach_an_hien_cot_du_lieu_do_rong_cua_bang\" title=\"B. Th\u00eam t\u00ean b\u1ea3ng, \u0111i\u1ec1u ch\u1ec9nh kho\u1ea3ng c\u00e1ch, \u1ea9n hi\u1ec7n c\u1ed9t d\u1eef li\u1ec7u, \u0111\u1ed9 r\u1ed9ng c\u1ee7a b\u1ea3ng\">B. Th\u00eam t\u00ean b\u1ea3ng, \u0111i\u1ec1u ch\u1ec9nh kho\u1ea3ng c\u00e1ch, \u1ea9n hi\u1ec7n c\u1ed9t d\u1eef li\u1ec7u, \u0111\u1ed9 r\u1ed9ng c\u1ee7a b\u1ea3ng<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/kiencang.net\/tao-cot-du-lieu-phuc-tap-hon\/#C_Chu_thich_cho_bang_co_nhieu_cot_du_lieu_chenh_lech\" title=\"C. Ch\u00fa th\u00edch cho b\u1ea3ng c\u00f3 nhi\u1ec1u c\u1ed9t d\u1eef li\u1ec7u ch\u00eanh l\u1ec7ch\">C. Ch\u00fa th\u00edch cho b\u1ea3ng c\u00f3 nhi\u1ec1u c\u1ed9t d\u1eef li\u1ec7u ch\u00eanh l\u1ec7ch<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/kiencang.net\/tao-cot-du-lieu-phuc-tap-hon\/#D_Bieu_do_duong_xep_chong\" title=\"D. Bi\u1ec3u \u0111\u1ed3 \u0111\u01b0\u1eddng x\u1ebfp ch\u1ed3ng\">D. Bi\u1ec3u \u0111\u1ed3 \u0111\u01b0\u1eddng x\u1ebfp ch\u1ed3ng<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/kiencang.net\/tao-cot-du-lieu-phuc-tap-hon\/#E_Them_cac_bong_bong_chu_thich_gia_tri_cho_bieu_do_duong\" title=\"E. Th\u00eam c\u00e1c bong b\u00f3ng ch\u00fa th\u00edch gi\u00e1 tr\u1ecb cho bi\u1ec3u \u0111\u1ed3 \u0111\u01b0\u1eddng\">E. Th\u00eam c\u00e1c bong b\u00f3ng ch\u00fa th\u00edch gi\u00e1 tr\u1ecb cho bi\u1ec3u \u0111\u1ed3 \u0111\u01b0\u1eddng<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/kiencang.net\/tao-cot-du-lieu-phuc-tap-hon\/#G_Them_du_lieu_khac_vao_cot\" title=\"G. Th\u00eam d\u1eef li\u1ec7u kh\u00e1c v\u00e0o c\u1ed9t\">G. Th\u00eam d\u1eef li\u1ec7u kh\u00e1c v\u00e0o c\u1ed9t<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"A_Bieu_do_cot_giup_noi_bat_thong_tin_khi_di_chuot_qua_axis_align_with_tick\"><\/span>A. Bi\u1ec3u \u0111\u1ed3 c\u1ed9t gi\u00fap n\u1ed5i b\u1eadt th\u00f4ng tin khi di chu\u1ed9t qua (axis align with tick)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"759\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/co-them-thong-tin-1024x759.png\" alt=\"bi\u1ec3u \u0111\u1ed3 b\u1ed5 sung th\u00eam th\u00f4ng tin\" class=\"wp-image-14248\" srcset=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/co-them-thong-tin-1024x759.png 1024w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/co-them-thong-tin-300x222.png 300w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/co-them-thong-tin-768x569.png 768w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/co-them-thong-tin.png 1077w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\u0110o\u1ea1n m\u00e3 m\u1eabu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>option = {\n    tooltip: {\n        trigger: 'axis', \n        axisPointer: { \n            type: 'shadow' \n        }\n    },\n    grid: {\n        left: '3%',\n        right: '4%',\n        bottom: '3%',\n        containLabel: true\n    },\n    xAxis: &#91;\n        {\n            type: 'category',\n            data: &#91;'Th\u1ee9 2', 'Th\u1ee9 3', 'Th\u1ee9 4', 'Th\u1ee9 5', 'Th\u1ee9 6', 'Th\u1ee9 7', 'Ch\u1ee7 nh\u1eadt'],\n            axisTick: {\n                alignWithLabel: true\n            }\n        }\n    ],\n    yAxis: &#91;\n        {\n            type: 'value'\n        }\n    ],\n    series: &#91;\n        {\n            name: 'S\u1ed1 l\u01b0\u1ee3ng ph\u1ecfng v\u1ea5n',\n            type: 'bar',\n            barWidth: '60%',\n            data: &#91;10, 52, 200, 334, 390, 330, 220]\n        }\n    ]\n};<\/code><\/pre>\n\n\n\n<p>Ph\u1ea7n \u0111\u1ea7u ti\u00ean:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>tooltip: {\n        trigger: 'axis', \/\/ k\u00edch ho\u1ea1t tr\u1ee5c t\u1ecda \u0111\u1ed9\n        axisPointer: { \n            type: 'shadow' \/\/ m\u1eb7c \u0111\u1ecbnh l\u00e0 line, gi\u00e1 tr\u1ecb kh\u00e1c l\u00e0 shadow\n        }\n}<\/code><\/pre>\n\n\n\n<p>Ph\u1ea7n th\u1ee9 hai:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    grid: {          \/\/ d\u00f9ng \u0111\u1ec3 c\u0103n l\u1ec1 b\u1ea3ng bi\u1ec3u\n        left: '3%',\n        right: '4%',\n        bottom: '3%',\n        containLabel: true\n    }<\/code><\/pre>\n\n\n\n<p>Ph\u1ea7n th\u1ee9 ba:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>xAxis: &#91;        \/\/ x\u00e1c \u0111\u1ecbnh tr\u1ee5c xAxis l\u00e0 tr\u1ee5c c\u1ea7n k\u00edch ho\u1ea1t\n        {\n            type: 'category',\n            data: &#91;'Th\u1ee9 2', 'Th\u1ee9 3', 'Th\u1ee9 4', 'Th\u1ee9 5', 'Th\u1ee9 6', 'Th\u1ee9 7', 'Ch\u1ee7 nh\u1eadt'],\n            axisTick: {\n                alignWithLabel: true \/\/ s\u1ebd hi\u1ec7n l\u00ean c\u00f9ng tool tip\n            }\n        }\n    ],<\/code><\/pre>\n\n\n\n<p>Ph\u1ea7n cu\u1ed1i c\u00f3 th\u00f4ng tin \u0111\u00e1ng l\u01b0u \u00fd l\u00e0 <code>barWidth: '50%',<\/code> gi\u00fap x\u00e1c \u0111\u1ecbnh \u0111\u1ed9 r\u1ed9ng c\u1ed9t t\u01b0\u01a1ng \u0111\u1ed1i. B\u1ea1n c\u1ee9 \u0111i\u1ec1u ch\u1ec9nh con s\u1ed1 n\u00e0y \u0111\u1ec3 ch\u1ecdn \u0111\u01b0\u1ee3c chi\u1ec1u r\u1ed9ng c\u1ed9t ph\u00f9 h\u1ee3p. V\u00e0 c\u00e1i \u0111\u1ea7u l\u00e0 <code>name<\/code> l\u00e0 t\u00ean c\u1ee7a d\u00e3y d\u1eef li\u1ec7u.<\/p>\n\n\n\n<p>Khi ng\u01b0\u1eddi d\u00f9ng hover chu\u1ed9t qua c\u00e1c c\u1ed9t s\u1ebd c\u00f3 ba th\u00f4ng tin hi\u1ec7n l\u00ean l\u00e0 category + name + th\u00f4ng tin s\u1ed1 trong ph\u1ea7n data.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"B_Them_ten_bang_dieu_chinh_khoang_cach_an_hien_cot_du_lieu_do_rong_cua_bang\"><\/span>B. Th\u00eam t\u00ean b\u1ea3ng, \u0111i\u1ec1u ch\u1ec9nh kho\u1ea3ng c\u00e1ch, \u1ea9n hi\u1ec7n c\u1ed9t d\u1eef li\u1ec7u, \u0111\u1ed9 r\u1ed9ng c\u1ee7a b\u1ea3ng<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"755\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/bieu-do-cot-doi-1024x755.png\" alt=\"bi\u1ec3u \u0111\u1ed3 c\u1ed9t \u0111\u00f4i\" class=\"wp-image-14254\" srcset=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/bieu-do-cot-doi-1024x755.png 1024w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/bieu-do-cot-doi-300x221.png 300w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/bieu-do-cot-doi-768x567.png 768w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/bieu-do-cot-doi.png 1117w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Code m\u1eabu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>option = {\n    title: {\n        text: 'D\u00e2n s\u1ed1 th\u1ebf gi\u1edbi',\n        subtext: 'nh\u1eefng n\u01b0\u1edbc \u0111\u00f4ng d\u00e2n nh\u1ea5t'\n    },\n    tooltip: {\n        trigger: 'axis',\n        axisPointer: {\n            type: 'shadow'\n        }\n    },\n    legend: {\n        data: &#91;'n\u0103m 2011', 'n\u0103m 2012']\n    },\n    grid: {\n        left: '2%',\n        right: '4%',\n        bottom: '3%',\n        containLabel: true\n    },\n    xAxis: {\n        type: 'value',\n        boundaryGap: &#91;0, 0.01]\n    },\n    yAxis: {\n        type: 'category',\n        data: &#91;'Braxil', 'Indosia', 'Hoa K\u1ef3', '\u1ea4n \u0110\u1ed9', 'Trung Qu\u1ed1c', 'D\u00e2n s\u1ed1 to\u00e0n th\u1ebf th\u1edbi']\n    },\n    series: &#91;\n        {\n            name: 'n\u0103m 2011',\n            type: 'bar',\n            data: &#91;18203, 23489, 29034, 104970, 131744, 630230]\n        },\n        {\n            name: 'n\u0103m 2012',\n            type: 'bar',\n            data: &#91;19325, 23438, 31000, 121594, 134141, 681807]\n        }\n    ]\n};<\/code><\/pre>\n\n\n\n<p>Ch\u00fang ta s\u1ebd \u0111i v\u00e0o t\u1eebng ph\u1ea7n m\u1ed9t, v\u00ec \u0111o\u1ea1n m\u00e3 c\u1ee7a c\u00e1i n\u00e0y kh\u00e1 ph\u1ee9c t\u1ea1p.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>title: {\n        text: 'D\u00e2n s\u1ed1 th\u1ebf gi\u1edbi',\n        subtext: 'nh\u1eefng n\u01b0\u1edbc \u0111\u00f4ng d\u00e2n nh\u1ea5t',\n               textStyle: {\n               fontSize: 20,\n               fontFamily: \"Arial\"\n               }\n }<\/code><\/pre>\n\n\n\n<p>\u0110\u1ea7u ti\u00ean l\u00e0 ti\u00eau \u0111\u1ec1 cho b\u1ea3ng, bao g\u1ed3m ti\u00eau \u0111\u1ec1 ch\u00ednh \u1edf ph\u1ea7n <code>text<\/code>, v\u00e0 ti\u00eau \u0111\u1ec1 ph\u1ee5 \u1edf ph\u1ea7n <code>subtext<\/code>. N\u1ebfu b\u1ecb l\u1ed7i font ti\u1ebfng Vi\u1ec7t, b\u1ea1n c\u1ea7n b\u1ed5 sung th\u00eam th\u00f4ng tin v\u1ec1 <code>font-family<\/code> nh\u01b0 \u1edf tr\u00ean, ngo\u00e0i ra \u0111i\u1ec1u ch\u1ec9nh c\u1ea3 k\u00edch c\u1ee1 font n\u1ebfu mu\u1ed1n, c\u00e1i n\u00e0y t\u00f4i c\u00f3 n\u00f3i l\u1ea7n \u0111\u1ea7u ti\u00ean \u1edf b\u00e0i <a href=\"https:\/\/kiencang.net\/bang-bieu-echarts\/\" target=\"_blank\" rel=\"noreferrer noopener\">gi\u1edbi thi\u1ec7u ECharts<\/a>.<\/p>\n\n\n\n<p>Tool tip l\u00e0 c\u00e1i ch\u00fang ta v\u1eeba n\u00f3i \u1edf ph\u1ea7n A \u0111\u1ec3 hi\u1ec3n th\u1ecb th\u00f4ng tin khi hover chu\u1ed9t qua.<\/p>\n\n\n\n<p>C\u00f2n <code>legend<\/code> d\u00f9ng \u0111\u1ec3 \u1ea9n v\u00e0 hi\u1ec7n d\u1eef li\u1ec7u, v\u1edbi 2 nh\u00e3n d\u00e1n n\u1eb1m trong ph\u1ea7n data. V\u00e0 n\u00fat c\u1ee7a n\u00f3 s\u1ebd hi\u1ec7n \u1edf tr\u00ean c\u00f9ng.<\/p>\n\n\n\n<p>Grid \u0111\u1ec3 c\u0103n l\u1ec1.<\/p>\n\n\n\n<p>C\u00e1i <code>boundaryGap<\/code> trong xAxis r\u1ea5t \u0111\u00e1ng ch\u00fa \u00fd, \u0111i\u1ec1u ch\u1ec9nh c\u00e1i n\u00e0y s\u1ebd thay \u0111\u1ed5i gi\u00e1 tr\u1ecb l\u1edbn nh\u1ea5t v\u00e0 nh\u1ecf nh\u1ea5t tr\u00ean tr\u1ee5c ho\u00e0nh qua \u0111\u00f3 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn \u0111\u1ed9 r\u1ed9ng c\u1ee7a c\u1ed9t d\u1eef li\u1ec7u. Trong \u0111a s\u1ed1 tr\u01b0\u1eddng h\u1ee3p, \u0111\u1ec3 nh\u01b0 m\u00e3 m\u1eabu l\u00e0 h\u1ee3p l\u00fd.<\/p>\n\n\n\n<p>\u1ede ph\u1ea7n <code>series<\/code> \u0111\u00e1ng ch\u00fa \u00fd l\u00e0 ch\u00fang ta \u0111\u01b0a c\u1ea3 2 c\u1ed9t d\u1eef li\u1ec7u v\u00e0o b\u1ea3ng v\u1edbi c\u00e1c <code>data name<\/code> l\u1ea7n l\u01b0\u1ee3t l\u00e0 n\u0103m 2011 v\u00e0 n\u0103m 2012. Ch\u00fa \u00fd l\u00e0 c\u00e1i name \u1edf \u0111\u00e2y c\u1ea7n ph\u1ea3i gi\u1ed1ng v\u1edbi c\u00e1i \u1edf <code>legend<\/code> th\u00ec vi\u1ec7c \u0111i\u1ec1u ch\u1ec9nh m\u1edbi \u0111\u01b0\u1ee3c (\u1ea9n \/ hi\u1ec7n d\u1eef li\u1ec7u).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"C_Chu_thich_cho_bang_co_nhieu_cot_du_lieu_chenh_lech\"><\/span>C. Ch\u00fa th\u00edch cho b\u1ea3ng c\u00f3 nhi\u1ec1u c\u1ed9t d\u1eef li\u1ec7u ch\u00eanh l\u1ec7ch<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"767\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/danh-dau-du-lieu-1024x767.png\" alt=\"\u0111\u00e1nh d\u1ea5u d\u1eef li\u1ec7u\" class=\"wp-image-14257\" srcset=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/danh-dau-du-lieu-1024x767.png 1024w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/danh-dau-du-lieu-300x225.png 300w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/danh-dau-du-lieu-768x575.png 768w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/danh-dau-du-lieu.png 1060w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>V\u1edbi b\u1ea3ng c\u00f3 \u0111\u1ed9 ch\u00eanh d\u1eef li\u1ec7u l\u1edbn vi\u1ec7c ch\u00fa th\u00edch th\u00eam cho b\u1ea3ng r\u1ea5t quan tr\u1ecdng, v\u00ec nh\u1eefng b\u1ea3ng c\u00f3 gi\u00e1 tr\u1ecb nh\u1ecf kh\u00f3 bi\u1ebft \u0111\u01b0\u1ee3c gi\u00e1 tr\u1ecb l\u00e0 bao nhi\u00eau ho\u1eb7c\/v\u00e0 trong tr\u01b0\u1eddng h\u1ee3p ch\u00fang ta mu\u1ed1n ch\u1ec9 r\u00f5 gi\u00e1 tr\u1ecb c\u1ee7a m\u1ed9t c\u1ed9t d\u1eef li\u1ec7u n\u00e0o \u0111\u1ea5y.<\/p>\n\n\n\n<p>M\u00e3 m\u1eabu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>option = {\n    title: {\n        text: 'B\u1ea3ng d\u1eef li\u1ec7u mua theo th\u00e1ng',\n        subtext: \"ho\u00e0n to\u00e0n h\u01b0 c\u1ea5u\",\n               textStyle: {\n               fontSize: 20,\n               fontFamily: \"Arial\"\n               }        \n    },\n    tooltip: {\n        trigger: 'axis'\n    },\n    legend: {\n        data: &#91;'b\u1ed1c h\u01a1i', 'l\u01b0\u1ee3ng m\u01b0a']\n    },\n    toolbox: {\n        show: true,\n        feature: {\n            dataView: {show: true, readOnly: false},\n            magicType: {show: true, type: &#91;'line', 'bar']},\n            restore: {show: true},\n            saveAsImage: {show: true}\n        }\n    },\n    calculable: true,\n    xAxis: &#91;\n        {\n            type: 'category',\n            data: &#91;'th\u00e1ng 1', 'th\u00e1ng 2', 'th\u00e1ng 3', 'th\u00e1ng 4', 'th\u00e1ng 5', 'th\u00e1ng 6', 'th\u00e1ng 7', 'th\u00e1ng 8', 'th\u00e1ng 9', 'th\u00e1ng 10', 'th\u00e1ng 11', 'th\u00e1ng 12']\n        }\n    ],\n    yAxis: &#91;\n        {\n            type: 'value'\n        }\n    ],\n    series: &#91;\n        {\n            name: 'b\u1ed1c h\u01a1i',\n            type: 'bar',\n            data: &#91;2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],\n            markPoint: {\n                data: &#91;\n                    {type: 'max', name: 'gi\u00e1 tr\u1ecb l\u1edbn nh\u1ea5t'},\n                    {type: 'min', name: 'gi\u00e1 tr\u1ecb nh\u1ecf nh\u1ea5t'}\n                ]\n            },\n            markLine: {\n                data: &#91;\n                    {type: 'average', name: 'gi\u00e1 tr\u1ecb trung b\u00ecnh'}\n                ]\n            }\n        },\n        {\n            name: 'l\u01b0\u1ee3ng m\u01b0a',\n            type: 'bar',\n            data: &#91;2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],\n            markPoint: {\n                data: &#91;\n                    {name: 'l\u1edbn nh\u1ea5t trong n\u0103m', value: 182.2, xAxis: 7, yAxis: 183},\n                    {name: 'th\u1ea5p nh\u1ea5t trong n\u0103m', value: 2.3, xAxis: 11, yAxis: 3}\n                ]\n            },\n            markLine: {\n                data: &#91;\n                    {type: 'average', name: 'gi\u00e1 tr\u1ecb trung b\u00ecnh'}\n                ]\n            }\n        }\n    ]\n};<\/code><\/pre>\n\n\n\n<p>Ch\u00fang ta s\u1ebd ch\u00fa \u00fd \u0111\u1ebfn ph\u1ea7n <code>markPoint<\/code>. \u0110\u00e2y l\u00e0 \u0111o\u1ea1n m\u00e3 d\u00f9ng \u0111\u1ec3 \u0111\u00e1nh d\u1ea5u d\u1eef li\u1ec7u n\u1ed5i b\u1eadt h\u00ecnh qu\u1ea3 b\u00f3ng bay.<\/p>\n\n\n\n<p>\u0110\u1ed1i v\u1edbi d\u1eef li\u1ec7u c\u00f3 nh\u00e3n <code>\"b\u1ed1c h\u01a1i\"<\/code> ch\u00fang ta th\u1ea5y n\u00f3 s\u1eed d\u1ee5ng c\u00fa ph\u00e1p t\u00ecm gi\u00e1 tr\u1ecb l\u1edbn nh\u1ea5t v\u00e0 nh\u1ecf nh\u1ea5t qua <code>type max<\/code> v\u00e0 <code>min<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>markPoint: {\n      data: &#91;\n              {type: 'max', name: 'gi\u00e1 tr\u1ecb l\u1edbn nh\u1ea5t'},\n              {type: 'min', name: 'gi\u00e1 tr\u1ecb nh\u1ecf nh\u1ea5t'}\n      ]\n}<\/code><\/pre>\n\n\n\n<p>\u0110\u1ed1i v\u1edbi d\u1eef li\u1ec7u c\u00f3 nh\u00e3n <code>\"l\u01b0\u1ee3ng m\u01b0a\"<\/code> ch\u00fang ta th\u1ea5y n\u00f3 s\u1eed d\u1ee5ng c\u00f3 ph\u00e1p l\u1ef1a ch\u1ecdn m\u1ed9t c\u1ed9t c\u1ee5 th\u1ec3, \u1edf \u0111\u00e2y kh\u00f4ng d\u00f9ng type min max m\u00e0 n\u00f3 ch\u1ec9 \u0111\u1ecbnh gi\u00e1 tr\u1ecb n\u00e0o v\u00e0 c\u1ed9t n\u00e0o mu\u1ed1n hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>markPoint: {\n     data: &#91;\n          {name: 'l\u1edbn nh\u1ea5t trong n\u0103m', value: 182.2, xAxis: 7, yAxis: 183},\n          {name: 'th\u1ea5p nh\u1ea5t trong n\u0103m', value: 2.3, xAxis: 11, yAxis: 3}\n\n<\/code><\/pre>\n\n\n\n<p><code>182.2<\/code> l\u00e0 gi\u00e1 tr\u1ecb hi\u1ec3n th\u1ecb. <\/p>\n\n\n\n<p><code>xAxis: 7 <\/code>ngh\u0129a l\u00e0 c\u1ed9t th\u1ee9 7; c\u1ed9t \u0111\u1ebfm t\u1eeb 0 b\u1ea1n nh\u00e9 (gi\u1ed1ng ki\u1ec3u m\u1ea3ng\/array n\u1ebfu b\u1ea1n n\u00e0o h\u1ecdc v\u1ec1 PHP r\u1ed3i).<\/p>\n\n\n\n<p><code>yAxis: 183 <\/code>gi\u00e1 tr\u1ecb n\u00e0y n\u00ean \u0111\u1ec3 l\u1edbn h\u01a1n gi\u00e1 tr\u1ecb max m\u1ed9t ch\u00fat \u0111\u1ec3 ch\u1ec9 \u0111\u1ecbnh v\u1ecb tr\u00ed c\u1ee7a n\u00f3 kh\u00f4ng qu\u00e1 cao so v\u1edbi c\u1ed9t.<\/p>\n\n\n\n<p>C\u00f2n <code>markLine<\/code> t\u1ee9c l\u00e0 \u0111\u00e1nh d\u1ea5u b\u1eb1ng \u0111\u01b0\u1eddng ngang th\u00ec c\u1ea3 2 nh\u00e3n d\u00f9ng chung c\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>markLine: {\n          data: &#91;\n                {type: 'average', name: 'gi\u00e1 tr\u1ecb trung b\u00ecnh'}\n                ]\n }<\/code><\/pre>\n\n\n\n<p>type \u0111\u01b0\u1ee3c d\u00f9ng l\u00e0 <code>average<\/code> ngh\u0129a l\u00e0 trung b\u00ecnh, vi\u1ec7c t\u00ednh to\u00e1n gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n t\u1ef1 \u0111\u1ed9ng.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"D_Bieu_do_duong_xep_chong\"><\/span>D. Bi\u1ec3u \u0111\u1ed3 \u0111\u01b0\u1eddng x\u1ebfp ch\u1ed3ng<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"759\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/bieu-do-duong-xep-chong-1024x759.png\" alt=\"bi\u1ec3u \u0111\u1ed3 \u0111\u01b0\u1eddng x\u1ebfp ch\u1ed3ng\" class=\"wp-image-14263\" srcset=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/bieu-do-duong-xep-chong-1024x759.png 1024w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/bieu-do-duong-xep-chong-300x222.png 300w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/bieu-do-duong-xep-chong-768x569.png 768w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/bieu-do-duong-xep-chong.png 1116w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Bi\u1ec3u \u0111\u1ed3 \u0111\u01b0\u1eddng x\u1ebfp ch\u1ed3ng c\u00f3 th\u1ec3 r\u1ea5t c\u1ea7n thi\u1ebft khi m\u00e0 ch\u00fang ta mu\u1ed1n so s\u00e1nh m\u1ee9c bi\u1ebfn \u0111\u1ed9ng c\u1ee7a 2 d\u1eef li\u1ec7u kh\u00e1c nhau, ch\u1eb3ng h\u1ea1n doanh s\u1ed1 c\u1ee7a 2 m\u1eb7t h\u00e0ng A v\u00e0 B qua t\u1eebng th\u00e1ng.<\/p>\n\n\n\n<p>M\u00e3 m\u1eabu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>option = {\n    title: {\n        text: 'Bi\u1ec3u \u0111\u1ed3 \u0111\u01b0\u1eddng x\u1ebfp ch\u1ed3ng',\n               textStyle: {\n               fontSize: 20,\n               fontFamily: \"Arial\"\n               }    \n    },\n    tooltip: { \/\/ hi\u1ec3n th\u1ecb th\u00f4ng tin khi hover chu\u1ed9t\n        trigger: 'axis'\n    },\n    legend: { \/\/ \u0111\u1ec3 t\u1ea1o nh\u00e3n b\u1eadt t\u1eaft d\u1eef li\u1ec7u\n        data: &#91;'AAA','BBB']\n    },\n    grid: { \/\/ c\u0103n l\u1ec1 cho bi\u1ec3u \u0111\u1ed3\n        left: '3%',\n        right: '4%',\n        bottom: '3%',\n        containLabel: true\n    },\n    toolbox: {\n        feature: {\n            saveAsImage: {}\n        }\n    },\n    xAxis: {\n        type: 'category',\n        boundaryGap: false,\n        data: &#91;'th\u00e1ng 2', 'th\u00e1ng 3', 'th\u00e1ng 4', 'th\u00e1ng 5', 'th\u00e1ng 6', 'th\u00e1ng 7', 'th\u00e1ng 8']\n    },\n    yAxis: {\n        type: 'value'\n    },\n    series: &#91;\n        {\n            name: 'AAA',\n            type: 'line',\n            data: &#91;150, 200, 225, 154, 190, 330, 410]\n        },\n        {\n            name: 'BBB',\n            type: 'line',\n            data: &#91;320, 232, 201, 134, 100, 105, 97]\n        }\n    ]\n};<\/code><\/pre>\n\n\n\n<p>\u1ede ph\u1ea7n m\u00e3 cho xAxis b\u1ea1n ch\u00fa \u00fd \u0111\u1ebfn c\u00e1i <code>boundaryGap: false<\/code>, b\u1ea1n d\u00f9ng hay kh\u00f4ng d\u00f9ng n\u00f3 s\u1ebd \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn m\u1ed1c b\u1eaft \u0111\u1ea7u, n\u1ebfu d\u00f9ng n\u00f3 s\u1ebd \u0111\u00e1nh d\u1ea5u th\u00e1ng theo \u0111i\u1ec3m, c\u00f2n kh\u00f4ng n\u00f3 s\u1ebd \u0111\u00e1nh d\u1ea5u theo kho\u1ea3ng. C\u00e1ch n\u00e0o c\u0169ng \u0111\u01b0\u1ee3c, mi\u1ec5n l\u00e0 b\u1ea1n ch\u1ee7 \u0111\u1ed9ng.<\/p>\n\n\n\n<p>L\u01b0u \u00fd th\u1ee9 hai l\u00e0 \u1edf ph\u1ea7n series, b\u1ea1n mu\u1ed1n \u1edf ch\u1ed7 hover hi\u1ec7n l\u00ean th\u00f4ng tin \u0111\u01b0\u1eddng n\u00e0o tr\u01b0\u1edbc th\u00ec \u1edf ch\u1ed7 series c\u0169ng ph\u1ea3i x\u1ebfp n\u00f3 \u1edf tr\u01b0\u1edbc. Nh\u01b0 m\u00e3 tr\u00ean th\u00ec AAA s\u1ebd hi\u1ec3n th\u1ecb tr\u00ean BBB khi ng\u01b0\u1eddi d\u00f9ng hover qua c\u00e1c \u0111i\u1ec3m d\u1eef li\u1ec7u. \u0110i\u1ec1u n\u00e0y \u0111\u00e1ng l\u01b0u \u00fd trong tr\u01b0\u1eddng h\u1ee3p c\u00e1c \u0111i\u1ec3m d\u1eef li\u1ec7u c\u1ee7a \u0111\u01b0\u1eddng AAA th\u01b0\u1eddng cao h\u01a1n \u0111\u01b0\u1eddng BBB.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"E_Them_cac_bong_bong_chu_thich_gia_tri_cho_bieu_do_duong\"><\/span>E. Th\u00eam c\u00e1c bong b\u00f3ng ch\u00fa th\u00edch gi\u00e1 tr\u1ecb cho bi\u1ec3u \u0111\u1ed3 \u0111\u01b0\u1eddng<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"723\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/chu-thich-du-lieu-duong-1024x723.png\" alt=\"ch\u00fa th\u00edch gi\u00e1 tr\u1ecb cho bi\u1ec3u \u0111\u1ed3 \u0111\u01b0\u1eddng\" class=\"wp-image-14264\" srcset=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/chu-thich-du-lieu-duong-1024x723.png 1024w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/chu-thich-du-lieu-duong-300x212.png 300w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/chu-thich-du-lieu-duong-768x542.png 768w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/chu-thich-du-lieu-duong.png 1110w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Gi\u00fap b\u1ea1n gi\u1ea3i th\u00edch d\u1eef li\u1ec7u r\u00f5 r\u00e0ng h\u01a1n.<\/p>\n\n\n\n<p>M\u00e3 m\u1eabu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>option = {\n    title: {\n        text: 'Nh\u1eefng thay \u0111\u1ed5i v\u1ec1 nhi\u1ec7t \u0111\u1ed9 trong tu\u1ea7n t\u1edbi',\n        subtext: 'ho\u00e0n to\u00e0n h\u01b0 c\u1ea5u',\n               textStyle: {\n               fontSize: 20,\n               fontFamily: \"Arial\"\n               }          \n    },\n    tooltip: {\n        trigger: 'axis'\n    },\n    legend: {\n        data: &#91;'Nhi\u1ec7t \u0111\u1ed9 t\u1ed1i \u0111a', 'nhi\u1ec7t \u0111\u1ed9 t\u1ed1i thi\u1ec3u']\n    },\n    toolbox: {\n        show: true,\n        feature: {\n            dataZoom: {\n                yAxisIndex: 'none'\n            },\n            dataView: {readOnly: false},\n            magicType: {type: &#91;'line', 'bar']},\n            restore: {},\n            saveAsImage: {}\n        }\n    },\n    xAxis: {\n        type: 'category',\n        boundaryGap: false,\n        data: &#91;'th\u1ee9 hai', 'th\u1ee9 ba', 'th\u1ee9 t\u01b0', 'th\u1ee9 n\u0103m', 'th\u1ee9 s\u00e1u', 'th\u1ee9 b\u1ea3y', 'ch\u1ee7 nh\u1eadt']\n    },\n    yAxis: {\n        type: 'value',\n        axisLabel: {\n            formatter: '{value} \u00b0C'\n        }\n    },\n    series: &#91;\n        {\n            name: 'nhi\u1ec7t \u0111\u1ed9 t\u1ed1i \u0111a',\n            type: 'line',\n            data: &#91;10, 11, 13, 11, 12, 12, 9],\n            markPoint: {\n                data: &#91;\n                    {type: 'max', name: 'nhi\u1ec7t \u0111\u1ed9 t\u1ed1i \u0111a'},\n                    {type: 'min', name: 'nhi\u1ec7t \u0111\u1ed9 t\u1ed1i thi\u1ec3u'}\n                ]\n            },\n            markLine: {\n                data: &#91;\n                    {type: 'average', name: 'gi\u00e1 tr\u1ecb trung b\u00ecnh'}\n                ]\n            }\n        },\n        {\n            name: 'nhi\u1ec7t \u0111\u1ed9 t\u1ed1i thi\u1ec3u',\n            type: 'line',\n            data: &#91;1, -2, 2, 5, 3, 2, 0],\n            markPoint: {\n                data: &#91;\n                    {name: 'th\u1ea5p nh\u1ea5t h\u00e0ng tu\u1ea7n', value: -2, xAxis: 1, yAxis: -1.5}\n                ]\n            },\n            markLine: {\n                data: &#91;\n                    {type: 'average', name: 'gi\u00e1 tr\u1ecb trung b\u00ecnh'},\n                    &#91;{\n                        symbol: 'none',\n                        x: '70%',\n                        yAxis: 'max'\n                    }, {\n                        symbol: 'circle',\n                        label: {\n                            position: 'start',\n                            formatter: 't\u1ed1i \u0111a'\n                        },\n                        type: 'max',\n                        name: 'gi\u00e1 tr\u1ecb cao'\n                    }]\n                ]\n            }\n        }\n    ]\n};<\/code><\/pre>\n\n\n\n<p>\u1ede \u0111\u00e2y c\u00f3 m\u1ed9t s\u1ed1 th\u00f4ng tin m\u1edbi m\u00e0 ch\u00fang ta c\u1ea7n l\u01b0u \u00fd.<\/p>\n\n\n\n<p>\u1ede ph\u1ea7n tr\u1ee5c tung y ch\u00fang ta th\u1ea5y ki\u1ec3u d\u1eef li\u1ec7u \u0111\u01b0\u1ee3c g\u00e1n \u0111\u1ecbnh d\u1ea1ng l\u00e0 nhi\u1ec7t \u0111\u1ed9.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>axisLabel: {\n     formatter: '{value} \u00b0C'\n}<\/code><\/pre>\n\n\n\n<p>\u1ede ph\u1ea7n series ch\u00fang ta th\u1ea5y l\u1ea1i c\u1ea5u tr\u00fac <code>name<\/code> d\u00e0nh \u0111\u1ec3 d\u00e1n nh\u00e3n d\u1eef li\u1ec7u, c\u0169ng nh\u01b0 <code>markPoint<\/code>, <code>markLine<\/code> \u0111\u1ec3 \u0111\u00e1nh d\u1ea5u d\u1eef li\u1ec7u d\u1ea1ng bong b\u00f3ng v\u00e0 \u0111\u01b0\u1eddng. C\u00f2n min, max, average l\u00e0 nh\u1ecf nh\u1ea5t, l\u1edbn nh\u1ea5t v\u00e0 trung b\u00ecnh. T\u1ea5t c\u1ea3 \u0111\u01b0\u1ee3c t\u1ea1o t\u1ef1 \u0111\u1ed9ng.<\/p>\n\n\n\n<p>Ph\u1ea7n cu\u1ed1i c\u1ee7a ch\u1ed7 <code>markLine<\/code> d\u00e0nh cho nh\u00e3n d\u1eef li\u1ec7u nhi\u1ec7t \u0111\u1ed9 t\u1ed1i thi\u1ec3u, ch\u00fang ta th\u1ea5y nhi\u1ec1u c\u00e2u l\u1ec7nh m\u1edbi. Ph\u1ea7n n\u00e0y t\u00f4i c\u0169ng ch\u01b0a hi\u1ec3u h\u1ebft n\u00ean s\u1ebd kh\u00f4ng gi\u1ea3i th\u00edch g\u00ec th\u00eam.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"G_Them_du_lieu_khac_vao_cot\"><\/span>G. Th\u00eam d\u1eef li\u1ec7u kh\u00e1c v\u00e0o c\u1ed9t<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1017\" height=\"793\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/cot-2chieu-du-lieu.png\" alt=\"c\u1ed9t c\u00f3 2 chi\u1ec1u d\u1eef li\u1ec7u\" class=\"wp-image-14303\" srcset=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/cot-2chieu-du-lieu.png 1017w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/cot-2chieu-du-lieu-300x234.png 300w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/cot-2chieu-du-lieu-768x599.png 768w\" sizes=\"(max-width: 1017px) 100vw, 1017px\" \/><\/figure><\/div>\n\n\n\n<p>Th\u00f4ng th\u01b0\u1eddng d\u1eef li\u1ec7u c\u1ed9t l\u00e0 m\u1ed9t chi\u1ec1u, ch\u1eb3ng h\u1ea1n b\u1ea1n \u0111\u1ed3 th\u1ecb h\u00f3a s\u1ed1 l\u01b0\u1ee3ng b\u00e1n ra c\u1ee7a t\u1eebng s\u1ea3n ph\u1ea9m trong c\u00f4ng ty.<\/p>\n\n\n\n<p>Tuy nhi\u00ean \u0111\u00f4i khi b\u1ea1n c\u1ea7n b\u1ed5 sung th\u00eam th\u00f4ng tin, v\u00ed d\u1ee5, ng\u01b0\u1eddi d\u00f9ng \u0111\u00e1nh gi\u00e1 th\u1ebf n\u00e0o v\u1ec1 s\u1ea3n ph\u1ea9m. V\u00e0 th\u00f4ng tin n\u00e0y v\u00e0 th\u00f4ng tin doanh s\u1ed1 l\u00e0 \u0111\u1ed9c l\u1eadp, ch\u00fang kh\u00f4ng th\u1ec3 suy ra t\u1eeb nhau. M\u1ed9t s\u1ea3n ph\u1ea9m \u0111\u01b0\u1ee3c ng\u01b0\u1eddi d\u00f9ng \u0111\u00e1nh gi\u00e1 c\u00f3 ch\u1ea5t l\u01b0\u1ee3ng t\u1ed1t ch\u01b0a ch\u1eafc \u0111\u00e3 b\u00e1n \u0111\u01b0\u1ee3c nhi\u1ec1u b\u1eb1ng s\u1ea3n ph\u1ea9m c\u00f3 ch\u1ea5t l\u01b0\u1ee3ng kh\u00e1&#8230;<\/p>\n\n\n\n<p>Gi\u1edd ch\u00fang ta s\u1ebd \u0111i v\u00e0o m\u00e3 m\u1eabu, l\u1eddi gi\u1ea3i th\u00edch k\u00e8m ngay trong m\u00e3:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>option = {\n    dataset: {\n        source: &#91;\n            &#91;'score', 'amount', 'product'], \/\/ th\u00f4ng tin d\u1eef li\u1ec7u \u0111\u1ea7u v\u00e0o\n            &#91;89.3, 58212, 'Matcha Latte'], \/\/ bao g\u1ed3m hai c\u1ed9t s\u1ed1\n            &#91;57.1, 78254, 'Milk Tea'], \/\/ score \u0111\u01b0\u1ee3c th\u1ec3 hi\u1ec7n d\u01b0\u1edbi d\u1ea1ng m\u00e0u s\u1eafc\n            &#91;74.4, 41032, 'Cheese Cocoa'], \/\/ amounnt \u0111\u01b0\u1ee3c chuy\u1ec3n th\u00e0nh chi\u1ec1u d\u00e0i c\u1ed9t\n            &#91;50.1, 12755, 'Cheese Brownie'],\n            &#91;89.7, 20145, 'Matcha Cocoa'],\n            &#91;68.1, 79146, 'Tea'],\n            &#91;19.6, 91852, 'Orange Juice'],\n            &#91;10.6, 101852, 'Lemon Juice'],\n            &#91;32.7, 20112, 'Walnut Brownie']\n        ]\n    },\n    grid: {containLabel: true},\n    xAxis: {name: 'amount'}, \/\/ tr\u1ee5c ho\u00e0nh x \u0111\u01b0\u1ee3c g\u00e1n t\u00ean amount\n    yAxis: {type: 'category'}, \/\/ tr\u1ee5c tung y \u0111\u01b0\u1ee3c g\u00e1n ki\u1ec3u \/ type l\u00e0 nh\u00f3m\n    visualMap: {\n        orient: 'horizontal', \/\/ c\u1ed9t m\u00e0u s\u1eafc n\u1eb1m ngang\n        left: 'center', \/\/ \u0111\u1eb7t \u1edf v\u1ecb tr\u00ed ch\u00ednh gi\u1eefa\n        min: 10, \/\/ gi\u00e1 tr\u1ecb nh\u1ecf nh\u1ea5t l\u00e0 10, ch\u1ecdn gi\u00e1 tr\u1ecb n\u00e0y nh\u1ecf h\u01a1n m\u1ed9t ch\u00fat so v\u1edbi gi\u00e1 tr\u1ecb th\u1ea5p nh\u1ea5t trong score\n        max: 100, \/\/ gi\u00e1 tr\u1ecb l\u1edbn nh\u1ea5t l\u00e0 100, kho\u1ea3ng gi\u00e1 tr\u1ecb ch\u1ecdn c\u1ea7n ph\u00f9 h\u1ee3p, \u0111\u00e2y l\u00e0 gi\u00e1 tr\u1ecb h\u1ee3p l\u00fd cho score (gi\u00e1 tr\u1ecb cao nh\u1ea5t l\u00e0 g\u1ea7n 90)\n        text: &#91;'\u0110i\u1ec3m cao', '\u0110i\u1ec3m th\u1ea5p'], \/\/ v\u0103n b\u1ea3n \u1edf 2 b\u00ean c\u1ed9t m\u00e0u gi\u1ea3i th\u00edch m\u00e0u n\u00e0o \u0111i\u1ec3m cao h\u01a1n\n        \/\/ K\u1ebft n\u1ed1i c\u1ed9t score v\u1edbi d\u1ea3i m\u00e0u s\u1eafc\n        dimension: 0, \/\/ gi\u00e1 tr\u1ecb n\u00e0y ch\u1ec9 \u0111\u1ebfn c\u1ed9t score, n\u1ebfu b\u1ea1n \u0111\u1ec3 l\u00e0 1, n\u00f3 s\u1ebd ch\u1ec9 \u0111\u1ebfn c\u1ed9t amount\n        inRange: {\n            color: &#91;'#65B581', '#FFCE34', '#FD665F'] \/\/ d\u1ea3i m\u00e0u s\u1eafc m\u00e0 ch\u00fang ta ch\u1ecdn\n        }\n    },\n    series: &#91;\n        {\n            type: 'bar', \/\/ ki\u1ec3u thanh\n            encode: {\n                 \/\/ g\u00e1n d\u1eef li\u1ec7u \u1edf c\u1ed9t amount cho tr\u1ee5c ho\u00e0nh x\n                x: 'amount',\n                \n                \/\/ g\u00e1n th\u00f4ng tin \u1edf c\u1ed9t product cho tr\u1ee5c tung\n                y: 'product'\n            }\n        }\n    ]\n};<\/code><\/pre>\n\n\n\n<p>OK. Nh\u01b0 v\u1eady l\u00e0 t\u1ea1m \u1ed5n v\u1edbi c\u1ed9t r\u1ed3i, c\u00f3 th\u1ec3 <a href=\"https:\/\/kiencang.net\/bieu-do-tron-co-ban-echart\/\" target=\"_blank\" rel=\"noreferrer noopener\">b\u00e0i sau ch\u00fang ta s\u1ebd t\u00ecm hi\u1ec3u bi\u1ec3u \u0111\u1ed3 tr\u00f2n<\/a>, d\u1ea1ng \u00edt d\u00f9ng h\u01a1n c\u1ed9t nh\u01b0ng c\u0169ng kh\u00e1 ph\u1ed5 bi\u1ebfn.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Trong ph\u1ea7n m\u1ed9t ch\u00fang ta \u0111\u00e3 l\u00e0m quen v\u1edbi c\u00e1c c\u00fa ph\u00e1p, c\u00e2u l\u1ec7nh c\u01a1 b\u1ea3n c\u1ee7a ECharts, trong b\u00e0i 2 n\u00e0y t\u00f4i s\u1ebd th\u1eed t\u00ecm hi\u1ec3u c\u00e1c b\u1ea3ng bi\u1ec3u d\u1ea1ng c\u1ed9t \u0111\u00e3 \u0111\u01b0\u1ee3c \u0111\u1ec1 c\u1eadp trong b\u00e0i \u0111\u1ea7u nh\u01b0ng c\u00f3 nhi\u1ec1u t\u00ednh n\u0103ng h\u01a1n. A. Bi\u1ec3u \u0111\u1ed3 c\u1ed9t gi\u00fap n\u1ed5i b\u1eadt th\u00f4ng tin khi &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[236],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>T\u1ea1o b\u1ea3ng bi\u1ec3u c\u1ed9t, \u0111\u01b0\u1eddng ph\u1ee9c t\u1ea1p h\u01a1n - h\u1ecdc th\u01b0 vi\u1ec7n JS ECharts (ph\u1ea7n 2) &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kiencang.net\/tao-cot-du-lieu-phuc-tap-hon\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"T\u1ea1o b\u1ea3ng bi\u1ec3u c\u1ed9t, \u0111\u01b0\u1eddng ph\u1ee9c t\u1ea1p h\u01a1n - h\u1ecdc th\u01b0 vi\u1ec7n JS ECharts (ph\u1ea7n 2) &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"Trong ph\u1ea7n m\u1ed9t ch\u00fang ta \u0111\u00e3 l\u00e0m quen v\u1edbi c\u00e1c c\u00fa ph\u00e1p, c\u00e2u l\u1ec7nh c\u01a1 b\u1ea3n c\u1ee7a ECharts, trong b\u00e0i 2 n\u00e0y t\u00f4i s\u1ebd th\u1eed t\u00ecm hi\u1ec3u c\u00e1c b\u1ea3ng bi\u1ec3u d\u1ea1ng c\u1ed9t \u0111\u00e3 \u0111\u01b0\u1ee3c \u0111\u1ec1 c\u1eadp trong b\u00e0i \u0111\u1ea7u nh\u01b0ng c\u00f3 nhi\u1ec1u t\u00ednh n\u0103ng h\u01a1n. A. Bi\u1ec3u \u0111\u1ed3 c\u1ed9t gi\u00fap n\u1ed5i b\u1eadt th\u00f4ng tin khi &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/tao-cot-du-lieu-phuc-tap-hon\/\" \/>\n<meta property=\"og:site_name\" content=\"Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/anhducnguyen87\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-26T23:12:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/co-them-thong-tin-1024x759.png\" \/>\n<meta name=\"author\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"T\u1ea1o b\u1ea3ng bi\u1ec3u c\u1ed9t, \u0111\u01b0\u1eddng ph\u1ee9c t\u1ea1p h\u01a1n - h\u1ecdc th\u01b0 vi\u1ec7n JS ECharts (ph\u1ea7n 2) &#8226; Ki\u1ebfn c\u00e0ng","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kiencang.net\/tao-cot-du-lieu-phuc-tap-hon\/","og_locale":"vi_VN","og_type":"article","og_title":"T\u1ea1o b\u1ea3ng bi\u1ec3u c\u1ed9t, \u0111\u01b0\u1eddng ph\u1ee9c t\u1ea1p h\u01a1n - h\u1ecdc th\u01b0 vi\u1ec7n JS ECharts (ph\u1ea7n 2) &#8226; Ki\u1ebfn c\u00e0ng","og_description":"Trong ph\u1ea7n m\u1ed9t ch\u00fang ta \u0111\u00e3 l\u00e0m quen v\u1edbi c\u00e1c c\u00fa ph\u00e1p, c\u00e2u l\u1ec7nh c\u01a1 b\u1ea3n c\u1ee7a ECharts, trong b\u00e0i 2 n\u00e0y t\u00f4i s\u1ebd th\u1eed t\u00ecm hi\u1ec3u c\u00e1c b\u1ea3ng bi\u1ec3u d\u1ea1ng c\u1ed9t \u0111\u00e3 \u0111\u01b0\u1ee3c \u0111\u1ec1 c\u1eadp trong b\u00e0i \u0111\u1ea7u nh\u01b0ng c\u00f3 nhi\u1ec1u t\u00ednh n\u0103ng h\u01a1n. A. Bi\u1ec3u \u0111\u1ed3 c\u1ed9t gi\u00fap n\u1ed5i b\u1eadt th\u00f4ng tin khi &hellip;","og_url":"https:\/\/kiencang.net\/tao-cot-du-lieu-phuc-tap-hon\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2021-08-26T23:12:30+00:00","og_image":[{"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/08\/co-them-thong-tin-1024x759.png"}],"author":"Nguy\u1ec5n \u0110\u1ee9c Anh","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Nguy\u1ec5n \u0110\u1ee9c Anh","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"12 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/tao-cot-du-lieu-phuc-tap-hon\/","url":"https:\/\/kiencang.net\/tao-cot-du-lieu-phuc-tap-hon\/","name":"T\u1ea1o b\u1ea3ng bi\u1ec3u c\u1ed9t, \u0111\u01b0\u1eddng ph\u1ee9c t\u1ea1p h\u01a1n - h\u1ecdc th\u01b0 vi\u1ec7n JS ECharts (ph\u1ea7n 2) &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2021-08-26T23:12:30+00:00","dateModified":"2021-08-26T23:12:30+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/tao-cot-du-lieu-phuc-tap-hon\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/tao-cot-du-lieu-phuc-tap-hon\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/tao-cot-du-lieu-phuc-tap-hon\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"T\u1ea1o b\u1ea3ng bi\u1ec3u c\u1ed9t, \u0111\u01b0\u1eddng ph\u1ee9c t\u1ea1p h\u01a1n &#8211; h\u1ecdc th\u01b0 vi\u1ec7n JS ECharts (ph\u1ea7n 2)"}]},{"@type":"WebSite","@id":"https:\/\/kiencang.net\/#website","url":"https:\/\/kiencang.net\/","name":"Ki\u1ebfn c\u00e0ng","description":"\u00d4m l\u00fd thuy\u1ebft, h\u00f4n th\u1ef1c h\u00e0nh","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kiencang.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"vi"},{"@type":"Person","@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16","name":"Nguy\u1ec5n \u0110\u1ee9c Anh","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/kiencang.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","caption":"Nguy\u1ec5n \u0110\u1ee9c Anh"},"description":"Sinh n\u0103m 1987, t\u1ed1t nghi\u1ec7p Cao \u0111\u1eb3ng th\u1ef1c h\u00e0nh FPT qu\u00e3ng 2014, chuy\u00ean ng\u00e0nh Thi\u1ebft k\u1ebf website. T\u00f4i th\u00edch Content, SEO, Ads, T\u0103ng t\u1ed1c website v\u00e0 Th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed. B\u00ean c\u1ea1nh b\u00e0i t\u1ef1 vi\u1ebft, t\u00f4i c\u0169ng d\u1ecbch nhi\u1ec1u n\u1ed9i dung th\u00fa v\u1ecb c\u1ee7a c\u00e1c t\u00e1c gi\u1ea3 kh\u00e1c nhau. FB c\u00e1 nh\u00e2n: facebook.com\/anhducnguyen87. Email li\u00ean h\u1ec7: guiemailchotoi@gmail.com","sameAs":["https:\/\/www.facebook.com\/anhducnguyen87\/"],"url":"https:\/\/kiencang.net\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14247"}],"collection":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/comments?post=14247"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14247\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}