{"id":22686,"date":"2019-08-08T12:00:56","date_gmt":"2019-08-08T03:00:56","guid":{"rendered":"https:\/\/www.techscore.com\/blog\/?p=22686"},"modified":"2019-08-08T10:53:19","modified_gmt":"2019-08-08T01:53:19","slug":"web%e3%83%9a%e3%83%bc%e3%82%b8%e3%81%a7highcharts%e3%82%92%e5%88%a9%e7%94%a8%e3%81%97%e3%81%a6%e3%82%b0%e3%83%a9%e3%83%95%e3%82%92%e6%8f%8f%e3%81%8f","status":"publish","type":"post","link":"https:\/\/www.techscore.com\/blog\/2019\/08\/08\/web%e3%83%9a%e3%83%bc%e3%82%b8%e3%81%a7highcharts%e3%82%92%e5%88%a9%e7%94%a8%e3%81%97%e3%81%a6%e3%82%b0%e3%83%a9%e3%83%95%e3%82%92%e6%8f%8f%e3%81%8f\/","title":{"rendered":"web\u30da\u30fc\u30b8\u3067Highcharts\u3092\u5229\u7528\u3057\u3066\u30b0\u30e9\u30d5\u3092\u63cf\u304f"},"content":{"rendered":"

\u3053\u3093\u306b\u3061\u306f\u3001\u6d2a\u3067\u3059\u3002<\/p>\n

\u4eca\u65e5\u306fjs\u306e\u30b0\u30e9\u30d5\u30e9\u30a4\u30d6\u30e9\u30ea\u306eHighcharts\u306b\u3064\u3044\u3066\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n

Highcharts\u3092\u5229\u7528\u3059\u308b\u3068\u7c21\u5358\u306b\u7dba\u9e97\u306a\u30b0\u30e9\u30d5\u3092\u63cf\u304f\u3053\u3068\u304c\u51fa\u6765\u307e\u3059\u3002
\n\u30b0\u30e9\u30d5\u63cf\u753b\u6642\u306b\u3001\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u5fc5\u8981\u306f\u3042\u308a\u307e\u305b\u3093\u3002
\nPC\u3001\u30e2\u30d0\u30a4\u30eb\u306e\u307b\u3068\u3093\u3069\u306e\u30d6\u30e9\u30a6\u30b6\u3067\u52d5\u4f5c\u3057\u3001\u5b9f\u884c\u901f\u5ea6\u3082\u901f\u304f\u7c21\u5358\u306b\u5229\u7528\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002
\n\u5546\u7528\u76ee\u7684\u3067\u5229\u7528\u3059\u308b\u5834\u5408\u306f\u30e9\u30a4\u30bb\u30f3\u30b9\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>\n

Highcharts\u306e\u516c\u5f0f\u3000demo\u30b5\u30a4\u30c8<\/a>\u3092\u898b\u308b\u3068\u63cf\u753b\u3067\u304d\u308b\u30b0\u30e9\u30d5\u306f\u305f\u304f\u3055\u3093\u306e\u7a2e\u985e\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n

Highcharts\u306e Basic line \u30c1\u30e3\u30fc\u30c8\u3092\u4f8b\u306b\u3001\u5546\u54c1A\uff5e\u5546\u54c1E\u306e2018\u5e74\u5ea6\u306e\u6708\u5225\u58f2\u4e0a\u306e\u30b0\u30e9\u30d5\u3092\u4f5c\u6210\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n

1.html\u3092\u4f5c\u6210<\/h1>\n

html\u3092\u4f5c\u6210\u3057\u3001Highcharts\u3092import\u3059\u308b\u3002<\/p>\n

import\u3057\u305fHighcharts\u306f\u73fe\u6642\u70b9\u3067\u306e\u6700\u65b0\u30d0\u30fc\u30b8\u30e7\u30f3(v7.1.2)\u3067\u3059\u3002<\/p>\n

<html>\n<head>\n    <meta charset=\"UTF-8\" \/>\n    <title>Highcharts\u3067\u30b0\u30e9\u30d5\u4f5c\u6210<\/title>\n    <script src=\"http:\/\/code.highcharts.com\/highcharts.js\"><\/script>\n<\/head>\n<body>\n    <div id=\"container\" style=\"width: 680px; height: 550px; margin: 0 auto\"><\/div>\n    <script language=\"JavaScript\">\n        window.onload = function() {\n            \/\/ \u3053\u3053\u306f\u66f8\u304f\u30b3\u30fc\u30c9\u3092\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u8aac\u660e\u3057\u307e\u3059\u3002\n        }\n    <\/script>\n<\/body>\n<\/html><\/pre>\n
2.\u30b0\u30e9\u30d5\u8868\u793a\u7528\u306eJSON\u30c7\u30fc\u30bf\u306e\u5c5e\u6027\u4f5c\u6210<\/h1>\n
\u203b\u5c5e\u6027\u306e\u8aac\u660e\u306b\u3064\u3044\u3066\u3001api<\/a>\u8aac\u660e\u66f8\u3092\u53c2\u7167\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
2-1.\u30b0\u30e9\u30d5\u306e\u30bf\u30a4\u30c8\u30eb\u3092\u8a2d\u5b9a<\/h2>\n
title : {\n    text: '\u5546\u54c1A\uff5e\u5546\u54c1E\u306e2018\u5e74\u5ea6\u6708\u9593\u58f2\u4e0a'   \n}<\/pre>\n
2-2.\u6a2a\u8ef8\u306e\u8868\u984c\u3092\u8a2d\u5b9a<\/h2>\n
xAxis : {\n    categories: ['1\u6708', '2\u6708', '3\u6708', '4\u6708', '5\u6708', '6\u6708', '7\u6708', '8\u6708', '9\u6708', '10\u6708', '11\u6708', '12\u6708']\n}<\/pre>\n
2-3.\u7e26\u8ef8\u3092\u8a2d\u5b9a<\/h2>\n
yAxis : {\n    title: {\n        text: '\u58f2\u4e0a\u9ad8 (\u4e07\u5186)'\n    },\n    plotLines: [{\n        value: 0,\n        width: 1,\n        color: '#808080'\n    }]\n}<\/pre>\n
2-4.\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u3092\u8a2d\u5b9a<\/h2>\n
\u5546\u54c1\u306e\u6708\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u3067\u58f2\u4e0a\u91d1\u3092\u8868\u793a\u3057\u307e\u3059\u3002<\/p>\n
tooltip : {\n    valueSuffix: '\u4e07\u5186'\n}<\/pre>\n
2-5.\u5546\u54c1\u306e\u30c1\u30e3\u30fc\u30c8\u4f4d\u7f6e\u3092\u914d\u7f6e<\/h2>\n
legend : {\n    layout: 'vertical',\n    align: 'right',\n    verticalAlign: 'middle',\n    borderWidth: 0\n}<\/pre>\n
2-6.\u5546\u54c1\u306e\u5404\u6708\u306e\u58f2\u4e0a\u91d1\u30c7\u30fc\u30bf\u3092\u4f5c\u6210<\/h2>\n
series : [\n    {\n        name: '\u5546\u54c1A',\n        data: [23.5, 32.2, 45.6, 20.3, 15.3, 56.4, 49.9, 53.5, 55.5, 33.2, 46.3, 43.2]\n    },\n    {\n        name: '\u5546\u54c1B',\n        data: [15.3, 18.2, 25.7, 23.1, 26.9, 27.4, 30.5, 38.6, 40.2, 48.3, 35.2, 25.4]\n    }, \n    {\n        name: '\u5546\u54c1C',\n        data: [18.5, 22.5, 29.3, 37.1, 39.3, 45.8, 44.3, 48.2, 43.6, 40.3, 37.7, 33.0]\n    },\n    {\n        name: '\u5546\u54c1D',\n        data: [7.2, 6.3, 8.9, 10.2, 12.5, 16.2, 18.2, 17.3, 16.5, 12.8, 10.3, 13.9]\n    },\n    {\n        name: '\u5546\u54c1E',\n        data: [36.6, 37.2, 39.1, 30.2, 30.9, 28.3, 25.3, 24.8, 23.3, 20.7, 18.3, 19.7]\n    }\n]<\/pre>\n
3.\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u3092\u8a2d\u5b9a<\/span><\/span><\/h1>\n
responsive: {\n    rules: [{\n        condition: {\n            maxWidth: 600\n        },\n        chartOptions: {\n            legend: {\n                layout: 'horizontal',\n                align: 'center',\n                verticalAlign: 'bottom'\n            }\n        }\n    }]\n}<\/pre>\n
4.\u5b8c\u6210\u3057\u305fHTML<\/h1>\n
<html>\n<head>\n    <meta charset=\"UTF-8\" \/>\n    <title>Highcharts\u3067\u30b0\u30e9\u30d5\u4f5c\u6210<\/title>\n    <script src=\"https:\/\/code.highcharts.com\/highcharts.js\"><\/script>\n<\/head>\n<body>\n    <div id=\"container\" style=\"width: 680px; height: 550px; margin: 0 auto\"><\/div>\n    <script language=\"JavaScript\">\n        window.onload = function() {\n            Highcharts.chart('container', {\n                \/\/ \u30b0\u30e9\u30d5\u5c5e\u6027\u8a2d\u5b9a\n                \/\/ \u5404\u5c5e\u6027\u306e\u8a73\u7d30\uff1ahttps:\/\/api.highcharts.com\/highcharts\/\n                title : {\n                    text: '\u5546\u54c1A\uff5e\u5546\u54c1E\u306e2018\u5e74\u5ea6\u6708\u9593\u58f2\u4e0a'   \n                },\n                xAxis : {\n                    categories: ['1\u6708', '2\u6708', '3\u6708', '4\u6708', '5\u6708', '6\u6708', '7\u6708', '8\u6708', '9\u6708', '10\u6708', '11\u6708', '12\u6708']\n                },\n                yAxis : {\n                    title: {\n                        text: '\u58f2\u4e0a\u9ad8 (\u4e07\u5186)'\n                    },\n                    plotLines: [{\n                        value: 0,\n                        width: 1,\n                        color: '#808080'\n                    }]\n                },\n                tooltip : {\n                    valueSuffix: '\u4e07\u5186'\n                },\n                legend : {\n                    layout: 'vertical',\n                    align: 'right',\n                    verticalAlign: 'middle',\n                    borderWidth: 0\n                },\n                series : [\n                    {\n                        name: '\u5546\u54c1A',\n                        data: [23.5, 32.2, 45.6, 20.3, 15.3, 56.4, 49.9, 53.5, 55.5, 33.2, 46.3, 43.2]\n                    },\n                    {\n                        name: '\u5546\u54c1B',\n                        data: [15.3, 18.2, 25.7, 23.1, 26.9, 27.4, 30.5, 38.6, 40.2, 48.3, 35.2, 25.4]\n                    }, \n                    {\n                        name: '\u5546\u54c1C',\n                        data: [18.5, 22.5, 29.3, 37.1, 39.3, 45.8, 44.3, 48.2, 43.6, 40.3, 37.7, 33.0]\n                    },\n                    {\n                        name: '\u5546\u54c1D',\n                        data: [7.2, 6.3, 8.9, 10.2, 12.5, 16.2, 18.2, 17.3, 16.5, 12.8, 10.3, 13.9]\n                    },\n                    {\n                        name: '\u5546\u54c1E',\n                        data: [36.6, 37.2, 39.1, 30.2, 30.9, 28.3, 25.3, 24.8, 23.3, 20.7, 18.3, 19.7]\n                    }\n                ],\n                \n                responsive: {\n                    rules: [{\n                        condition: {\n                            maxWidth: 600\n                        },\n                        chartOptions: {\n                            legend: {\n                                layout: 'horizontal',\n                                align: 'center',\n                                verticalAlign: 'bottom'\n                            }\n                        }\n                    }]\n                }\n            });\n        }\n    <\/script>\n<\/body>\n<\/html><\/pre>\n
5.\u5b9f\u884c\u78ba\u8a8d<\/h1>\n
html\u3092\u5b9f\u884c\u3059\u308b\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u30b0\u30e9\u30d5\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n
\"\"<\/a><\/p>\n
\u30de\u30a6\u30b9\u306e\u30ab\u30fc\u30bd\u30eb\u3092\u5404\u5546\u54c1\u306e\u6708\u306b\u79fb\u52d5\u3059\u308b\u3068\u3001\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u3067\u660e\u7d30\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n
\"\"<\/a><\/p>\n
\u5546\u54c1A\u3001B\u306e\u307f\u306e\u30b0\u30e9\u30d5\u3092\u898b\u305f\u3044\u5834\u5408\u3001\u30c1\u30e3\u30fc\u30c8\u4f4d\u7f6e\u306e\u53f3\u5074\u306b\u3042\u308b\u5546\u54c1C\u3001D\u3001E\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u5546\u54c1A,B\u306e\u307f\u8868\u793a\u3057\u307e\u3059\u3002<\/p>\n

\n\"\"<\/a><\/p>\n
\u975e\u8868\u793a\u306b\u306a\u3063\u305f\u5546\u54c1\u3092\u518d\u8868\u793a\u3059\u308b\u5834\u5408\u3001\u30c1\u30e3\u30fc\u30c8\u4f4d\u7f6e\u306e\u53f3\u5074\u306b\u3042\u308b\u5546\u54c1\u3092\u3082\u3046\u4e00\u5ea6\u30af\u30ea\u30c3\u30af\u3059\u308c\u3070\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n
Highcharts\u306f3D\u30b0\u30e9\u30d5\u3001\u52d5\u7684\u30b0\u30e9\u30d5\u3001\u30a8\u30ea\u30a2\u30c1\u30e3\u30fc\u30c8\u3001\u6563\u5e03\u56f3\u306a\u3069\u3092\u8868\u793a\u3059\u308b\u5834\u5408\u306f\u975e\u5e38\u306b\u4fbf\u5229\u3067\u3059\u3002
\n\u7528\u9014\u306b\u3042\u308f\u305b\u3066\u305f\u304f\u3055\u3093\u306e\u30b0\u30e9\u30d5\u3092\u9078\u3079\u308b\u306e\u3067\u305c\u3072\u3054\u6d3b\u7528\u304f\u3060\u3055\u3044\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u3053\u3093\u306b\u3061\u306f\u3001\u6d2a\u3067\u3059\u3002<\/p>\n
\u4eca\u65e5\u306fjs\u306e\u30b0\u30e9\u30d5\u30e9\u30a4\u30d6\u30e9\u30ea\u306eHighcharts\u306b\u3064\u3044\u3066\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n
Highcharts\u3092\u5229\u7528\u3059\u308b\u3068\u7c21\u5358\u306b\u7dba\u9e97\u306a\u30b0\u30e9\u30d5\u3092\u63cf\u304f\u3053\u3068\u304c\u51fa\u6765\u307e\u3059\u3002
\n\u30b0\u30e9\u30d5\u63cf\u753b\u6642\u306b\u3001\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u5fc5\u8981\u306f\u3042\u308a\u307e\u305b\u3093\u3002
\u7d9a\u304d\u3092\u8aad\u3080...<\/a><\/p>\n","protected":false},"author":86,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[18],"tags":[53],"_links":{"self":[{"href":"https:\/\/www.techscore.com\/blog\/wp-json\/wp\/v2\/posts\/22686"}],"collection":[{"href":"https:\/\/www.techscore.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.techscore.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.techscore.com\/blog\/wp-json\/wp\/v2\/users\/86"}],"replies":[{"embeddable":true,"href":"https:\/\/www.techscore.com\/blog\/wp-json\/wp\/v2\/comments?post=22686"}],"version-history":[{"count":33,"href":"https:\/\/www.techscore.com\/blog\/wp-json\/wp\/v2\/posts\/22686\/revisions"}],"predecessor-version":[{"id":22725,"href":"https:\/\/www.techscore.com\/blog\/wp-json\/wp\/v2\/posts\/22686\/revisions\/22725"}],"wp:attachment":[{"href":"https:\/\/www.techscore.com\/blog\/wp-json\/wp\/v2\/media?parent=22686"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.techscore.com\/blog\/wp-json\/wp\/v2\/categories?post=22686"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.techscore.com\/blog\/wp-json\/wp\/v2\/tags?post=22686"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}