2016-05-06 109 views
1

我想在c3 js條形圖的y軸上具有自定義百分比刻度,其中百分比軸應該顯示0,25%,50%,75%和只有100%。如何爲c3 js中的條形圖定製y軸以顯示自定義百分比刻度

應該做些什麼來適當縮放以與自定義刻度和標籤一起工作。

我試着改變c3 js條形圖代碼上默認代碼的ticks count,之後我給了values屬性並設置了這樣的值:values:[25,50,75,100]。

但是這些沒有顯示,因爲它應該是,只有25%顯示,但我懷疑實際縮放工作。

  var QosScoreChart = c3.generate({ 
        bindto: '#qosScore', 
        data: { 
          x: 'x', 
        columns: [ 
           surveyCountArr, 
           qosMonthArr, 
           qosTBArr, 
           qosBBArr 
          ], 

        y2 axis 
          axes:{ 
           TopBox:'y', 
           BottomBox:'y', 
           Surveys:'y2' 
          }, 
         types: { 
          TopBox: 'spline', 
          BottomBox: 'spline', 
          Surveys: 'bar', 
           }, 
          labels: { 
           format: { 
            Surveys: d3.format(""), 
           }} 
         }, 
         bar: {width: 30}, 

        axis: { 
           x: { 
            type: 'category' 
           }, 


          y2:{ 
           show:true, 
           padding: { 
            top: 100, bottom: 10 
             }, 
           max: 100, 
           }, 


          y: { 
           max: 1, 
           padding: { 
             top: 100, bottom:0 
              }, 

           tick:{ 
           format:d3.format("%"), 
           values:[25,50,75,100], 
             count: 4 
             }, 


           }, 
          }, 
        color: { 
        pattern: ['#92CFF6' ,'#2CA02C', '#F72107'] 
        } 
        }); 

回答

0

對於0-100%百分比格式,值必須小於1

嘗試

values:[0.25,0.50,0.75,1.00], 

當然數據點將需要在同一範圍內太