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

玛努

我想在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']
                    }
                   }); 
麦拉汉

对于0-100%百分比格式,值必须小于1

尝试

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

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

来自分类Dev

如何在Doughnutchart ng2 chart.js中自定义百分比标签

来自分类Dev

如何从Google Analytics(分析)自定义报告中删除总计的百分比

来自分类Dev

D3 条形图。如何根据 JSON 数据设置自定义 x 和 y 轴?

来自分类Dev

x轴上的自定义D3`tickValue`-水平条形图

来自分类Dev

如何显示百分比和条形图

来自分类Dev

如何在nvd3中的Y轴上设置自定义刻度和标签

来自分类Dev

如何创建像%appdata%这样的自定义百分比(%)快捷方式?

来自分类Dev

如何创建像%appdata%这样的自定义百分比(%)快捷方式?

来自分类Dev

如何用自定义百分比拆分Zurb Foundation的网格?

来自分类Dev

如何将负百分比自定义格式为 (x.xx%)

来自分类Dev

如何自定义条形图(matplotlib)?

来自分类Dev

如何创建频率堆叠的条形图,但是条形图上的百分比标签和y轴上的频率在R中?

来自分类Dev

如何使用额外的百分位数自定义熊猫盒须图?

来自分类Dev

如何自定义融合图的堆叠条形图中的显示值?

来自分类Dev

带有自定义x轴和条形宽度的d3条形图

来自分类Dev

如何在Azure AppInsights中对自定义指标执行百分位数?

来自分类Dev

如何在基础R中制作自定义y轴刻度

来自分类Dev

如何自定义图表js条形图形状?

来自分类Dev

如何在C3图表中创建刻度线

来自分类Dev

如何在Windows 10中为调整文本,应用程序和其他项目的大小输入自定义大小百分比

来自分类Dev

如何将自定义指标添加到keras?(平均绝对误差百分比)

来自分类Dev

在R中作图:如何在时间序列数据中绘制堆叠的条形图以显示百分比构成?

来自分类Dev

如何在熊猫的X或Y轴上自定义轴刻度标签?

来自分类Dev

自定义刻度值在d3条形图中消失

来自分类Dev

如何在ggplot2中绘制堆叠的条形图,以显示基于组的百分比?

来自分类Dev

如何在ggplot2中绘制堆叠的条形图,以显示基于组的百分比?

来自分类Dev

如何在excel中的简单条形图中添加百分比。数据是单元格中的一系列字符串,我希望条形图显示百分比而不是计数

来自分类Dev

如何从数据框向堆叠的条形图添加自定义注释?

Related 相关文章

  1. 1

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

  2. 2

    如何在Doughnutchart ng2 chart.js中自定义百分比标签

  3. 3

    如何从Google Analytics(分析)自定义报告中删除总计的百分比

  4. 4

    D3 条形图。如何根据 JSON 数据设置自定义 x 和 y 轴?

  5. 5

    x轴上的自定义D3`tickValue`-水平条形图

  6. 6

    如何显示百分比和条形图

  7. 7

    如何在nvd3中的Y轴上设置自定义刻度和标签

  8. 8

    如何创建像%appdata%这样的自定义百分比(%)快捷方式?

  9. 9

    如何创建像%appdata%这样的自定义百分比(%)快捷方式?

  10. 10

    如何用自定义百分比拆分Zurb Foundation的网格?

  11. 11

    如何将负百分比自定义格式为 (x.xx%)

  12. 12

    如何自定义条形图(matplotlib)?

  13. 13

    如何创建频率堆叠的条形图,但是条形图上的百分比标签和y轴上的频率在R中?

  14. 14

    如何使用额外的百分位数自定义熊猫盒须图?

  15. 15

    如何自定义融合图的堆叠条形图中的显示值?

  16. 16

    带有自定义x轴和条形宽度的d3条形图

  17. 17

    如何在Azure AppInsights中对自定义指标执行百分位数?

  18. 18

    如何在基础R中制作自定义y轴刻度

  19. 19

    如何自定义图表js条形图形状?

  20. 20

    如何在C3图表中创建刻度线

  21. 21

    如何在Windows 10中为调整文本,应用程序和其他项目的大小输入自定义大小百分比

  22. 22

    如何将自定义指标添加到keras?(平均绝对误差百分比)

  23. 23

    在R中作图:如何在时间序列数据中绘制堆叠的条形图以显示百分比构成?

  24. 24

    如何在熊猫的X或Y轴上自定义轴刻度标签?

  25. 25

    自定义刻度值在d3条形图中消失

  26. 26

    如何在ggplot2中绘制堆叠的条形图,以显示基于组的百分比?

  27. 27

    如何在ggplot2中绘制堆叠的条形图,以显示基于组的百分比?

  28. 28

    如何在excel中的简单条形图中添加百分比。数据是单元格中的一系列字符串,我希望条形图显示百分比而不是计数

  29. 29

    如何从数据框向堆叠的条形图添加自定义注释?

热门标签

归档