如何添加C3標尺圖表的標題？

我正在使用RStudio來處理C3 Gauge Chart。由於我對JavaScript沒有太多的瞭解。我很難做一些小的事情，比如添加標題。如何添加C3標尺圖表的標題？

我想添加一個標題。但是，我遇到了麻煩。請幫忙！這是下面的代碼。

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 

     } 
    }; 
    } 
});

來源

2017-06-16 Joonhyuk James Heo

通過deafult C3.js不能添加標題來衡量的圖表，但你可以用D3.js，其中C3是基於這樣做。

你必須回調添加到OnInit的的參數對象：

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。

來源

2017-06-17 09:37:11

如何添加C3標尺圖表的標題？

回答

相關問題