nvd3条形图 - 显示值为0的条形图

时间:2018-05-29 09:56:46

标签: nvd3.js

以下是我的Javascript

d3.json(sugarAPI, function(json) {              
            $("#id_rigdata svg").html("");

            nv.addGraph(function() {
                var height = 400;
                var chart = nv.models.multiBarChart()
                  .showTitle(false)
                  .tooltips(true)
                  .showControls(false)
                  .showLegend(false)
                  .direction(app.lang.direction)
                  .colorData('data')
                  .color(['#C2B84D'])
                  .height(height)
                  .allowScroll(false)             
                  .tooltipContent(function(key, x, y, e, graph) {                        

                      return '<p><b>' + y + '</b></p>';
                   });     

                    chart.xAxis.axisLabel('Months');     
                    chart.yAxis.axisLabel('Rig Count');

                d3.selectAll("#id_rigdata svg > *").remove();
                  d3.select('#id_rigdata svg')
                      .datum(json)
                    .transition().duration(500)
                      .call(chart);

                return chart;
            });
        });

以下是我的JSON回复

{  
"properties":{  
  "title":"Monthly Count",
  "labels":[  
     {  
        "group":1,
        "l":"Jan"
     },
     {  
        "group":2,
        "l":"Feb"
     },
     {  
        "group":3,
        "l":"Mar"
     },
     {  
        "group":4,
        "l":"Apr"
     },
     {  
        "group":5,
        "l":"May"
     },
     {  
        "group":6,
        "l":"Jun"
     },
     {  
        "group":7,
        "l":"Jul"
     },
     {  
        "group":8,
        "l":"Aug"
     },
     {  
        "group":9,
        "l":"Sep"
     },
     {  
        "group":10,
        "l":"Oct"
     },
     {  
        "group":11,
        "l":"Nov"
     },
     {  
        "group":12,
        "l":"Dec"
     }
  ],
  "values":[  
     {  
        "group":1,
        "t":"0"
     },
     {  
        "group":2,
        "t":"0"
     },
     {  
        "group":3,
        "t":"26"
     },
     {  
        "group":4,
        "t":"26"
     },
     {  
        "group":5,
        "t":"0"
     },
     {  
        "group":6,
        "t":"0"
     },
     {  
        "group":7,
        "t":"0"
     },
     {  
        "group":8,
        "t":"0"
     },
     {  
        "group":9,
        "t":"0"
     },
     {  
        "group":10,
        "t":"0"
     },
     {  
        "group":11,
        "t":"0"
     },
     {  
        "group":12,
        "t":"0"
     }
  ]
 },
"data":[  
  {  
     "key":"Monthly Rig Count",
     "type":"bar",
     "values":[  
        {  
           "series":0,
           "x":1,
           "y":0,
           "y0":0
        },
        {  
           "series":0,
           "x":2,
           "y":0,
           "y0":0
        },
        {  
           "series":0,
           "x":3,
           "y":26,
           "y0":0
        },
        {  
           "series":0,
           "x":4,
           "y":26,
           "y0":0
        },
        {  
           "series":0,
           "x":5,
           "y":0,
           "y0":0
        },
        {  
           "series":0,
           "x":6,
           "y":0,
           "y0":0
        },
        {  
           "series":0,
           "x":7,
           "y":0,
           "y0":0
        },
        {  
           "series":0,
           "x":8,
           "y":0,
           "y0":0
        },
        {  
           "series":0,
           "x":9,
           "y":0,
           "y0":0
        },
        {  
           "series":0,
           "x":10,
           "y":0,
           "y0":0
        },
        {  
           "series":0,
           "x":11,
           "y":0,
           "y0":0
        },
        {  
           "series":0,
           "x":12,
           "y":0,
           "y0":0
        }
     ],
     "color":"#C2B84D"
   }
 ]
}

输出

Output

这里我试图根据我的JSON数据显示nvd3条形图。每个月一个酒吧。现在,只有两个条形图显示值不为0.我需要的是显示所有12条带有空条的条形图。我需要显示计数为Month的标签也是0。

0 个答案:

没有答案