{"id":974,"date":"2019-06-15T21:48:52","date_gmt":"2019-06-15T12:48:52","guid":{"rendered":"https:\/\/ito-u-oti.com\/?p=974"},"modified":"2019-06-15T21:48:56","modified_gmt":"2019-06-15T12:48:56","slug":"post-974","status":"publish","type":"post","link":"https:\/\/ito-u-oti.com\/?p=974","title":{"rendered":"\u3010RequireJS\u3011\u3010HighchartsJS\u3011requireJS\u304b\u3089highchartsJS\u3092\u4f7f\u3046"},"content":{"rendered":"\n

\u524d\u56de\u8a18\u4e8b\u304b\u3089\u306e\u6d3e\u751f\u3067\u3059\u3002
\u3010RequireJS\u3011\u3010BackboneJS\u3011requireJS\u304b\u3089backboneJS\u3092\u4f7f\u3046\uff08View+Model\uff09<\/a>
HighchartsJS\u306fJS\u306e\u30b0\u30e9\u30d5\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002
\u203b\u5546\u7528\u4f7f\u7528\u304c\u6709\u6599\u3067\u3059\u3002<\/p>\n\n\n\n

\u524d\u63d0<\/h2>\n\n\n\n

\u6982\u8981<\/h3>\n\n\n\n

requireJS\u3092\u4f7f\u7528\u3057\u3066HighchartsJS\u3092\u8aad\u307f\u8fbc\u307f\u3001\u30b0\u30e9\u30d5\u3092\u753b\u9762\u306b\u8868\u793a\u3055\u305b\u308b\u3002<\/p>\n\n\n\n

highchartsJS<\/h2>\n\n\n\n

\u307e\u305a\u306f\u7d14\u7c8b\u306bhighchartJS\u3060\u3051\u3092\u4f7f\u7528\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n\n\n\n

index.html<\/h3>\n\n\n
\n<!DOCTYPE html>\n<html lang="ja">\n    <head>\n        <meta charset="utf-8">\n        <title><\/title>\n        <script src="http:\/\/code.highcharts.com\/highcharts.js"><\/script>\n    <\/head>\n    <body>\n        <div id="container"><\/div>\n    <\/body>\n    <script>\n        Highcharts.chart('container', {\n            chart: {\n                renderTo: 'chart',\n          \t    type: 'bar'\n            },\n            title: {\n          \t    text: 'Hello Highcharts'\n            },\n            xAxis: {\n          \t    categories: ['Hello', 'World']\n            },\n            yAxis: {\n          \t    title: 'Value'\n            },\n            series: [{\n          \t    name: 'Highcharts Intro',\n          \t    data: [1, 2]\n            }]\n        });\n    <\/script>\n<\/html>\n<\/pre><\/div>\n\n\n
\u8868\u793a<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u3059\u3054\u304f\u7c21\u5358\u306a\u68d2\u30b0\u30e9\u30d5\u3067\u3059\u3002
\u30b0\u30e9\u30d5\u81ea\u4f53\u306e\u4f7f\u3044\u65b9\u306f\u516c\u5f0f\u306b\u8272\u3005\u30b5\u30f3\u30d7\u30eb\u304c\u3042\u308b\u306e\u3067\u898b\u308b\u3068\u3044\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
requireJS+highchartsJS\uff08html\u30d9\u30fc\u30b9\uff09<\/h2>\n\n\n\n
html\u4e0a\u3067\u305d\u306e\u307e\u307e\u4f7f\u3046\u3068\u3053\u3093\u306a\u611f\u3058\u306b<\/p>\n\n\n
\n<!DOCTYPE html>\n<html lang="ja">\n    <head>\n        <meta charset="utf-8">\n        <title><\/title>\n        <script src="https:\/\/requirejs.org\/docs\/release\/2.3.6\/minified\/require.js"><\/script>\n        <script>\n            require.config({\n                packages: [{\n                    name: 'highcharts',\n                    main: 'highcharts'\n                }],\n                paths: {\n                    \/\/ Change this to your server if you do not wish to use our CDN.\n                    'highcharts': 'https:\/\/code.highcharts.com'\n                }\n            });\n        <\/script>\n    <\/head>\n    <body>\n        <div id="container"><\/div>\n    <\/body>\n    <script>\n        require(['highcharts'],function(hi){\n            hi.chart('container', {\n                chart: {\n                    renderTo: 'chart',\n          \t         type: 'bar'\n                 },\n                 title: {\n          \t          text: 'Hello Highcharts'\n                  },\n                  xAxis: {\n          \t           categories: ['Hello', 'World']\n                   },\n                   yAxis: {\n          \t            title: 'Value'\n                    },\n                    series: [{\n          \t             name: 'Highcharts Intro',\n          \t              data: [1, 2]\n                      }]\n                  });\n              });\n    <\/script>\n<\/html>\n\n<\/pre><\/div>\n\n\n
config\u306e\u8a2d\u5b9a\u306b\u6ce8\u610f\u3057\u3066\u4e0b\u3055\u3044\u3002
highcharts\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u304c7\u4ee5\u964d\u306b\u3064\u3044\u3066\u306f\u4f9d\u5b58\u95a2\u4fc2\u306f\u7121\u304f\u306a\u3063\u3066\u3044\u307e\u3059\u3002jquery\u3068\u304b\u4f7f\u308f\u306a\u304f\u3066\u826f\u3044\u3067\u3059\u3002
\u307e\u305f\u3001highcharts\u3092\u4f7f\u7528\u3059\u308b\u3068\u304d\u306b\u306fpackages\u3092\u8a2d\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002
packages\u306e\u8a73\u7d30\u306f\u516c\u5f0f<\/a>\u306b\u8aac\u660e\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\u8868\u793a<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u3055\u3063\u304d\u3068\u5909\u308f\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n
requireJS+highchartsJS\uff08js\u5207\u308a\u51fa\u3057\uff09<\/h2>\n\n\n\n
index.html\u306e\u307f\u304b\u3089\u3001\u524d\u56de\u306e\u8a18\u4e8b\u306e\u3088\u3046\u306bjs\u3068html\u3092\u5206\u3051\u3066\u307f\u307e\u3059\u3002<\/p>\n\n\n\n
\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\u6210<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
index.html<\/h3>\n\n\n
\n<!DOCTYPE html>\n<html lang="ja">\n    <head>\n        <meta charset="utf-8">\n        <title><\/title>\n        <script src="https:\/\/requirejs.org\/docs\/release\/2.3.6\/minified\/require.js"><\/script>\n        <script src=".\/js\/config\/config.js"><\/script>\n        <script src=".\/js\/graph.js"><\/script>\n    <\/head>\n    <body>\n        <div id="container"><\/div>\n    <\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
\u3060\u3044\u3076\u30b9\u30c3\u30ad\u30ea\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
config.js<\/h3>\n\n\n
\nrequire.config({\n    packages: [{\n        name: 'highcharts',\n        main: 'highcharts'\n    }],\n    paths: {\n        \/\/ Change this to your server if you do not wish to use our CDN.\n        'highcharts': 'https:\/\/code.highcharts.com'\n    }\n});\n<\/pre><\/div>\n\n\n
graph.js<\/h3>\n\n\n
\nrequire(['highcharts'],function(hi){\n    hi.chart('container', {\n        chart: {\n            renderTo: 'chart',\n            type: 'bar'\n        },\n        title: {\n            text: 'Hello Highcharts'\n        },\n        xAxis: {\n            categories: ['Hello', 'World']\n        },\n        yAxis: {\n            title: 'Value'\n        },\n        series: [{\n            name: 'Highcharts Intro',\n          \tdata: [1, 2]\n        }]\n    });\n});\n<\/pre><\/div>\n\n\n
\u8868\u793a<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u6ce8\u610f<\/h2>\n\n\n\n
requireJS\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u3068highchartsJS\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u306b\u3088\u3063\u3066\u306f\u3046\u307e\u304frequireJS\u304b\u3089\u8aad\u307f\u8fbc\u3081\u306a\u3044\u30d1\u30bf\u30fc\u30f3\u304c\u3042\u308a\u307e\u3057\u305f\u3002
requireJS…2.1.9\u4ee5\u524d\uff082.1.10\u4ee5\u964d\u306a\u3089\u6b63\u5e38\u306b\u52d5\u4f5c\uff09
highchartsJS…7.1.2\uff08\u6700\u65b0\uff09<\/p>\n","protected":false},"excerpt":{"rendered":"
\u524d\u56de\u8a18\u4e8b\u304b\u3089\u306e\u6d3e\u751f\u3067\u3059\u3002 \u3010RequireJS\u3011\u3010BackboneJS\u3011requireJS\u304b\u3089bac […]<\/p>\n","protected":false},"author":1,"featured_media":975,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[211],"tags":[225,213],"class_list":["post-974","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-highchartsjs","tag-requirejs"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t