{"id":2721,"date":"2020-04-15T17:55:34","date_gmt":"2020-04-15T08:55:34","guid":{"rendered":"https:\/\/133.242.23.245\/blog\/?p=2721"},"modified":"2020-04-15T17:58:08","modified_gmt":"2020-04-15T08:58:08","slug":"plotly-js%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6%e7%b0%a1%e5%8d%98%e3%81%ab%e3%82%b0%e3%83%a9%e3%83%95%e3%82%92%e4%bd%9c%e6%88%90%e3%81%97%e3%82%88%e3%81%86","status":"publish","type":"post","link":"https:\/\/www.kara-kuri.jp\/blog\/?p=2721","title":{"rendered":"plotly.js\u3092\u4f7f\u7528\u3057\u3066\u7c21\u5358\u306b\u30b0\u30e9\u30d5\u3092\u4f5c\u6210\u3057\u3088\u3046!!"},"content":{"rendered":"

\u4eca\u56de\u306fVue.js\u3068plotly.js\u3092\u4f7f\u7528\u3057\u3066\u30b0\u30e9\u30d5\u3092\u4f5c\u6210\u3059\u308b\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n

\u306f\u3058\u3081\u306bplotly.js\u3068\u306fd3.js\u3068stack.gl\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u7528\u3057\u305f\u30b0\u30e9\u30d5\u4f5c\u6210\u30e9\u30a4\u30d6\u30e9\u30ea\u3068\u306a\u308a\u307e\u3059\u3002
\n\u307e\u305f\u30012D\u306e\u307f\u306a\u3089\u305a\u3001Map\u30843D Chart\u306a\u3069\u306e\u4f5c\u6210\u3082\u53ef\u80fd\u3067\u3059\u3002<\/p>\n

Plotly JavaScript Open Source Graphing Library<\/a><\/p>\n

\u4eca\u56de\u306fJavaScript\u3067\u4f5c\u6210\u3057\u307e\u3059\u304c\u3001Plotly\u306fPython\u30fbR\u7528\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u3042\u308a\u3001\u305d\u308c\u3089\u306e\u8a00\u8a9e\u3067\u3082\u5229\u7528\u3059\u308b\u3053\u3068\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n

plotly.com<\/a><\/p>\n

\u3067\u306f\u65e9\u901f\u4f5c\u6210\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n

\u25a0 Vue.js\u74b0\u5883\u306e\u69cb\u7bc9<\/h4>\n

Vue.js\u306e\u74b0\u5883\u69cb\u7bc9\u65b9\u6cd5\u306f\u4ed6\u306e\u30b5\u30a4\u30c8\u3067\u3082\u4e01\u5be7\u306a\u8aac\u660e\u304c\u3042\u308b\u304b\u3068\u601d\u3044\u307e\u3059\u306e\u3067\u7701\u7565\u3057\u307e\u3059\u3002
\n\u305f\u3060\u3001Vue.js + Nuxt.js\u3067\u74b0\u5883\u3092\u69cb\u7bc9\u3057\u305f\u3044\u5834\u5408\u306f\u3001\u4e0b\u8a18URL\u3092\u53c2\u7167\u3057\u3066\u69cb\u7bc9\u3059\u308b\u3053\u3068\u3092\u304a\u3059\u3059\u3081\u3057\u307e\u3059\u3002<\/p>\n

\u203b UI\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3068\u3057\u3066Vuetify\u3092\u4f7f\u7528\u3057\u3066\u3044\u307e\u3059\u3002
\n\u203b \u30e2\u30fc\u30c9\u306f\u30b7\u30f3\u30b0\u30eb\u30da\u30fc\u30b8\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\uff08SPA\uff09\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n

https:\/\/ja.nuxtjs.org\/guide\/installation\/<\/a><\/p>\n

\u25a0 plotly.js\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h4>\n

plotly.js\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n

npm i plotly.js-basic-dist<\/code><\/pre>\n
https:\/\/www.npmjs.com\/package\/plotly.js-basic-dist<\/a><\/p>\n
\u25a0 plotly.js\u306e\u4f5c\u6210<\/h4>\n
\u3067\u306f\u65e9\u901f\u3001\u4f5c\u6210\u3057\u307e\u3059\u3002
\n\u4e0b\u8a18\u3001\u30d5\u30a1\u30a4\u30eb\u3092\u30c6\u30ad\u30b9\u30c8\u30a8\u30c7\u30a3\u30bf\u3067\u958b\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
<\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d>\\pages\\index.vue<\/code><\/pre>\n
\u305d\u306e\u3042\u3068\u306b\u4e0b\u8a18\u30bd\u30fc\u30b9\u3092\u4e0a\u66f8\u304d\u3057\u3001\u4fdd\u5b58\u3057\u307e\u3059\u3002<\/p>\n
<template>\n  <div>\n    <v-flex>\n      <v-card>\n        <v-card-title>Event Cost<\/v-card-title>\n        <div id="slc"><\/div>\n      <\/v-card>\n    <\/v-flex>\n  <\/div>\n<\/template>\n\n<script>\nimport Plotly from 'plotly.js-basic-dist'\n\nexport default {\n  mounted() {\n    let money = {\n      x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],\n      y: [10000, 21000, 15000, 35000, 20000, 40000, 33000, 55000, 28000, 12000, 46000, 9000],\n      name: '\u91d1\u984d',\n      hovertext: "",\n      hovertemplate: "%{y:.f}\u5186<extra><\/extra>",\n      type: 'scatter',\n      mode: 'lines+markers',\n      line: {\n        color: '#ff1493'\n      }\n    };\n\n    let times = {\n      x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],\n      y: [7, 2, 3, 2, 4, 5, 1, 3, 4, 6, 3, 3],\n      name: '\u56de\u6570',\n      hovertemplate: "%{y}\u56de",\n      type: 'bar',\n      yaxis: 'y2',\n      width: 0.5,\n      marker: {\n        color: '#90ee90'\n      }\n    };\n\n    const layout = {\n      hovermode:'closest',\n      title: 'Event Cost',\n      xaxis: {\n        tickmode: "linear",\n        tick0: 1,\n        dtick: 1,\n      },\n      yaxis: {\n        title: '\u91d1 \u984d',\n        overlaying: 'y2',\n        tickformat: ".f"\n      },\n      yaxis2: {\n        title: '\u56de \u6570',\n        side: 'right'\n      }\n    };\n\n    const config = {\n      responsive: true,\n      displaylogo: false,\n      \/\/displayModeBar: false,\n      toImageButtonOptions: {\n        format: 'svg',\n        filename: 'event_cost',\n        scale: 1\n      },\n      modeBarButtonsToAdd: [\n        {\n          name: 'Download CSV',\n          icon: Plotly.Icons.disk,\n          click() {\n            alert("Make download process!!")\n          }\n        }\n      ]\n    }\n\n    Plotly.newPlot('slc', [money, times], layout, config)\n\n    let slcPlot = document.getElementById('slc')\n    slcPlot.on('plotly_hover', function(data){\n      console.log("Hover Point X:" + data.points[0].x)\n    })\n  }\n}\n<\/script><\/code><\/pre>\n
\u25a0 plotly.js\u306e\u78ba\u8a8d<\/h4>\n
\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u79fb\u52d5\u5f8c\u3001\u4e0b\u8a18\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u30b5\u30fc\u30d0\u3092\u8d77\u52d5\u3057\u307e\u3059\u3002<\/p>\n
npm run dev<\/code><\/pre>\n
\u8d77\u52d5\u3057\u7d42\u3048\u305f\u3089\u30d6\u30e9\u30a6\u30b6\u3067\u300chttp:\/\/192.168.61.147:3000\u300d\u306b\u9077\u79fb\u3057\u307e\u3059<\/a>\u3002<\/p>\n
\u30d6\u30e9\u30a6\u30b6\u306b\u4ee5\u4e0b\u306e\u753b\u9762\u304c\u8868\u793a\u3055\u308c\u308c\u3070\u6210\u529f\u3067\u3059\u3002<\/p>\n
\"\"<\/a><\/p>\n
\u25a0 plotly.js\u306e\u8aac\u660e<\/h4>\n
\u4eca\u56de\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u306f\u7686\u69d8\u304c\u3053\u3093\u306a\u3053\u3068\u304c\u3067\u304d\u305f\u3089\u4fbf\u5229\u3060\u3068\u601d\u3046\u306e\u3067\u306f\u306a\u3044\u304b\u3068\u3044\u3046\u6a5f\u80fd\u3092\u5165\u308c\u3066\u307f\u307e\u3057\u305f\u3002
\n\u4e3b\u306a\u6a5f\u80fd\u306f\u4e0b\u8a18\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n
    \n
  1. \u6298\u308c\u7dda\u30b0\u30e9\u30d5\u306b\u30de\u30fc\u30ab\u30fc\u3092\u8ffd\u52a0<\/li>\n
  2. \u6298\u308c\u7dda\u30b0\u30e9\u30d5\u3068\u68d2\u30b0\u30e9\u30d5\u306e\u6df7\u5728<\/li>\n
  3. y\u8ef8\u30e9\u30d9\u30eb\u3092\u5de6\u53f3\u306b\u8868\u793a<\/li>\n
  4. \u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u6642\u306e\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u306e\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u3092\u4fee\u6b63<\/li>\n
  5. \u300cDownload plot\u300d\u306e\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u3092SVG\u306b\u5909\u66f4<\/li>\n
  6. CSV\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u306e\u30a2\u30a4\u30b3\u30f3\u8ffd\u52a0<\/li>\n
  7. \u30e9\u30d9\u30eb\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u306e\u4fee\u6b63<\/li>\n
  8. \u8272\u3001\u30b5\u30a4\u30ba\u306e\u5909\u66f4<\/li>\n
  9. x\u8ef8\u306e\u30e9\u30d9\u30eb\u8868\u793a\u3092\u4fee\u6b63<\/li>\n
  10. Plotly\u30ed\u30b4\u306e\u524a\u9664<\/li>\n
  11. \u30b0\u30e9\u30d5\u3092\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u3057\u305f\u6642\u306e\u30a4\u30d9\u30f3\u30c8\u3092\u53d6\u5f97<\/li>\n<\/ol>\n
    \u25a0 \u6700\u5f8c\u306b<\/h4>\n
    \u4ee5\u4e0a\u3067plotly.js\u3092\u4f7f\u7528\u3057\u305f\u30b0\u30e9\u30d5\u4f5c\u6210\u306f\u5b8c\u4e86\u3067\u3059\u3002
    \n\u307e\u305f\u3001\u8981\u671b\u306a\u3069\u3042\u308c\u3070\u4ed6\u306e\u30b0\u30e9\u30d5\u4f5c\u6210\u306b\u3082\u6311\u6226\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
    \u4eca\u56de\u306fVue.js\u3068plotly.js\u3092\u4f7f\u7528\u3057\u3066\u30b0\u30e9\u30d5\u3092\u4f5c\u6210\u3059\u308b\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002 \u306f\u3058\u3081\u306bplotly.js\u3068\u306fd3.js\u3068stack.gl\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u7528\u3057\u305f\u30b0\u30e9\u30d5\u4f5c\u6210\u30e9\u30a4\u30d6\u30e9\u30ea\u3068\u306a\u308a\u307e\u3059\u3002 \u307e\u305f\u30012D\u306e\u307f\u306a\u3089\u305a\u3001 […]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[48],"tags":[],"_links":{"self":[{"href":"https:\/\/www.kara-kuri.jp\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2721"}],"collection":[{"href":"https:\/\/www.kara-kuri.jp\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kara-kuri.jp\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kara-kuri.jp\/blog\/index.php?rest_route=\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kara-kuri.jp\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2721"}],"version-history":[{"count":1,"href":"https:\/\/www.kara-kuri.jp\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2721\/revisions"}],"predecessor-version":[{"id":2867,"href":"https:\/\/www.kara-kuri.jp\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2721\/revisions\/2867"}],"wp:attachment":[{"href":"https:\/\/www.kara-kuri.jp\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2721"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kara-kuri.jp\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2721"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kara-kuri.jp\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}