plotly 漏斗圖是否可以有陰影顏色？

Question

我正在嘗試以下代碼，但沒有得到任何陰影條：

plot_ly() %>% 
  add_trace(type="funnel",
  y = c("level one","level two"),
  x = c(500,100),
  marker = list(pattern = list(shape = "X")))

Answer 1

我找不到通過Plotly 的方法，但我確實找到了解決方法。 本質上，您有兩個選擇。 您可以創建和調用模式定義。 或者你利用 Plotly 並重新利用他們的工作。 因為我只想更聰明地工作，而不是更努力地工作......

我計划用從 Plotly 的示例中竊取的 plot 制作一個深度為五層的漏斗。 因此，為了創建模式，我創建了一個帶有模式的 5 條柱狀圖。 （其實我用的是plot欄里的漏斗數據，但是數據是無關緊要的。）

重要的部分是指定您希望在漏斗 plot 中看到的模式。

library(plotly)

xy = data.frame(x = c("Website visit", "Downloads", "Potential customers", 
                      "Requested price", "invoice sent"),
                y = c(39, 27.4, 20.6, 11, 2))

plot_ly(type = "bar", data = xy, x = ~x, y = ~y,
        marker = list(pattern = list(
          fillmode = "overlay", 
          shape = setNames(c("/", "x", "-", "+", "."), 
                           unlist(xy$x)))))

我在瀏覽器中打開了 plot 並復制了整個<g class="patterns">元素。

在瀏覽器中打開 plot。 然后右鍵單擊瀏覽器，select“檢查”或“開發者工具”。 （措辭取決於您的瀏覽器。） Go 到元素選項卡並查找 SVG -> defs。

單擊屏幕左側的省略號，然后單擊 select copy element 。 在下一步中，我將更改 ID。 在復制它們之前，您可能會發現在 HTML 中更改它們要容易得多。

# copied patterns from this plot
ptn <- '<g class="patterns"><pattern id="p3fa9fb-687849-0" width="11.313708498984761px" height="11.313708498984761px" patternUnits="userSpaceOnUse" patternTransform=""><rect width="11.313708498984761px" height="11.313708498984761px" fill="rgba(31,119,180,1)"></rect><path d="M-2.8284271247461903,2.8284271247461903l5.656854249492381,-5.656854249492381M0,11.313708498984761L11.313708498984761,0M8.485281374238571,14.142135623730951l5.656854249492381,-5.656854249492381" opacity="0.5" stroke="#fff" stroke-width="2.4px"></path></pattern><pattern id="p3fa9fb-687849-1" width="11.313708498984761px" height="11.313708498984761px" patternUnits="userSpaceOnUse" patternTransform=""><rect width="11.313708498984761px" height="11.313708498984761px" fill="rgba(31,119,180,1)"></rect><path d="M-2.8284271247461903,2.8284271247461903l5.656854249492381,-5.656854249492381M0,11.313708498984761L11.313708498984761,0M8.485281374238571,14.142135623730951l5.656854249492381,-5.656854249492381M8.485281374238571,-2.8284271247461903l5.656854249492381,5.656854249492381M0,0L11.313708498984761,11.313708498984761M-2.8284271247461903,8.485281374238571l5.656854249492381,5.656854249492381" opacity="0.5" stroke="#fff" stroke-width="1.3067197877273955px"></path></pattern><pattern id="p3fa9fb-687849-2" width="8px" height="8px" patternUnits="userSpaceOnUse" patternTransform=""><rect width="8px" height="8px" fill="rgba(31,119,180,1)"></rect><path d="M0,4L8,4" opacity="0.5" stroke="#fff" stroke-width="2.4px"></path></pattern><pattern id="p3fa9fb-687849-3" width="8px" height="8px" patternUnits="userSpaceOnUse" patternTransform=""><rect width="8px" height="8px" fill="rgba(31,119,180,1)"></rect><path d="M4,0L4,8M0,4L8,4" opacity="0.5" stroke="#fff" stroke-width="1.3067197877273955px"></path></pattern><pattern id="p3fa9fb-687849-4" width="8px" height="8px" patternUnits="userSpaceOnUse" patternTransform=""><rect width="8px" height="8px" fill="rgba(31,119,180,1)"></rect><circle cx="4" cy="4" r="2.472154892948413" opacity="0.5" fill="#fff"></circle></pattern></g>'
      # changed the ids to p-slash, p-ex, p-dash, p-plus, and p-dot
ptn2 <- '<g class="patterns"><pattern id="p-slash" width="11.313708498984761px" height="11.313708498984761px" patternUnits="userSpaceOnUse" patternTransform=""><rect width="11.313708498984761px" height="11.313708498984761px" fill="rgba(31,119,180,1)"></rect><path d="M-2.8284271247461903,2.8284271247461903l5.656854249492381,-5.656854249492381M0,11.313708498984761L11.313708498984761,0M8.485281374238571,14.142135623730951l5.656854249492381,-5.656854249492381" opacity="0.5" stroke="#fff" stroke-width="2.4px"></path></pattern><pattern id="p-ex" width="11.313708498984761px" height="11.313708498984761px" patternUnits="userSpaceOnUse" patternTransform=""><rect width="11.313708498984761px" height="11.313708498984761px" fill="rgba(31,119,180,1)"></rect><path d="M-2.8284271247461903,2.8284271247461903l5.656854249492381,-5.656854249492381M0,11.313708498984761L11.313708498984761,0M8.485281374238571,14.142135623730951l5.656854249492381,-5.656854249492381M8.485281374238571,-2.8284271247461903l5.656854249492381,5.656854249492381M0,0L11.313708498984761,11.313708498984761M-2.8284271247461903,8.485281374238571l5.656854249492381,5.656854249492381" opacity="0.5" stroke="#fff" stroke-width="1.3067197877273955px"></path></pattern><pattern id="p-dash" width="8px" height="8px" patternUnits="userSpaceOnUse" patternTransform=""><rect width="8px" height="8px" fill="rgba(31,119,180,1)"></rect><path d="M0,4L8,4" opacity="0.5" stroke="#fff" stroke-width="2.4px"></path></pattern><pattern id="p-plus" width="8px" height="8px" patternUnits="userSpaceOnUse" patternTransform=""><rect width="8px" height="8px" fill="rgba(31,119,180,1)"></rect><path d="M4,0L4,8M0,4L8,4" opacity="0.5" stroke="#fff" stroke-width="1.3067197877273955px"></path></pattern><pattern id="p-dot" width="8px" height="8px" patternUnits="userSpaceOnUse" patternTransform=""><rect width="8px" height="8px" fill="rgba(31,119,180,1)"></rect><circle cx="4" cy="4" r="2.472154892948413" opacity="0.5" fill="#fff"></circle></pattern></g>'

如果您想在 HTML 中更改它們（這可能更容易），請雙擊屬性“id”旁邊的字符串。 如果出現問題，只需刷新瀏覽器即可，不會造成任何傷害。 我將它們命名為 HTML、CSS 或 JS 中絕對不是關鍵字的名稱，並確定它們代表的內容： p-slash 、 p-ex 、 p-dash 、 p-plus和p-dot 。

現在你只需要把這個內容反饋給 Plotly ......好吧，把它塞進喉嚨里，真的。

這使用庫htmlwidgets 。 因為只用過這一次，所以沒有給圖書館打電話。

這個onRender調用會查找您的漏斗 plot（將為空）的defs ，並替換它。 然后它查找漏斗的每一層，並將填充從一種顏色更改為從條形圖中竊取的這些圖案之一。

一個提示......不要忘記（或者順便說一句，如果你不知道）Javascript 索引從零開始，這與 R 不同，它從 1 開始。所以第一層是第零層。

當你在 R 中執行ptn或ptn2的聲明時，它會自動在每個 " 之前添加 " " 。所以調用它，然后在將它添加到此代碼中的onRender function 時在控制台中復制字符串。

plot_ly(type = "funnel",        # make the finicky funnel
        y = c("Website visit", "Downloads", "Potential customers", 
              "Requested price", "invoice sent"), 
        x = c(39, 27.4, 20.6, 11, 2)) %>%
  layout(yaxis = list(categoryarray = unlist(xy$y))) %>% 
  htmlwidgets::onRender("setTimeout(function() {  /* find and replace patterns */
                          ptn = document.querySelector('svg > defs > g.patterns');
                          ptn.outerHTML = '<g class=\"patterns\"><pattern id=\"p-slash\" width=\"11.313708498984761px\" height=\"11.313708498984761px\" patternUnits=\"userSpaceOnUse\" patternTransform=\"\"><rect width=\"11.313708498984761px\" height=\"11.313708498984761px\" fill=\"rgba(31,119,180,1)\"></rect><path d=\"M-2.8284271247461903,2.8284271247461903l5.656854249492381,-5.656854249492381M0,11.313708498984761L11.313708498984761,0M8.485281374238571,14.142135623730951l5.656854249492381,-5.656854249492381\" opacity=\"0.5\" stroke=\"#fff\" stroke-width=\"2.4px\"></path></pattern><pattern id=\"p-ex\" width=\"11.313708498984761px\" height=\"11.313708498984761px\" patternUnits=\"userSpaceOnUse\" patternTransform=\"\"><rect width=\"11.313708498984761px\" height=\"11.313708498984761px\" fill=\"rgba(31,119,180,1)\"></rect><path d=\"M-2.8284271247461903,2.8284271247461903l5.656854249492381,-5.656854249492381M0,11.313708498984761L11.313708498984761,0M8.485281374238571,14.142135623730951l5.656854249492381,-5.656854249492381M8.485281374238571,-2.8284271247461903l5.656854249492381,5.656854249492381M0,0L11.313708498984761,11.313708498984761M-2.8284271247461903,8.485281374238571l5.656854249492381,5.656854249492381\" opacity=\"0.5\" stroke=\"#fff\" stroke-width=\"1.3067197877273955px\"></path></pattern><pattern id=\"p-dash\" width=\"8px\" height=\"8px\" patternUnits=\"userSpaceOnUse\" patternTransform=\"\"><rect width=\"8px\" height=\"8px\" fill=\"rgba(31,119,180,1)\"></rect><path d=\"M0,4L8,4\" opacity=\"0.5\" stroke=\"#fff\" stroke-width=\"2.4px\"></path></pattern><pattern id=\"p-plus\" width=\"8px\" height=\"8px\" patternUnits=\"userSpaceOnUse\" patternTransform=\"\"><rect width=\"8px\" height=\"8px\" fill=\"rgba(31,119,180,1)\"></rect><path d=\"M4,0L4,8M0,4L8,4\" opacity=\"0.5\" stroke=\"#fff\" stroke-width=\"1.3067197877273955px\"></path></pattern><pattern id=\"p-dot\" width=\"8px\" height=\"8px\" patternUnits=\"userSpaceOnUse\" patternTransform=\"\"><rect width=\"8px\" height=\"8px\" fill=\"rgba(31,119,180,1)\"></rect><circle cx=\"4\" cy=\"4\" r=\"2.472154892948413\" opacity=\"0.5\" fill=\"#fff\"></circle></pattern></g>';
                                          /* find the plot layers */
                          lyrs = document.querySelectorAll('svg g.cartesianlayer g.plot g.point');
                                          /* define the patterns for each layer */
                          lyrs[0].firstChild.style.fill = 'url(#p-slash)';
                          lyrs[1].firstChild.style.fill = 'url(#p-ex)';
                          lyrs[2].firstChild.style.fill = 'url(#p-dash)';
                          lyrs[3].firstChild.style.fill = 'url(#p-plus)';
                          lyrs[4].firstChild.style.fill = 'url(#p-dot)';
                        },200)")

如果您有任何問題，請告訴我。