Comment ajouter un titre au tableau des jauges C3?

Question

J'utilise RStudio pour gérer le tableau des jauges C3. Comme je ne suis pas très au courant de javascript. J'ai de la difficulté à faire de petites choses comme ajouter un titre.

Je voudrais ajouter un titre dessus. Cependant, j'ai un problème avec ça. S'il vous plaît aider! Voici le code ci-dessous.

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

Par deafult C3.js ne peut pas ajouter un titre à évaluer graphique, mais vous pouvez le faire avec d3.js qui C3 est basée.

Vous devez ajouter oninit rappel en objet 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.