Question

我正在尝试构建一个合并ggplot2和plotly的地块。两条垂直线出现在纯ggplot2上，但是一旦我在其上调用plotly::ggplotly，它们就会消失。如何使数据也显示在ggplotly版本上？如果您的解决方案仅使用plot_ly，那也没关系。

数据：

df <- structure(list(date = structure(c(17226, 17257, 17287, 17318, 
17348, 17379, 17410, 17440, 17471, 17501, 17226, 17257, 17287, 
17318, 17348, 17379, 17410, 17440, 17471, 17501, 17226, 17257, 
17287, 17318, 17348, 17379, 17410, 17440, 17471, 17501), class = "Date"), 
    n = c(253L, 217L, 257L, 166L, 121L, 56L, 68L, 62L, 142L, 
    20L, 174L, 228L, 180L, 158L, 80L, 39L, 47L, 54L, 107L, 12L, 
    93L, 74L, 47L, 49L, 55L, 16L, 52L, 53L, 32L, 3L), act = c("a", 
    "a", "a", "a", "a", "a", "a", "a", "a", "a", "b", "b", "b", 
    "b", "b", "b", "b", "b", "b", "b", "c", "c", "c", "c", "c", 
    "c", "c", "c", "c", "c")), class = "data.frame", row.names = c(NA, 
-30L), .Names = c("date", "n", "act"))

facts_timeline <- structure(list(Date = structure(c(17507, 17293), class = "Date"), 
    ShortDescription = c("Marketing Campaign", "Relevant Fact 1"
    )), row.names = c(NA, -2L), class = c("tbl_df", "tbl", "data.frame"
), spec = structure(list(cols = structure(list(Date = structure(list(
    format = ""), .Names = "format", class = c("collector_date", 
"collector")), Tenant = structure(list(), class = c("collector_character", 
"collector")), ShortDescription = structure(list(), class = c("collector_character", 
"collector")), LongDescription = structure(list(), class = c("collector_character", 
"collector"))), .Names = c("Date", "Tenant", "ShortDescription", 
"LongDescription")), default = structure(list(), class = c("collector_guess", 
"collector"))), .Names = c("cols", "default"), class = "col_spec"), .Names = c("Date", 
"ShortDescription"))

制作情节的代码：

p <- df %>% 
  ggplot(aes(date, n, group = act, color = act)) + 
  geom_line() + 
  geom_vline(data = facts_timeline, aes(xintercept = Date))

在这里你可以看到两条垂直线：

但不是在这里：

ggplotly(p)

Answer 1

不能直接在plotly中绘制垂直线，但这是我的解决方法：

vline_list <- list()
for(i in 1:nrow(facts_timeline)){ 
  vline_list[[i]] <- 
    list(type      = "line",
         fillcolor = line_color, 
         line      = list("black"),
         opacity   = 0.3,
         x0        = facts_timeline$Date[i],
         x1        = facts_timeline$Date[i],
         xref      = "x",
         y0        = 0, 
         y1        = max(df$n),
         yref      = "y")
}

plot_ly(x = ~df$date, y = ~df$n,color = df$act, mode = 'lines') %>% 
  layout(shapes  = vline_list)

使用for循环，我们遍历facts_timeline中的所有行并创建一个新行。 Tis线没有无限长度，如`ggplot。在我的例子中，线是y轴的最大值。您可以根据自己的需要进行更改。

Answer 2

只需将import axios from "axios"; import { GET_PROFILE, PROFILE_LOADING, CLEAR_CURRENT_PROFILE } from "../types"; //Get current profile export const getCurrentProfile = (preference, history) => dispatch => { // dispatch(setProfileLoading()); // not needed return axios .get(`https://jsonplaceholder.typicode.com/${preference}`) .then(res => { dispatch({ type: GET_PROFILE, payload: res.data }); // history.push("/") // <== once data has been saved, push back to "/" }) .catch(err => dispatch({ type: GET_PROFILE, payload: { err } }) ); }; //Get current profile (async/await) // export const getCurrentProfile = (preference, history) => async dispatch => { // try { // dispatch(setProfileLoading()); // not needed // const res = await axios.get( // `https://jsonplaceholder.typicode.com/${preference}` // ); // dispatch({ // type: GET_PROFILE, // payload: res.data // }); // // history.push("/") // <== once data has been saved, push back to "/" // } catch (e) { // dispatch({ // type: GET_PROFILE, // payload: { e } // }); // } // }; //Profile Loading export const setProfileLoading = () => ({ type: PROFILE_LOADING }); //Clear Profile export const clearCurrentProfile = () => ({ type: CLEAR_CURRENT_PROFILE });设置为数字，一切正常。

import { combineReducers } from "redux";
import { CLEAR_CURRENT_PROFILE, GET_PROFILE, PROFILE_LOADING } from "../types";

const initialState = {
  profile: [],
  profiles: [],
  loading: false
};

const profileReducer = (state = initialState, { type, payload }) => {
  switch (type) {
    case PROFILE_LOADING:
      return {
        ...state,
        loading: true
      };
    case GET_PROFILE:
      return {
        ...state,
        profile: payload,
        loading: false
      };
    case CLEAR_CURRENT_PROFILE:
      return {
        ...state,
        profile: []
      };
    default:
      return state;
  }
};

export default combineReducers({
  profile: profileReducer
});

Answer 3

plot_ly(df, 
        x = ~ date, 
        y = ~ n, 
        color = ~act, 
        text = ~act,
        mode = "lines", 
        type = "scatter",
        hoverinfo = "x+y+text") %>% 
    layout(hovermode = "closest",
        xaxis=list(range=c("2017-03-01", "2018-01-01"))) %>%
    add_lines(x=rep(facts_timeline[["Date"]][[1]], 2), 
        y=c(0, 300),
        name=facts_timeline[["ShortDescription"]][[1]],
        inherit=FALSE, 
        hoverinfo = "name",
        line = list(color="#000000")) %>% 
    add_lines(x=rep(facts_timeline[["Date"]][[2]], 2), 
        y=c(0, 300), 
        name=facts_timeline[["ShortDescription"]][[1]],
        inherit=FALSE, 
        hoverinfo = "name",
        line = list(color="#000000"))

添加垂直线到ggplotly图

3 个答案: