{"id":1014,"date":"2024-11-24T14:01:50","date_gmt":"2024-11-24T05:01:50","guid":{"rendered":"https:\/\/www.fsquare.co.kr\/?p=1014"},"modified":"2024-11-24T14:11:59","modified_gmt":"2024-11-24T05:11:59","slug":"nativescript-vue-mobile-%ed%99%98%ea%b2%bd%ec%97%90-highchart-%ec%b6%94%ea%b0%80","status":"publish","type":"post","link":"https:\/\/www.fsquare.co.kr\/?p=1014","title":{"rendered":"Nativescript-vue \/ mobile \ud658\uacbd\uc5d0 Highchart \ucd94\uac00"},"content":{"rendered":"

nativescript-vue\uc5d0 \ucd94\uac00\ud560 \uc218 \uc788\ub294 library( plugin )\uc740 \uba87\uac00\uc9c0\uac00 \uc788\uc73c\ub098 \uc6f9 \uac1c\ubc1c \uc2dc highchart\ub97c \uc8fc\ub85c \uc0ac\uc6a9\ud55c \ub355\ubd84\uc5d0 highchart\uac00 \uac00\uc7a5 \uc775\uc219\ud588\ub2e4.<\/p>\n

\uadf8\ub7ec\ub098 nativescript-vue \ud658\uacbd\uc5d0 highchart\ub97c \ucd94\uac00\ud558\ub294 \uc77c\uc740 \ub2e4\ub978 plugin\ub4e4 \ucc98\ub7fc \ub179\ub85d\ud558\uc9c0 \uc54a\uc558\ub2e4.<\/p>\n

\uba3c\uc800 nativescript\uc758 \ubc84\uc804\uc744 \ud655\uc778\ud574 \ubcf4\uc558\ub2e4.<\/p>\n

C:\\> ns --version<\/em>\r\n8.8.2<\/em>\r\n\u221a Up to date.<\/em><\/pre>\n
nativescript-vue\ub294 2.9.3 \ubc84\uc804\uc778 \uac83\uc744 \ud655\uc778 \ud558\uc600\ub2e4.<\/p>\n
web\uc5d0 \ud3ec\ud568\uc2dc\ud0ac \ub54c\ub294 highchart\uc758 javascript\ub97c <script > tag\ub97c \uc774\uc6a9\ud558\uc5ec \uadf8\ub0e5 \ud3ec\ud568\uc2dc\ud0ac \uc218\ub3c4 \uc788\ub2e4. \ud558\uc9c0\ub9cc mobile\uc5d0\uc11c\ub294 plugin\uc73c\ub85c \uc571\uc5d0 \ud3ec\ud568\uc2dc\ud0a4\ub294 \uac83\uc774 \uc18d\ub3c4 \uba74\uc5d0\uc11c\ub098 \ud50c\ub7ab\ud3fc\uc758 \ub2e4\uc591\uc131\uc5d0 \ub9de\ucd94\uc5b4 \uc801\uc808\ud558\uace0 vue framework\uc744 \uc774\uc6a9\ud55c \ud3b8\uc758\uc131\uc744 \ucd5c\ub300\ud55c \uc0b4\ub9ac\uae30 \uc704\ud574 app.js\uc5d0\uc11c \ucd08\uae30\ud654\ud558\uc5ec tag\ub85c \ubd88\ub7ec \uc4f8 \uc218 \uc788\ub3c4\ub85d \ud558\uc600\ub2e4.<\/p>\n
\uc6b0\uc120 plugin\uc744 \uc124\uce58\ud55c\ub2e4.<\/p>\n
C:\\Project\\sample> ns plugin add @mhtghn\/nativescript-highcharts<\/em><\/pre>\n
\uc774 \ub54c \uc8fc\uc758\ud560 \uac83\uc740 \ubcf8\uc778\uc774 \uc0ac\uc6a9\ud558\ub294 nativescript\uc758 \ubc84\uc804\uc774 7.0\ubcf4\ub2e4 \ub0ae\uc740 \uacbd\uc6b0\uc5d0\ub294 \uacfc\uac70 \ubc84\uc804\uc744 \uc0ac\uc6a9\ud574\uc57c \ud55c\ub2e4.<\/p>\n
C:\\Project\\sample> ns plugin add\u00a0 nativescript-ui-highcharts<\/em><\/pre>\n
 <\/p>\n
\ud504\ub85c\uc81d\ud2b8\uc758 app.js\ub97c \uc5f4\uc5b4 \ub2e4\uc74c \uad6c\ubb38\ub4e4\uc744 \ucd94\uac00\ud55c\ub2e4.<\/p>\n
import highcharts from ‘@mhtghn\/nativescript-highcharts’<\/em><\/p>\n
\n
<\/pre>\n
\n
\n
Vue.registerElement(<\/em>\r\n  \u00a0 'Highcharts',<\/em>\r\n  \u00a0 () => require('@mhtghn\/nativescript-highcharts').Highcharts<\/em>\r\n);  <\/em><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
\uc774\uc81c \uc571 \ub0b4\uc5d0\uc11c Highcharts\ub97c \ud0dc\uadf8\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4. \ucd08\uae30\ud654\ub97c Vue.use()\ub098 Vue.components() method\ub85c\ub294 \uc2dc\ub3c4\ud574 \ubcf4\uc558\uc73c\ub098 \uc815\uc0c1\uc801\uc73c\ub85c \ub4f1\ub85d\ub418\uc9c0 \uc54a\uc558\ub2e4.<\/p>\n
<Highcharts\u00a0 :options=chartOpt height=”300″><\/Highcharts><\/em><\/p>\n
\n
<\/div>\n<\/div>\n
“chartOpt”\ub85c \ud45c\uc2dc\ub41c chart option\uc740 string\uc73c\ub85c \uc785\ub825 \ubc1b\uc73c\ubbc0\ub85c chart\uc758 option\uc774 object\uc778 \uacbd\uc6b0 JSON.stringify()\ub97c \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n
\n
computed: {<\/em>\r\n  \u00a0 \u00a0 chartOpt() {<\/em>\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 return JSON.stringify( this.chartOptions );<\/em>\r\n  \u00a0 \u00a0 }<\/em>\r\n},<\/em><\/pre>\n<\/div>\n
\uadf8\ub9ac\uace0 chart\uc758 \uc0ac\uc774\uc988\ub97c \uc9c0\uc815\ud558\uae30 \uc704\ud574\uc11c\ub294 \ub450 \uad70\ub370\uc11c \uc9c0\uc815\ud574 \uc8fc\uc5b4\uc57c \ud55c\ub2e4. \uc6b0\uc120 tag\uc5d0\uc11c \uc9c0\uc815\ud55c\ub2e4.<\/div>\n
<\/div>\n
<Highcharts\u00a0 :options=chartOpt height=”300″<\/strong>><\/Highcharts><\/em><\/div>\n
\uc774 \uacbd\uc6b0 tag\ub85c \uc9c0\uc815\ub41c Highchart\uc758 \ud654\uba74\uc5d0\uc11c \ud45c\uc2dc\ub418\ub294 size\ub294 \uc798 \uc9c0\uc815\ub418\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc73c\ub098 chart\ub294 \ud06c\uae30\ub294 \uc81c\ub300\ub85c \ucd08\uae30\ud654\ub418\uc9c0 \uc54a\uc544 chart\uac00 \uc9e4\ub9ac\ub294 \ud604\uc0c1\uc774 \ub098\ud0c0\ub09c\ub2e4.<\/p>\n
\uc774 \uacbd\uc6b0 chart\uc758 option\uc5d0 \ud06c\uae30\ub97c \uc9c0\uc815\ud558\uc5ec \ucd08\uae30\ud654 size\ub97c \uc9c0\uc815\ud55c\ub2e4.<\/p>\n
chartOptions : \u00a0{<\/span><\/p>\n
\n
  \u00a0 \u00a0 \u00a0 \u00a0chart: {\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0   \u00a0 type: 'column',\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 height: 300<\/strong>\r\n \u00a0 \u00a0 \u00a0 \u00a0 },<\/pre>\n<\/div>\n
<\/div>\n
\"\"<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
nativescript-vue\uc5d0 highchart plugin \uc801\uc6a9<\/p>\n","protected":false},"author":1,"featured_media":1017,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,36,28],"tags":[50],"class_list":["post-1014","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-it","category-nativescript","category-vue","tag-nativescript-vue-highchart"],"_links":{"self":[{"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/1014","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1014"}],"version-history":[{"count":3,"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/1014\/revisions"}],"predecessor-version":[{"id":1018,"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/1014\/revisions\/1018"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=\/wp\/v2\/media\/1017"}],"wp:attachment":[{"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1014"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1014"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1014"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}