javascript - 使用 highcharter 或 Rcharts 将图例添加到饼图

Question

我需要在 Shiny 的应用程序(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) <-- does not work, makes no change.

hc_plotOptions(showInLegend=TRUE,dataLabels=FALSE) <-- Again, no change

Using Rcharts with similar attempts, they both failed, I then became hopelessly lost looking through source code for 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() 是一个折线图示例，因此由于数据未按要求进行编码，因此仅通过更改图表类型无法很好地工作饼图(y 和 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 .