plotly 漏斗图是否可以有阴影颜色？

Question

I am trying the following code but am not getting any hatched bars:

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

Answer 1

I couldn't find a way through Plotly, but I did find a way around it. Essentially, you have two options. You can create and call the pattern definitions. Or you exploit Plotly and repurpose their work. Since I'm all about working smarter, not harder...

I planned on making a funnel with a depth of five layers with a plot pilfered from Plotly's examples. So to create the patterns, I created a 5-bar barplot with patterns. (I actually used the funnel data in the bar plot, but the data is irrelevant.)

The important part is designating the patterns that you want to see in the funnel 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)))))

I opened the plot in my browser and copied the entire <g class="patterns"> element.

Open the plot in the browser. Then right-click on the browser, select 'inspect' or 'developer tools'. (The verbiage depends on your browser.) Go to the elements tab and look for SVG -> defs.

Click on the ellipses on the left side of the screen, then select copy element . In the next step, I'm going to change the IDs. You may find it a lot easier to change them in HTML before you copy them.

# 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>'

If you wanted to change them in HTML (which is probably easier), double-click on the string next to the attribute "id". If something goes wrong, just refresh your browser, no harm done. I made them names that were definitely not keywords in HTML, CSS, or JS, and identified what they represented: p-slash , p-ex , p-dash , p-plus , and p-dot .

Now you just have to take this content and feed it back to Plotly...well, shove it down its throat, really.

This uses the library htmlwidgets . Since it's only used this one time, I didn't call the library.

This call for onRender looks for the defs of your funnel plot (which will be empty), and replaces it. Then it looks for each layer of the funnel and changes the fill from a color to one of these patterns pilfered from the barplot.

One tip...don't forget (or by the way, if you didn't know) Javascript indices start at zero, unlike R which starts everything at 1. So the first layer is layer zero.

When you execute the declarations of ptn or ptn2 in R, it will automatically add the "" before each " . So call it and then copy the string in the console when you add it to the onRender function in this code.

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)")

If you have any questions, let me know.