如何给 C3 Gauge Chart 添加标题？

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 回调添加到参数 object:

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 添加标题？

How to add a title to C3 Gauge Chart?

gauge

rstudio

c3.js