Wie füge ich einen Titel zu C3 Gauge Chart hinzu?

Question

Ich benutze RStudio, um mit C3 Gauge Chart umzugehen. Da bin ich nicht viel über Javascript informiert. Ich habe Schwierigkeiten, kleine Dinge zu tun, wie zum Beispiel einen Titel hinzuzufügen.

Ich möchte einen Titel hinzufügen. Ich habe jedoch Probleme damit. Bitte helfen Sie! Hier ist der Code unten.

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

von deafult C3.js nicht Titel hinzufügen Chart zu messen, aber man kann tun es mit D3.js, die C3 basiert.

Sie haben Rückruf hinzufügen oninit in param Objekt:

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.