echarts饼图中间的字如何自适应

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了echarts饼图中间的字如何自适应相关的知识,希望对你有一定的参考价值。

参考技术A 通过js设置自适应 $(function()

//自适应设置 width = $(window).width(); height = $(window).height(); //设置图表大小

在 R 中的 plotly 饼图中使用自定义图标

【中文标题】在 R 中的 plotly 饼图中使用自定义图标【英文标题】:Use a custom icon in plotly's pie chart in R 【发布时间】:2018-03-17 03:38:44 【问题描述】:

我想知道是否有办法为 plotly 的饼图使用自定义图标,而不是通常的饼图分割

到目前为止,我正在使用如下所示的饼图显示性别信息:

我试图让它看起来像下面链接中的性别图:

https://app.displayr.com/Dashboard?id=c1506180-fe64-4941-8d24-9ec4a54439af#page=3e133117-f3b2-488b-bc02-1c2619cf3914

情节代码如下:

plot_ly(genderselection, labels = ~Gender, values = ~Freq, type = 'pie') %>%
      layout(title = paste0("Gender Distribution of Patients from Boston"),
             xaxis = list(showgrid = FALSE, zeroline = FALSE, showticklabels = FALSE),
             yaxis = list(showgrid = FALSE, zeroline = FALSE, showticklabels = FALSE),
             legend=list(orientation='h'))

性别选择数据框:

  Gender Freq
     F   70
     M   65

如果不使用 plotly,是否有任何其他库可用于使用自定义图标显示信息?

【问题讨论】:

【参考方案1】:

(1) 下载可用的 png 文件 here 并将其保存在您的工作目录中为 man_woman.png (2) 运行以下代码:

library(png)
library(plotly)

genderselection <- read.table(text="
  Gender Freq
     F   70
     M   30
", header=T)
pcts <- round(prop.table(genderselection$Freq)*100)

# Load png file with man and woman
img <- readPNG("man_woman.png")
h <- dim(img)[1]
w <- dim(img)[2]

# Find the rows where feet starts and head ends
pos1 <- which(apply(img[,,1], 1, function(y) any(y==1)))
mn1 <- min(pos1)
mx1 <- max(pos1)
pospctM <- round((mx1-mn1)*pcts[2]/100+mn1)
pospctF <- round((mx1-mn1)*pcts[1]/100+mn1)

# Fill bodies with a different color according to percentages
imgmtx <- img[h:1,,1]
whitemtx <- (imgmtx==1)
colmtx <- matrix(rep(FALSE,h*w),nrow=h)
midpt <- round(w/2)-10
colmtx[mx1:pospctM,1:midpt] <- TRUE
colmtx[mx1:pospctF,(midpt+1):w] <- TRUE
imgmtx[whitemtx & colmtx] <- 0.5

# Plot matrix using heatmap and print text
labs <- c(paste0(pcts[2], "% Males"),paste0(pcts[1], "% Females"))
ax <- list(ticks='', showticklabels=FALSE, showgrid=FALSE, zeroline=FALSE)
p <- plot_ly(z = imgmtx, showscale=FALSE, type='heatmap', width = 500,  height = 500) %>%
     add_text(x = c(100,250), y = c(20,20), type='heatmap', mode="text",
        text=labs, showlegend=FALSE, textfont=list(size=20, color="#FFFFFF"), inherit=FALSE) %>%
     layout(xaxis = ax,  yaxis = ax)  
p

【讨论】:

这正是我想要的!谢谢 !有没有办法将背景更改为白色和颜色填充?我确实看到您根据百分比用不同的颜色填充了身体,但默认情况下它是否采用填充颜色?我们可以根据自己的选择定义颜色吗? @DollarVora 在这里你可以找到一种方法来控制情节的调色板heatmap:***.com/questions/44918709/… 我知道这是一篇旧帖子,但我有同样的后续问题。这是你可以做到的palette &lt;- colorRampPalette(c(rgb(48, 58, 63, 1, maxColorValue = 255), rgb(204, 204, 204, 1, maxColorValue = 255), rgb(7, 200, 200, 1, maxColorValue = 255)))然后在plot_ly中使用它plot_ly(z = imgmtx, showscale=FALSE, type='heatmap', width = 500, height = 500, colors = palette(50))

以上是关于echarts饼图中间的字如何自适应的主要内容,如果未能解决你的问题,请参考以下文章

echarts的自适应问题(窗口自适应,侧边栏自适应,el-tab中的自适应)

Echarts图表自适应布局

vue项目中echarts自适应宽高的设置

echarts 的自适应

实现echarts图表自适应

echarts 视图自适应问题