使用 highcharter 或 Rcharts 向饼图添加图例

Question

我需要在闪亮的应用程序（highcharter、rcharts 等）上使用 R 的任何 highcharts 包为饼图添加图例。

例如。代码

library("shiny")
library("highcharter")

data(citytemp)

ui <- fluidPage(
  h1("Highcharter Demo"),
  fluidRow(
    column(width = 4, class = "panel",
           selectInput("type", label = "Type", width = "100%",
                       choices = c("line", "column", "bar", "spline")), 
           selectInput("stacked", label = "Stacked",  width = "100%",
                       choices = c(FALSE, "normal", "percent")),
           selectInput("theme", label = "Theme",  width = "100%",
                       choices = c(FALSE, "fivethirtyeight", "economist",
                                   "darkunica", "gridlight", "sandsignika",
                                   "null", "handdrwran", "chalk")
           )
    ),
    column(width = 8,
           highchartOutput("hcontainer",height = "500px")
    )
  )
)

server = function(input, output) {
  
  output$hcontainer <- renderHighchart({
    
    hc <- hc_demo() %>%
      hc_rm_series("Berlin") %>% 
      hc_chart(type = 'pie')
    
    if (input$stacked != FALSE) {
      hc <- hc %>%
        hc_plotOptions(showInLegend=TRUE,dataLabels=FALSE)
    }
    hc
    
  })
  
}

shinyApp(ui = ui, server = server)

代码运行了一个糟糕的饼图示例，无论我在哪里看，我都找不到带有图例的 highcharts 饼图示例。

修复它的尝试包括：

hc_legend(enabled=TRUE)

hc_plotOptions(showInLegend=TRUE,dataLabels=FALSE)

使用 Rcharts 尝试过类似的尝试，他们都失败了，然后我在寻找 highcharts 的源代码时绝望地迷失了

使用类似的功能，我能够通过使用上述两种解决方案中的任何一种来创建带有典型 JS 格式图例的 highchart 饼图，有人对此问题有合理的解决方案吗？可能是一个链接到一个体面的资源来解决这个问题？

带有图例的highcharts的实际JS示例，无耻地从官方highcharts网站上撕下来。

$(function () {

    $(document).ready(function () {

        // Build the chart
        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title: {
                text: 'Browser market shares January, 2015 to May, 2015'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    showInLegend: true
                }
            },
            series: [{
                name: 'Brands',
                colorByPoint: true,
                data: [{
                    name: 'Microsoft Internet Explorer',
                    y: 56.33
                }, {
                    name: 'Chrome',
                    y: 24.03,
                    sliced: true,
                    selected: true
                }, {
                    name: 'Firefox',
                    y: 10.38
                }, {
                    name: 'Safari',
                    y: 4.77
                }, {
                    name: 'Opera',
                    y: 0.91
                }, {
                    name: 'Proprietary or Undetectable',
                    y: 0.2
                }]
            }]
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

Answer 1

首先，在您的示例中，hc_demo() 是一个折线图示例，因此仅通过更改图表类型将无法正常工作，因为数据未按照饼图的要求进行编码 (@987654323 @ 和 name 值）。

这是一个原始示例。正如您在 javascript 示例中所示，您只需要强制显示图例，因为对于饼图，默认值为 false。这是使用 plotOptions -> pie -> showInLegend = TRUE 实现的。

library(highcharter)
highchart() %>% 
  hc_chart(type = "pie") %>% 
  hc_plotOptions(
    series = list(showInLegend = TRUE)
  ) %>% 
  hc_add_series(data = list(
    list(y = 3, name = "cat 1"),
    list(y = 4, name = "cat 2")
    )
  )

最后我推荐你查看replicating highcharts demos in highcharter。