如何在 c3 js 中为条形图自定义 y 轴以显示自定义百分比刻度

Question

我想在 c3 js 条形图中的 y 轴上自定义百分比刻度，其中百分比轴应仅显示 0、25%、50%、75% 和 100%。

应该如何进行适当的缩放才能与自定义刻度和标签一起使用。

我尝试更改 c3 js 条形图代码上默认代码的刻度计数，之后我给出了 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']
                    }
                   }); 

Answer 1

对于 0-100% 的百分比格式，值需要小于 1

尝试

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

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