条形图Dc.Js显示百分比

时间:2018-10-28 16:34:24

标签: javascript dc.js

我在Dc.Js中有3个类别的条形图

我只想显示每一行的百分比:

/ Construct the charts
              xdata = crossfilter(data);

              runDimension  = ndx.dimension(function(d) {return "run-"+d.Run;})
              speedSumGroup = runDimension.group().reduceSum(function(d) {return d.Speed * d.Run;});


              var all = xdata.groupAll();
              dataCount.dimension(xdata)
                  .group(all);

              // Define the crossfilter dimensions
              cities = xdata.dimension(function (d) { return d.City; });
              locations = xdata.dimension(function (d) { return d.all; });
              var districttype = xdata.dimension(function (d) { return d.zip; });
              var wardTypes = xdata.dimension(function (d) { return d.ward; });
              var coordinates = xdata.dimension(function(d) { return d.geo; });
              var type = xdata.dimension(function(d) { return d.type; });

              // Marker Chart

              typeChart.width($('#type-chart').innerWidth()-30)
              .height(250)
              .colors(commonChartBarColor)
              .margins({top: 10, left: 20, right: 10, bottom: 20})
              .group(type.group())
              .dimension(type)
              .elasticX(true)
              .on("filtered", onFilt)
              .label(function (d) {
                  return d.data.key + "(" + Math.floor(d.data.value / all.value() * 100) + "%)";
                });

我已经尝试了标签功能,但是无法正常工作。

错误:无法获取未定义或空引用的属性“键”

我该怎么做?

解决方案:

typeChart.width($('#type-chart').innerWidth()-30)
          .height(250)
          .colors(commonChartBarColor)
          .margins({top: 10, left: 20, right: 10, bottom: 20})
          .group(type.group())
          .dimension(type)
          .elasticX(true)
          .ordering(function(d) {
             return -d.value
          })
          .label(function (d) {
              if (typeChart.hasFilter() && !typeChart.hasFilter(d.key))
                  return d.key + " (0%)";
              var label = d.key;
              if(all.value())
                  label += " (" + Math.floor(d.value / all.value() * 100) + "%)";
              return label;
          })
          .xAxis().ticks(5);

0 个答案:

没有答案