{"id":32427,"date":"2024-11-25T14:43:14","date_gmt":"2024-11-25T06:43:14","guid":{"rendered":"https:\/\/fwq.ai\/blog\/32427\/"},"modified":"2024-11-25T14:43:14","modified_gmt":"2024-11-25T06:43:14","slug":"%e9%a5%bc%e5%9b%be%e5%92%8c%e4%bb%aa%e8%a1%a8%e5%9b%be%ef%bc%9a%e4%bd%bf%e7%94%a8-plotly-js-%e8%a7%a3%e9%94%81%e4%ba%a4%e4%ba%92%e6%80%a7%ef%bc%8c%e7%ac%ac-5-%e9%83%a8%e5%88%86","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/32427\/","title":{"rendered":"\u997c\u56fe\u548c\u4eea\u8868\u56fe\uff1a\u4f7f\u7528 Plotly.js \u89e3\u9501\u4ea4\u4e92\u6027\uff0c\u7b2c 5 \u90e8\u5206"},"content":{"rendered":"

\"\u997c\u56fe\u548c\u4eea\u8868\u56fe\uff1a\u4f7f\u7528<\/p>\n

\u5982\u679c\u60a8\u4ece\u4e00\u5f00\u59cb\u5c31\u5173\u6ce8\u672c\u7cfb\u5217\uff0c\u60a8\u53ef\u80fd\u5df2\u7ecf\u6ce8\u610f\u5230 Plotly.js \u4f7f\u7528\u76f8\u540c\u7684 scatter \u7c7b\u578b\u6765\u521b\u5efa\u6298\u7ebf\u56fe\u548c\u6c14\u6ce1\u56fe\u3002\u552f\u4e00\u7684\u533a\u522b\u662f\uff0c\u6211\u4eec\u5728\u521b\u5efa\u6298\u7ebf\u56fe\u65f6\u5fc5\u987b\u5c06 mode \u8bbe\u7f6e\u4e3a lines\uff0c\u800c\u5728\u521b\u5efa\u6c14\u6ce1\u56fe\u65f6\u5fc5\u987b\u5c06 markers \u8bbe\u7f6e\u4e3a mode\u3002 <\/p>\n

\u540c\u6837\uff0cPlotly.js \u5141\u8bb8\u60a8\u901a\u8fc7\u5bf9 type \u5c5e\u6027\u4f7f\u7528\u76f8\u540c\u7684\u503c\u5e76\u6839\u636e\u60a8\u8981\u521b\u5efa\u7684\u56fe\u8868\u66f4\u6539\u5176\u4ed6\u5c5e\u6027\u7684\u503c\u6765\u521b\u5efa\u997c\u56fe\u3001\u5706\u73af\u56fe\u548c\u4eea\u8868\u56fe\u3002 <\/p>\n

\u5728 Plotly.js \u4e2d\u521b\u5efa\u997c\u56fe<\/h2>\n

\u60a8\u53ef\u4ee5\u901a\u8fc7\u5c06 type \u5c5e\u6027\u8bbe\u7f6e\u4e3a pie \u6765\u5728 Plotly.js \u4e2d\u521b\u5efa\u997c\u56fe\u3002\u8fd8\u6709\u5176\u4ed6\u5c5e\u6027\uff0c\u4f8b\u5982 opacity\u3001visible \u548c name \u4e5f\u662f\u5176\u4ed6\u56fe\u8868\u7c7b\u578b\u6240\u5171\u6709\u7684\u3002 name \u5c5e\u6027\u7528\u4e8e\u63d0\u4f9b\u5f53\u524d\u997c\u56fe\u8ddf\u8e2a\u7684\u540d\u79f0\u3002\u8be5\u540d\u79f0\u968f\u540e\u663e\u793a\u5728\u56fe\u4f8b\u4e2d\u4ee5\u4f9b\u8bc6\u522b\u3002\u60a8\u53ef\u4ee5\u901a\u8fc7\u5c06 showlegend \u5c5e\u6027\u5206\u522b\u8bbe\u7f6e\u4e3a true \u6216 false \u6765\u663e\u793a\u6216\u9690\u85cf\u56fe\u8868\u56fe\u4f8b\u4e2d\u7684\u997c\u56fe\u8ddf\u8e2a\u3002\u60a8\u53ef\u4ee5\u4f7f\u7528 labels \u5c5e\u6027\u4e3a\u997c\u56fe\u7684\u4e0d\u540c\u90e8\u5206\u8bbe\u7f6e\u6807\u7b7e\u540d\u79f0\u3002<\/p>\n

\u5bf9\u4e8e\u997c\u56fe\uff0c\u6807\u8bb0\u5bf9\u8c61\u7528\u4e8e\u63a7\u5236\u56fe\u8868\u4e0d\u540c\u90e8\u5206\u7684\u5916\u89c2\u3002\u5d4c\u5957\u5728 marker \u4e2d\u7684 color \u5c5e\u6027\u53ef\u7528\u4e8e\u8bbe\u7f6e\u997c\u56fe\u6bcf\u4e2a\u6247\u533a\u7684\u989c\u8272\u3002\u4e0d\u540c\u6247\u533a\u7684\u989c\u8272\u53ef\u4ee5\u6307\u5b9a\u4e3a color \u5c5e\u6027\u7684\u6570\u7ec4\u503c\u3002<\/p>\n

\u60a8\u8fd8\u53ef\u4ee5\u4f7f\u7528\u5d4c\u5957\u5728\u7ebf\u6761\u5bf9\u8c61\u5185\u7684 color \u548c width \u5c5e\u6027\u6765\u8bbe\u7f6e\u5305\u56f4\u6bcf\u4e2a\u6247\u533a\u7684\u6240\u6709\u7ebf\u6761\u7684\u989c\u8272\u548c\u5bbd\u5ea6\u3002\u60a8\u8fd8\u53ef\u4ee5\u9009\u62e9\u4f7f\u7528\u5e03\u5c14\u503c sort \u5c5e\u6027\u5bf9\u997c\u56fe\u7684\u6240\u6709\u6247\u533a\u4ece\u5927\u5230\u5c0f\u8fdb\u884c\u6392\u5e8f\u3002\u540c\u6837\uff0c\u501f\u52a9 direction \u5c5e\u6027\uff0c\u53ef\u4ee5\u5c06\u6247\u533a\u7684\u65b9\u5411\u66f4\u6539\u4e3a \u987a\u65f6\u9488 \u6216 \u9006\u65f6\u9488 \u3002<\/p>\n

\u4ee5\u4e0b\u4ee3\u7801\u521b\u5efa\u4e00\u4e2a\u57fa\u672c\u997c\u56fe\uff0c\u5176\u4e2d\u5217\u51fa\u4e86\u4e16\u754c\u4e0a\u524d\u4e94\u4e2a\u56fd\u5bb6\u7684\u68ee\u6797\u9762\u79ef\u3002<\/p>\n

var pieDiv = document.getElementById(\"pie-chart\");\n\nvar traceA = {\n  type: \"pie\",\n  values: [8149300, 4916438, 4776980, 3100950, 2083210],\n  labels: ['Russia', 'Canada', 'Brazil', 'United States', 'China']\n};\n\nvar data = [traceA];\n\nvar layout = {\n  title: \"Area Under Forest for Different Countries\"\n};\n\nPlotly.plot(pieDiv, data, layout);\n<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u5982\u60a8\u6240\u89c1\uff0c\u6211\u4eec\u4e0d\u518d\u4f7f\u7528 x \u548c y \u5c5e\u6027\u6765\u6307\u5b9a\u6211\u4eec\u8981\u7ed8\u5236\u7684\u70b9\u3002\u73b0\u5728\uff0c\u8fd9\u662f\u5728 values \u548c labels \u7684\u5e2e\u52a9\u4e0b\u5b8c\u6210\u7684\u3002\u767e\u5206\u6bd4\u662f\u6839\u636e\u8f93\u5165\u503c\u81ea\u52a8\u786e\u5b9a\u7684\u3002<\/p>\n<\/p>\n
\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u997c\u56fe\u7684\u7b2c\u4e00\u7247\u4ece 12 \u70b9\u5f00\u59cb\u3002\u60a8\u53ef\u4ee5\u4f7f\u7528 rotation \u5c5e\u6027\u66f4\u6539\u56fe\u8868\u7684\u8d77\u59cb\u89d2\u5ea6\uff0c\u8be5\u5c5e\u6027\u63a5\u53d7 -360 \u5230 360 \u4e4b\u95f4\u7684\u503c\u3002\u9ed8\u8ba4\u7684 12 \u70b9\u949f\u503c\u7b49\u4e8e\u89d2\u5ea6 0\u3002<\/p>\n
\u5982\u679c\u60a8\u5e0c\u671b\u56fe\u8868\u4e2d\u7684\u67d0\u4e2a\u5207\u7247\u8131\u9896\u800c\u51fa\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528 pull \u5c5e\u6027\uff0c\u8be5\u5c5e\u6027\u53ef\u4ee5\u63a5\u53d7\u4e00\u4e2a\u6570\u5b57\u6216\u503c\u5728 0 \u5230 1 \u4e4b\u95f4\u7684\u6570\u5b57\u6570\u7ec4\u3002 pull \u5c5e\u6027\u7528\u4e8e\u4ece\u997c\u56fe\u4e2d\u62c9\u51fa\u6307\u5b9a\u7684\u6247\u533a\u3002\u62c9\u52a8\u8ddd\u79bb\u7b49\u4e8e\u9985\u997c\u6216\u751c\u751c\u5708\u8f83\u5927\u534a\u5f84\u7684\u4e00\u5c0f\u90e8\u5206\u3002<\/p>\n
\u901a\u8fc7\u6307\u5b9a hole \u5c5e\u6027\u7684\u503c\uff0c\u53ef\u4ee5\u975e\u5e38\u8f7b\u677e\u5730\u5c06\u997c\u56fe\u8f6c\u6362\u4e3a\u5706\u73af\u56fe\u3002\u5b83\u5c06\u4ece\u997c\u56fe\u4e2d\u5207\u51fa\u7ed9\u5b9a\u7684\u534a\u5f84\u90e8\u5206\u4ee5\u5236\u4f5c\u5706\u73af\u56fe\u3002<\/p>\n
\u60a8\u53ef\u4ee5\u4f7f\u7528\u5d4c\u5957\u5728\u6807\u8bb0\u5bf9\u8c61\u5185\u7684 colors \u5c5e\u6027\u6765\u63a7\u5236\u997c\u56fe\u4e2d\u5404\u4e2a\u6247\u533a\u7684\u989c\u8272\u3002\u8fd8\u53ef\u4ee5\u501f\u52a9\u5d4c\u5957\u5728\u7ebf\u6761\u5bf9\u8c61\u5185\u7684 width \u548c color \u5c5e\u6027\u6765\u66f4\u6539\u5305\u56f4\u6bcf\u4e2a\u6247\u533a\u7684\u7ebf\u6761\u7684\u5bbd\u5ea6\u548c\u989c\u8272\u3002\u5305\u56f4\u7ebf\u7684\u9ed8\u8ba4\u5bbd\u5ea6\u4e3a 0\u3002\u8fd9\u610f\u5473\u7740\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u4e0d\u4f1a\u5728\u6247\u533a\u5468\u56f4\u7ed8\u5236\u4efb\u4f55\u7ebf\u3002<\/p>\n
\u8fd8\u6709\u4e00\u4e2a hovertext \u5c5e\u6027\uff0c\u53ef\u7528\u4e8e\u4e3a\u6bcf\u4e2a\u5355\u72ec\u7684\u6247\u533a\u63d0\u4f9b\u4e00\u4e9b\u989d\u5916\u7684\u6587\u672c\u4fe1\u606f\u3002\u5f53\u89c2\u770b\u8005\u5c06\u9f20\u6807\u60ac\u505c\u5728\u67d0\u4e2a\u6247\u533a\u4e0a\u65f6\uff0c\u4ed6\u4eec\u5c06\u53ef\u4ee5\u770b\u5230\u8fd9\u4e9b\u4fe1\u606f\u3002\u663e\u793a\u6587\u672c\u7684\u6761\u4ef6\u4e4b\u4e00\u662f hoverinfo \u5c5e\u6027\u5e94\u5305\u542b text<\/strong> \u6807\u5fd7\u3002\u60a8\u53ef\u4ee5\u4f7f\u7528\u5d4c\u5957\u5728 insidetextfont \u548c outsidetextfont \u5206\u522b\u662f\u5bf9\u8c61\u3002<\/code><\/p>\n
\u4ee5\u4e0b\u4ee3\u7801\u4f7f\u7528\u4e4b\u524d\u997c\u56fe\u4e2d\u7684\u6570\u636e\u6765\u521b\u5efa\u4e00\u4e2a\u5706\u73af\u56fe\uff0c\u8be5\u5706\u73af\u56fe\u4f7f\u7528\u6211\u4eec\u521a\u521a\u4e86\u89e3\u7684\u5176\u4ed6\u5c5e\u6027\u3002<\/p>\n
var pieDiv = document.getElementById(\"pie-chart\");\n\nvar traceA = {\n  type: \"pie\",\n  values: [8149300, 4916438, 4776980, 3100950, 2083210],\n  labels: ['Russia', 'Canada', 'Brazil', 'United States', 'China'],\n  hole: 0.25,\n  pull: [0.1, 0, 0, 0, 0],\n  direction: 'clockwise',\n  marker: {\n    colors: ['#CDDC39', '#673AB7', '#F44336', '#00BCD4', '#607D8B'],\n    line: {\n      color: 'black',\n      width: 3\n    }\n  },\n  textfont: {\n    family: 'Lato',\n    color: 'white',\n    size: 18\n  },\n  hoverlabel: {\n    bgcolor: 'black',\n    bordercolor: 'black',\n    font: {\n      family: 'Lato',\n      color: 'white',\n      size: 18\n    }\n  }\n};\n\nvar data = [traceA];\n\nvar layout = {\n  title: \"Area Under Forest for Different Countries\"\n};\n\nPlotly.plot(pieDiv, data, layout);\n<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u5728 Plotly.js \u4e2d\u521b\u5efa\u4eea\u8868\u56fe\u8868<\/h2>\n
\u4eea\u8868\u56fe\u7684\u57fa\u672c\u7ed3\u6784\u4e0e\u5706\u73af\u56fe\u7c7b\u4f3c\u3002\u8fd9\u610f\u5473\u7740\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u4e00\u4e9b\u5de7\u5999\u9009\u62e9\u7684\u503c\u5e76\u901a\u8fc7\u4ecd\u7136\u5c06 type \u5c5e\u6027\u8bbe\u7f6e\u4e3a pie \u6765\u521b\u5efa\u7b80\u5355\u7684\u4eea\u8868\u56fe\u8868\u3002\u57fa\u672c\u4e0a\uff0c\u6211\u4eec\u5c06\u9690\u85cf\u6574\u4e2a\u997c\u56fe\u7684\u67d0\u4e9b\u90e8\u5206\uff0c\u4f7f\u5176\u770b\u8d77\u6765\u50cf\u4eea\u8868\u56fe\u3002<\/p>\n
\u9996\u5148\uff0c\u6211\u4eec\u9700\u8981\u4e3a values \u5c5e\u6027\u9009\u62e9\u4e00\u4e9b\u503c\u3002\u4e3a\u4e86\u7b80\u5355\u8d77\u89c1\uff0c\u6211\u5c06\u4f7f\u7528\u997c\u56fe\u7684\u4e0a\u534a\u90e8\u5206\u4f5c\u4e3a\u6211\u7684\u4eea\u8868\u56fe\u3002\u8fd9\u610f\u5473\u7740\u8fd9\u4e9b\u503c\u5e94\u8be5\u5728\u6211\u60f3\u8981\u53ef\u89c1\u7684\u90e8\u5206\u548c\u6211\u60f3\u8981\u9690\u85cf\u7684\u997c\u56fe\u90e8\u5206\u4e4b\u95f4\u5e73\u5747\u5206\u914d\u3002\u56fe\u8868\u7684\u53ef\u89c1\u90e8\u5206\u53ef\u4ee5\u8fdb\u4e00\u6b65\u5206\u4e3a\u66f4\u5c0f\u7684\u90e8\u5206\u3002\u4ee5\u4e0b\u662f\u4e3a\u4eea\u8868\u56fe\u8868\u9009\u62e9\u503c\u7684\u793a\u4f8b\u3002<\/p>\n
values: [100 \/ 5, 100 \/ 5, 100 \/ 5, 100 \/ 5, 100 \/ 5, 100]\n<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u4e0a\u884c\u4e2d\u7684\u6570\u5b57 100 \u662f\u4efb\u610f\u7684\u3002\u53ef\u4ee5\u770b\u5230\uff0c\u524d\u4e94\u4e2a\u5207\u7247\u52a0\u8d77\u6765\u662f100\uff0c\u8fd9\u4e5f\u662f\u4e3a\u997c\u56fe\u9690\u85cf\u533a\u57df\u8bbe\u7f6e\u7684\u503c\u3002\u8fd9\u5c06\u6574\u4e2a\u9985\u997c\u5e73\u5747\u5206\u4e3a\u9690\u85cf\u90e8\u5206\u548c\u53ef\u89c1\u90e8\u5206\u3002<\/p>\n
\u8fd9\u662f\u521b\u5efa\u57fa\u672c\u4eea\u8868\u56fe\u8868\u7684\u5b8c\u6574\u4ee3\u7801\u3002\u60a8\u5e94\u8be5\u6ce8\u610f\u5230\uff0c\u6211\u5df2\u5c06\u5e94\u9690\u85cf\u7684\u6247\u533a\u7684\u989c\u8272\u5c5e\u6027\u8bbe\u7f6e\u4e3a\u767d\u8272\u3002\u540c\u6837\uff0c\u76f8\u5e94\u6247\u533a\u7684 text \u548c labels \u503c\u4e5f\u5df2\u8bbe\u7f6e\u4e3a\u7a7a\u5b57\u7b26\u4e32\u3002 rotation \u5c5e\u6027\u5df2\u8bbe\u7f6e\u4e3a 90\uff0c\u4ee5\u4fbf\u56fe\u8868\u4e0d\u4f1a\u4ece\u9ed8\u8ba4\u7684 12 \u70b9\u949f\u4f4d\u7f6e\u7ed8\u5236\u3002<\/p>\n
var gaugeDiv = document.getElementById(\"gauge-chart\");\n\nvar traceA = {\n  type: \"pie\",\n  showlegend: false,\n  hole: 0.4,\n  rotation: 90,\n  values: [100 \/ 5, 100 \/ 5, 100 \/ 5, 100 \/ 5, 100 \/ 5, 100],\n  text: [\"Very Low\", \"Low\", \"Average\", \"Good\", \"Excellent\", \"\"],\n  direction: \"clockwise\",\n  textinfo: \"text\",\n  textposition: \"inside\",\n  marker: {\n    colors: [\"rgba(255, 0, 0, 0.6)\", \"rgba(255, 165, 0, 0.6)\", \"rgba(255, 255, 0, 0.6)\", \"rgba(144, 238, 144, 0.6)\", \"rgba(154, 205, 50, 0.6)\", \"white\"]\n  },\n  labels: [\"0-10\", \"10-50\", \"50-200\", \"200-500\", \"500-2000\", \"\"],\n  hoverinfo: \"label\"\n};\n<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u4ee3\u7801\u7684\u4e0b\u4e00\u90e8\u5206\u6d89\u53ca\u4eea\u8868\u56fe\u8868\u7684\u6307\u9488\u3002\u60a8\u4e3a Degrees \u53d8\u91cf\u8bbe\u7f6e\u7684\u503c\u5c06\u786e\u5b9a\u7ed8\u5236\u9488\u7684\u89d2\u5ea6\u3002 radius \u53d8\u91cf\u51b3\u5b9a\u9488\u7684\u957f\u5ea6\u3002\u5c5e\u6027 x0 \u548c y0 \u7528\u4e8e\u8bbe\u7f6e\u7ebf\u6761\u7684\u8d77\u70b9\u3002\u540c\u6837\uff0c\u5c5e\u6027 x1 \u548c y1 \u7528\u4e8e\u8bbe\u7f6e\u7ebf\u6761\u7684\u7ec8\u70b9\u3002 <\/p>\n
\u60a8\u53ef\u4ee5\u501f\u52a9 SVG \u8def\u5f84\u4e3a\u9488\u521b\u5efa\u66f4\u590d\u6742\u7684\u5f62\u72b6\u3002\u60a8\u6240\u8981\u505a\u7684\u5c31\u662f\u5c06 type \u5c5e\u6027\u8bbe\u7f6e\u4e3a path \u5e76\u4f7f\u7528 path \u5c5e\u6027\u6307\u5b9a\u5b9e\u9645\u8def\u5f84\u3002\u60a8\u53ef\u4ee5\u5728\u53c2\u8003\u7684\u5e03\u5c40\u5f62\u72b6\u90e8\u5206\u9605\u8bfb\u66f4\u591a\u76f8\u5173\u4fe1\u606f\u3002<\/p>\n
var degrees = 115, radius = .6;\nvar radians = degrees * Math.PI \/ 180;\nvar x = -1 * radius * Math.cos(radians);\nvar y = radius * Math.sin(radians);\n\nvar layout = {\n  shapes:[{\n      type: 'line',\n      x0: 0,\n      y0: 0,\n      x1: x,\n      y1: 0.5,\n      line: {\n        color: 'black',\n        width: 8\n      }\n    }],\n  title: 'Number of Printers Sold in a Week',\n  xaxis: {visible: false, range: [-1, 1]},\n  yaxis: {visible: false, range: [-1, 1]}\n};\n\nvar data = [traceA];\n\nPlotly.plot(gaugeDiv, data, layout, {staticPlot: true});\n<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u672c\u8282\u7684\u6240\u6709\u4ee3\u7801\u90fd\u4f1a\u521b\u5efa\u4ee5\u4e0b\u4eea\u8868\u56fe\u8868\u3002\u76ee\u524d\uff0c\u8be5\u56fe\u8868\u4e0d\u662f\u5f88\u5947\u7279\uff0c\u4f46\u5b83\u53ef\u4ee5\u4f5c\u4e3a\u4e00\u4e2a\u5f88\u597d\u7684\u8d77\u70b9\u3002<\/p>\n<\/p>\n
\u6700\u7ec8\u60f3\u6cd5<\/h2>\n
\u5728\u672c\u6559\u7a0b\u4e2d\uff0c\u60a8\u5b66\u4e60\u4e86\u5982\u4f55\u4f7f\u7528 Plotly.js \u4e2d\u7684 pie \u8ddf\u8e2a\u7c7b\u578b\u521b\u5efa\u997c\u56fe\u548c\u5706\u73af\u56fe\u3002\u60a8\u8fd8\u5b66\u4e60\u4e86\u5982\u4f55\u4ed4\u7ec6\u8bbe\u7f6e\u4e00\u4e9b\u5c5e\u6027\u7684\u503c\uff0c\u4ee5\u5c06\u8fd9\u4e9b\u997c\u56fe\u8f6c\u6362\u4e3a\u7b80\u5355\u7684\u4eea\u8868\u56fe\u3002\u60a8\u53ef\u4ee5\u5728\u53c2\u8003\u9875\u9762\u4e0a\u9605\u8bfb\u6709\u5173\u997c\u56fe\u53ca\u5176\u4e0d\u540c\u5c5e\u6027\u7684\u66f4\u591a\u4fe1\u606f\u3002<\/p>\n
\u8fd9\u662f\u6211\u4eec\u7684\u4ea4\u4e92\u5f0f Plotly.js \u56fe\u8868\u7cfb\u5217\u7684\u6700\u540e\u4e00\u4e2a\u6559\u7a0b\u3002\u7b2c\u4e00\u4e2a\u4ecb\u7ecd\u6027\u6559\u7a0b\u4e3a\u60a8\u63d0\u4f9b\u4e86\u8be5\u5e93\u7684\u6982\u8ff0\u3002\u7b2c\u4e8c\u3001\u7b2c\u4e09\u548c\u7b2c\u56db\u6559\u7a0b\u5206\u522b\u5411\u60a8\u5c55\u793a\u4e86\u5982\u4f55\u521b\u5efa\u6298\u7ebf\u56fe\u3001\u6761\u5f62\u56fe\u548c\u6c14\u6ce1\u56fe\u3002\u6211\u5e0c\u671b\u60a8\u559c\u6b22\u672c\u6559\u7a0b\u4ee5\u53ca\u6574\u4e2a\u7cfb\u5217\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u7591\u95ee\uff0c\u8bf7\u968f\u65f6\u5728\u8bc4\u8bba\u4e2d\u544a\u8bc9\u6211\u3002<\/p>\n
\u4ee5\u4e0a\u5c31\u662f\u997c\u56fe\u548c\u4eea\u8868\u56fe\uff1a\u4f7f\u7528 Plotly.js \u89e3\u9501\u4ea4\u4e92\u6027\uff0c\u7b2c 5 \u90e8\u5206\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
\u5982\u679c\u60a8\u4ece\u4e00\u5f00\u59cb\u5c31\u5173\u6ce8\u672c\u7cfb\u5217\uff0c\u60a8\u53ef\u80fd\u5df2\u7ecf\u6ce8\u610f\u5230 Plotly.js \u4f7f\u7528\u76f8\u540c\u7684 scatter \u7c7b\u578b\u6765\u521b\u5efa\u6298\u7ebf\u56fe\u548c\u6c14\u6ce1\u56fe\u3002\u552f\u4e00\u7684\u533a\u522b\u662f\uff0c\u6211\u4eec\u5728\u521b\u5efa\u6298\u7ebf\u56fe\u65f6\u5fc5\u987b\u5c06 mode \u8bbe\u7f6e\u4e3a lines\uff0c\u800c\u5728\u521b\u5efa\u6c14\u6ce1\u56fe\u65f6\u5fc5\u987b\u5c06 markers \u8bbe\u7f6e\u4e3a mode\u3002 \u540c\u6837\uff0cPlotly.js \u5141\u8bb8\u60a8\u901a\u8fc7\u5bf9 type \u5c5e\u6027\u4f7f\u7528\u76f8\u540c\u7684\u503c\u5e76\u6839\u636e\u60a8\u8981\u521b\u5efa\u7684\u56fe\u8868\u66f4\u6539\u5176\u4ed6\u5c5e\u6027\u7684\u503c\u6765\u521b\u5efa\u997c\u56fe\u3001\u5706\u73af\u56fe\u548c\u4eea\u8868\u56fe\u3002 \u5728 Plotly.js \u4e2d\u521b\u5efa\u997c\u56fe \u60a8\u53ef\u4ee5\u901a\u8fc7\u5c06 type \u5c5e\u6027\u8bbe\u7f6e\u4e3a pie \u6765\u5728 Plotly.js \u4e2d\u521b\u5efa\u997c\u56fe\u3002\u8fd8\u6709\u5176\u4ed6\u5c5e\u6027\uff0c\u4f8b\u5982 opacity\u3001visible \u548c name \u4e5f\u662f\u5176\u4ed6\u56fe\u8868\u7c7b\u578b\u6240\u5171\u6709\u7684\u3002 name \u5c5e\u6027\u7528\u4e8e\u63d0\u4f9b\u5f53\u524d\u997c\u56fe\u8ddf\u8e2a\u7684\u540d\u79f0\u3002\u8be5\u540d\u79f0\u968f\u540e\u663e\u793a\u5728\u56fe\u4f8b\u4e2d\u4ee5\u4f9b\u8bc6\u522b\u3002\u60a8\u53ef\u4ee5\u901a\u8fc7\u5c06 showlegend \u5c5e\u6027\u5206\u522b\u8bbe\u7f6e\u4e3a true \u6216 false \u6765\u663e\u793a\u6216\u9690\u85cf\u56fe\u8868\u56fe\u4f8b\u4e2d\u7684\u997c\u56fe\u8ddf\u8e2a\u3002\u60a8\u53ef\u4ee5\u4f7f\u7528 labels \u5c5e\u6027\u4e3a\u997c\u56fe\u7684\u4e0d\u540c\u90e8\u5206\u8bbe\u7f6e\u6807\u7b7e\u540d\u79f0\u3002 \u5bf9\u4e8e\u997c\u56fe\uff0c\u6807\u8bb0\u5bf9\u8c61\u7528\u4e8e\u63a7\u5236\u56fe\u8868\u4e0d\u540c\u90e8\u5206\u7684\u5916\u89c2\u3002\u5d4c\u5957\u5728 marker \u4e2d\u7684 color \u5c5e\u6027\u53ef\u7528\u4e8e\u8bbe\u7f6e\u997c\u56fe\u6bcf\u4e2a\u6247\u533a\u7684\u989c\u8272\u3002\u4e0d\u540c\u6247\u533a\u7684\u989c\u8272\u53ef\u4ee5\u6307\u5b9a\u4e3a color \u5c5e\u6027\u7684\u6570\u7ec4\u503c\u3002 \u60a8\u8fd8\u53ef\u4ee5\u4f7f\u7528\u5d4c\u5957\u5728\u7ebf\u6761\u5bf9\u8c61\u5185\u7684 color \u548c width \u5c5e\u6027\u6765\u8bbe\u7f6e\u5305\u56f4\u6bcf\u4e2a\u6247\u533a\u7684\u6240\u6709\u7ebf\u6761\u7684\u989c\u8272\u548c\u5bbd\u5ea6\u3002\u60a8\u8fd8\u53ef\u4ee5\u9009\u62e9\u4f7f\u7528\u5e03\u5c14\u503c sort \u5c5e\u6027\u5bf9\u997c\u56fe\u7684\u6240\u6709\u6247\u533a\u4ece\u5927\u5230\u5c0f\u8fdb\u884c\u6392\u5e8f\u3002\u540c\u6837\uff0c\u501f\u52a9 direction \u5c5e\u6027\uff0c\u53ef\u4ee5\u5c06\u6247\u533a\u7684\u65b9\u5411\u66f4\u6539\u4e3a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-32427","post","type-post","status-publish","format-standard","hentry","category-cms"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/32427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=32427"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/32427\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=32427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=32427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=32427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}