Question

我正在使用RStudio来处理C3 Gauge Chart。因为我不太了解javascript。我很难做一些小事情，例如添加标题。

我想在其上添加标题。但是，我遇到了麻烦。请帮忙！这是下面的代码。

output$gauge1 <- renderC3Gauge({
    PTable <- Projects
    if (input$accountname != "All") {
      Projects <- Projects[Projects$AccountName == input$accountname,]
    }
    if (input$sponsorname != "All") {
      Projects <- Projects[Projects$SponsorName == input$sponsorname,]
    }
    if (input$typename != "All") {
      Projects <- Projects[Projects$TypeName == input$typename,]
    }
    Projects

    C3Gauge(mean(Projects$PercentComplete))
})

}


shinyApp(ui=ui,server=server)



--------------------------------------------------------



HTMLWidgets.widget({

  name: 'C3Gauge',

  type: 'output',

  factory: function(el, width, height) {

    // TODO: define shared variables for this instance

    return {

      renderValue: function(x) {


        // create a chart and set options
        // note that via the c3.js API we bind the chart to the element with id equal to chart1
        var chart = c3.generate({
            bindto: el,
            data: {
                json: x,
                type: 'gauge',
            },
            gauge: {
                label:{
                    //returning here the value and not the ratio
                    format: function(value, ratio){ return value;}
                },
                min: 0,
                max: 100,
                width: 15,
                units: 'value' //this is only the text for the label
            }
        });

      },
      resize: function(width, height) {

        // TODO: code to re-render the widget with a new size

      }
    };
  }
});

Answer 1

聋人 C3.js不能为计量表添加标题，但你可以用D3.js 来做，C3就是基于。

您必须将oninit回调添加到param对象中：

var chart = c3.generate({
    oninit: function()
    {
        d3
          .select(el)
          .select("svg")
          .append("text")
          .attr("x", "50%" )
          .attr("y", "100%")
          .style("text-anchor", "middle")
          .text("Your chart title goes here");  
    },

gauge chart title example

如何在C3 Gauge Chart中添加标题？

1 个答案: