首页 文章

带日期轴的DC.js条形图

提问于
浏览 次
3

我想基于x轴的日期创建条形图 . 标签应显示为月份（即2017年1月1日 - 首选） . 在我的数据中，我总是在下个月的第一个日期，即01Jan，01Feb，01Mar . 我创建了一个图表，但我无法使其对齐 .

var chart   = dc.barChart("#" + el.id);
var chCategory = ndx.dimension(function(d) {return d[chCategoryName];});
chValues = chCategory.group().reduceSum(
   return parseFloat(d[chValueName]);});


//set range for x-axis
var minDate = chCategory.bottom(1)[0][chCategoryName];
var maxDate = chCategory.top(1)[0][chCategoryName];
chart
  .width(800)
  .height(200)
  .x(d3.time.scale().domain([minDate,maxDate]))
  .xUnits(d3.time.months)
  .dimension(chCategory)
  .group(chValues)

  .renderHorizontalGridLines(true)
// .centerBar(true) //does not look better
   .controlsUseVisibility(true)
   .ordinalColors(arrColors) 
   .transitionDuration(1000)
   .margins({top: 10, left: 80, right: 5, bottom: 20})

Chart Preview

我已经阅读了帖子：dc.js x-axis will not display ticks as months, shows decimals instead但我无法以不同年份保持正确排序的方式实现它 .

d3.js dc.js

1 回答

  • 2

    dc.js非常简单地使用域 - x轴从开始到结束完全伸展，忽略条的宽度或它们的位置 . 这是一个设计错误 .

    这是两个解决方法 .

    保持栏居中并添加填充

    如果你正在使用elasticX，你可以像这样手动纠正它：

    chart.centerBar(true)
    .xAxisPadding(15).xAxisPaddingUnit('day')

    如果您只是手动设置域，那就是

    minDate = d3.time.day.offset(minDate, -15);
maxDate = d3.time.day.offset(maxDate, 15);

    将标记对齐到条形图的左侧并更正域的右侧

    你不要让酒吧居中 . But I know the right bar can get clipped.

    如果你想要 elasticX 效果，你可以像这样手动实现它，将右侧偏移一个月（example）：

    function calc_domain(chart) {
    var min = d3.min(chart.group().all(), function(kv) { return kv.key; }),
        max = d3.max(chart.group().all(), function(kv) { return kv.key; });
    max = d3.time.month.offset(max, 1);
    chart.x().domain([min, max]);
}
chart.on('preRender', calc_domain);
chart.on('preRedraw', calc_domain);

    或者没有 elasticX 那只是：

    maxDate = d3.time.month.offset(maxDate, 1);
    回复于

相关问题