R：交互式繪圖（工具提示）：rCharts淺凹情節：格式化軸

Question

我有一些使用ggplot2創建的圖表，我想在Web應用程序中嵌入：我想用工具提示來增強繪圖。我研究了幾個選項。我目前正在試驗rCharts圖書館，還有其他一些酒窩。

原來這裏是ggplot：

這裏是移調這酒窩劇情第一次嘗試：

我有幾個問題：

格式化後的

1. 有百分比的y軸，數據被改變。

2. 格式化x軸以正確呈現日期後，會打印太多標籤。

我沒有與凹痕圖表綁定，所以如果有其他選項允許更簡單的方法來調整軸格式，我很樂意知道。 （？莫里斯圖表看起來太漂亮，但調整他們看起來就更難了，否）

目的：固定軸，並添加工具提示，讓雙方的日期（格式爲1984）和值（格式40％）。

如果我可以修復1和2，我會很高興。但這裏有另一個不太重要的問題，以防有人有建議：

當懸停在行上時，我可以向工具提示添加行標籤（「前10％」）嗎？

從下載數據後：https://gist.github.com/ptoche/872a77b5363356ff5399，創建 數據幀：

library("rCharts") 
p <- dPlot(
    value ~ Year, 
    groups = c("Fractile"), 
    data = transform(df, Year = as.character(format(as.Date(Year), "%Y"))), 
    type = "line", 
    bounds = list(x = 50, y = 50, height = 300, width = 500) 
) 

雖然基本，到目前爲止好：

df <- read.csv("ps-income-shares.csv") 

基本酒窩情節與創建。但是，下面的命令，打算到Y數據轉換爲百分比，改變了數據：

p$yAxis(type = "addMeasureAxis", showPercent = TRUE) 

我在做什麼毛病showPercent？

僅供參考，這裏是ggplot代碼：

library("ggplot2") 
library("scales") 
p <- ggplot(data = df, aes(x = Year, y = value, color = Fractile)) 
p <- p + geom_line() 
p <- p + theme_bw() 
p <- p + scale_x_date(limits = as.Date(c("1911-01-01", "2023-01-01")), labels = date_format("%Y")) 
p <- p + scale_y_continuous(labels = percent) 
p <- p + theme(legend.position = "none") 
p <- p + geom_text(data = subset(df, Year == "2012-01-01"), aes(x = Year, label = Fractile, hjust = -0.2), size = 4) 
p <- p + xlab("") 
p <- p + ylab("") 
p <- p + ggtitle("U.S. top income shares (%)") 
p 

的信息，圖表上方是基於湯瑪斯·皮克提和伊曼紐爾·賽斯放在一起在他們的美國頂尖收入的研究數據。數據等等可以在他們的網站上找到，例如，

http://elsa.berkeley.edu/users/saez/

http://piketty.pse.ens.fr/en/

編輯：

這裏是Ramnath的溶液的屏幕截圖，帶有標題並將軸標籤微調。謝謝Ramnath！

p$xAxis(inputFormat = '%Y-%m-%d', outputFormat = '%Y') 
p$yAxis(outputFormat = "%") 
p$setTemplate(afterScript = " 
    <script> 
    myChart.axes[0].timeField = 'Year' 
    myChart.axes[0].timePeriod = d3.time.years 
    myChart.axes[0].timeInterval = 10 
    myChart.draw() 
    myChart.axes[0].titleShape.remove() // remove x label 
    myChart.axes[1].titleShape.remove() // remove y label 
    myChart.svg.append('text')   // chart title 
     .attr('x', 40) 
     .attr('y', 20) 
     .text('U.S. top income shares (%)') 
     .style('text-anchor','beginning') 
     .style('font-size', '100%') 
     .style('font-family','sans-serif') 
    </script>    
") 
p 

要更改（而不是刪除）軸標籤，例如：

myChart.axes[1].titleShape.text('Year') 

要將傳說添加到情節：

p$set(width = 1000, height = 600) 
p$legend(
    x = 580, 
    y = 0, 
    width = 50, 
    height = 200, 
    horizontalAlign = "left" 
) 

要保存rchart：

p$save("ps-us-top-income-shares.html", cdn = TRUE) 

基於能夠獲得（沒有任何的花哨的東西）的nvd3文庫的替代用：

df$Year <- strftime(df$Year, format = "%Y") 
n <- nPlot(data = df, value ~ Year, group = 'Fractile', type = 'lineChart') 

Answer 1

這裏是爲了解決（1）的一種方法和（2）。參數showPercent不是爲這些值添加％，而是爲了重新計算這些值，以便將它們疊加到100％，這就是爲什麼您會看到您指出的行爲。

在這一點上，你會看到我們仍然不得不編寫自定義JavaScript來調整x軸以使其顯示我們想要的方式。在未來的迭代中，我們將努力允許在rCharts中訪問整個dimple API。

df <- read.csv("ps-income-shares.csv") 
p <- dPlot(
    value ~ Year, 
    groups = c("Fractile"), 
    data = df, 
    type = "line", 
    bounds = list(x = 50, y = 50, height = 300, width = 500) 
) 
p$xAxis(inputFormat = '%Y-%m-%d', outputFormat = '%Y') 
p$yAxis(outputFormat = "%") 
p$setTemplate(afterScript = " 
    <script> 
    myChart.axes[0].timeField = 'Year' 
    myChart.axes[0].timePeriod = d3.time.years 
    myChart.axes[0].timeInterval = 5 
    myChart.draw() 

    //if we wanted to change our line width to match the ggplot chart 
    myChart.series[0].shapes.style('stroke-width',1); 

    </script> 
") 
p 

Answer 2

rCharts正在迅速發展。我知道它已經晚了，但如果有人想看到它，這裏顯示的ggplot示例幾乎完全複製。

#For information, the chart above is based 
    #on the data put together by Thomas Piketty and Emmanuel Saez 
    #in their study of U.S. top incomes. 
    #The data and more may be found on their website, e.g. 
    #http://elsa.berkeley.edu/users/saez/ 
    #http://piketty.pse.ens.fr/en/ 

    #read in the data 
    df <- read.csv(
    "https://gist.githubusercontent.com/ptoche/872a77b5363356ff5399/raw/ac86ca43931baa7cd2e17719025c8cde1c278fc1/ps-income-shares.csv", 
    stringsAsFactors = F 
) 

    #get year as date 
    df$YearDate <- as.Date(df$Year) 

    library("ggplot2") 
    library("scales") 
    p <- ggplot(data = df, aes(x = YearDate, y = value, color = Fractile)) 
    p <- p + geom_line() 
    p <- p + theme_bw() 
    p <- p + scale_x_date(limits = as.Date(c("1911-01-01", "2023-01-01")), labels = date_format("%Y")) 
    p <- p + scale_y_continuous(labels = percent) 
    p <- p + theme(legend.position = "none") 
    p <- p + geom_text(data = subset(df, Year == "2012-01-01"), aes(x = YearDate, label = Fractile, hjust = -0.2), size = 4) 
    p <- p + xlab("") 
    p <- p + ylab("") 
    p <- p + ggtitle("U.S. top income shares (%)") 
    gp <- p 
    gp 


    p <- dPlot(
    value ~ Year, 
    groups = c("Fractile"), 
    data = df, 
    type = "line", 
    bounds = list(x = 50, y = 50, height = 300, width = 500) 
) 
    p$xAxis(inputFormat = '%Y-%m-%d', outputFormat = '%Y') 
    p$yAxis(outputFormat = "%") 
    p$setTemplate(afterScript = " 
    <script> 
     myChart.axes[0].timeField = 'Year' 
     myChart.axes[0].timePeriod = d3.time.years 
     myChart.axes[0].timeInterval = 5 
     myChart.draw() 

     //if we wanted to change our line width to match the ggplot chart 
     myChart.series[0].shapes.style('stroke-width',1); 

     //to take even one step further 
     //we can add labels like in the ggplot example 
     myChart.svg.append('g') 
     .selectAll('text') 
     .data(
      d3.nest().key(function(d){return d.cx}).map(myChart.series[0]._positionData)[myChart.axes[0]._max]) 
     .enter() 
      .append('text') 
      .text(function(d){return d.aggField[0]}) 
      .attr('x',function(d){return myChart.axes[0]._scale(d.cx)}) 
      .attr('y',function(d){return myChart.axes[1]._scale(d.cy)}) 
      .attr('dy','0.5em') 
      .style('font-size','80%') 
      .style('fill',function(d){return myChart._assignedColors[d.aggField[0]].fill}) 
    </script> 
    ") 
    p$defaultColors(ggplot_build(gp)$data[[2]]$colour) 
    p