2016-05-06 112 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], 

当然数据点将需要在同一范围内太