plotly 圖套上 KIT 的樣子（Chart）

讓 plotly 圖和 app 的其他部分看起來是一套：字型、字級、顏色都用 KIT 的設計變數。只改樣子，不改資料（點、線、軸的範圍、刻度的位置、hover 的文字都不動）。

Usage

kit_plotly_style(
  p,
  legend = c("auto", "bottom", "right", "keep"),
  colorscale = TRUE,
  fonts = TRUE,
  filename = "kit-chart",
  font_size = 15,
  brand = kit_current_brand()
)

Arguments

p

plotly 圖（plotly::plot_ly()、kits 的 plot()；plotly::plotly_build() 過的也可以）。

legend

圖例放哪裡：

"auto"（預設）：超過 4 項，或最長的一項超過 20 欄（中文字算 2 欄）時放在圖的下面、橫排、靠左；其他放在右邊。圖寬小於 600px（手機）時也放到下面，變寬時回到右邊（瀏覽器端判斷）。
"bottom"：一律在下面；"right"：一律在右邊。
"keep"：不動圖例的位置（只換字型）。

colorscale

TRUE（預設）時熱圖類換成 kit_chart_sequential()；FALSE 時保留原來的色階。

fonts

TRUE（預設）時附上 Google Fonts 的圓體（kit_plotly_fonts()），下載的單一 HTML 檔也是 app 的字型。

filename

工具列「下載 PNG」、「下載 SVG」的檔名（不含副檔名）。

font_size

內文字級（px）；其他字級跟著它算。

brand

品牌（kit_brand()）：熱圖的色階從它來（kit_chart_sequential()）。預設是 kit_current_brand()（沒有設定時是 KIT）。字、軸線、底色維持設計語言的墨色與白色。

Value

plotly 圖（plotly_build() 過的）。

Details

改的地方：

字型：全部用 app 的圓體 "Chiron GoRound TC", sans-serif；字是 nb-ink（#141414），刻度是 text-hint（#5a5a5a）。字級：內文 font_size（預設 15px）、圖例與滑過的說明框小 1px、刻度小 2px、標題約 h5（font_size 的 1.2 倍）。
標題：靠左、粗體。圖寬放不下時在瀏覽器端換行（在中文字或空白之間斷開）。
每一條軸（xaxis、xaxis2…、yaxis…，包括 Wright map 這類並排的小圖）：軸線 nb-ink 1.5px、格線 line-soft（#e3ded2）、零線 line（#d9d4c5）、刻度朝外；不畫四邊的框（mirror = FALSE，並拿掉 kits 畫在每個小圖外面的黑框； KIT 設計語言：框裡面不再有框）。軸的標題與刻度放不下時自動加寬邊界（automargin）。
底色：白（圖放在白色卡片裡）；下載的 PNG、SVG 也是白底。
顏色：colorway 是 Okabe–Ito（kit_chart_colors()）。plotly 自己給的預設色換成 Okabe–Ito 同一個位置的顏色；kits 或 kitsUI 指定的顏色不動（kitsUI 的角色色、類別換色都保留）。
色階（colorscale = TRUE）：熱圖類（heatmap、contour、histogram2d）換成 kit_chart_sequential()（極淡萊姆 → 淡萊姆 → KIT 綠）；色條的字、外框一律換樣子。
滑過的說明框：白底、nb-ink 框、app 的字型。
圖例：app 的字型、沒有框。位置見 legend。
工具列：沒有 plotly 的標誌；只留「下載 PNG」、「下載 SVG」、放大、縮小、回到原來的範圍；介面文字是繁體中文（zh-TW）。PNG 一律 2100 像素寬（7 吋、300 dpi；長寬比照畫面），檔案裡寫 300 dpi，插進 Word 預設就是 7 吋寬。SVG 是向量圖，給要 600 dpi 以上、EPS 或 PDF 的期刊；文字用打開它的電腦裡有的字型（圓體是網頁字型）。兩個都在瀏覽器裡做，不經過 R；下載的 HTML 檔裡也能用。
邊界：上下左右一樣小，軸、圖例、色條放不下時 plotly 自動加寬；不會切到字。

不改的地方：資料、軸的範圍與刻度、trace 的顏色（plotly 的預設色以外）、點的形狀、線的粗細與虛線、透明度、hover 的文字、圖例的文字、標題與軸標題的文字（只加粗體）、圖的高度與寬度、shapes（kits 的小圖外框以外，例如適配度圖的灰色帶）。

和 kits、kitsUI 一起用時的順序：kits 的 plot() → kitsUI 換色（kit_chart_categorical()、kit_chart_role()）→ kitsUI 換中文（kit_chart_zh()）→ kit_plotly_style()。換色和這個函式的順序可以對調（這裡不動指定的顏色），但換中文要在前面：這裡把標題加上 <b>，之後 kit_chart_zh() 就認不得原來的英文標題了。同一張圖套兩次和套一次一樣。

Examples

if (requireNamespace("plotly", quietly = TRUE)) {
  d <- data.frame(wave = rep(c(3, 6, 12), 2), score = c(8, 11, 15, 7, 10, 13),
                  cohort = rep(c("M03", "M36"), each = 3))
  p <- plotly::plot_ly(d, x = ~wave, y = ~score, split = ~cohort,
                       type = "scatter", mode = "lines+markers")
  p <- plotly::layout(p, title = "各世代的分數中位數")
  kit_plotly_style(p)
}

Usage

Arguments

Value

Details

See also

Examples