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

时间:2016-07-04 07:46:22

标签: javascript r highcharts rcharts

我需要在一个闪亮的app(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)

代码运行一个饼图的蹩脚示例,无论我在哪里,我都找不到带有图例的高图饼图的示例。

尝试修复它包括:

  

hc_legend(enabled = TRUE)&lt; - 不起作用,不做任何更改。

     

hc_plotOptions(showInLegend = TRUE,dataLabels = FALSE)&lt; - 再次,没有变化

     

使用Rcharts进行类似的尝试,他们都失败了,然后我通过源代码寻找高级图表而无可救药地失去了

使用类似的功能我能够使用上述两种解决方案中的任何一种,以典型的JS格式创建带有图例的高图饼图,是否有人有合理的解决方案来解决这个问题?可能是一个合适的资源链接,以便搞清楚它?

带有传奇的高级图表的实际JS示例,从官方高级网站上无耻地撕掉。

&#13;
&#13;
$(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
                }]
            }]
        });
    });
});
&#13;
<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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:4)

首先,在您的示例中,class GameScene: SKScene { let button = SKSpriteNode(imageNamed: "yourImgName") override func didMoveToView(view: SKView) { button.name = "btn" button.size.height = 100 button.size.width = 100 button.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame) + 50) self.addChild(button) //Adjust button properties (above) as needed } override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) { let touch = touches.first let positionInScene = touch!.locationInNode(self) let touchedNode = self.nodeAtPoint(positionInScene) if let name = touchedNode.name { if name == "btn" { let yourNextScene = YourNextScene(fileNamed: "YourNextScene") self.view?.presentScene(yourNextScene!) } } } } 是一个折线图示例,因此仅仅通过更改图表类型而无法正常工作,因为数据未按饼图所需进行编码( hc_demo()y值。)

这是一个原始的例子。正如您在javascript示例中所示,您只需强制显示图例,因为对于饼图,默认值为name。这是使用plotOptions - &gt;实现的。馅饼 - &gt; showInLegend = TRUE。

false

最后,我建议您检查replicating highcharts demos in highcharter