Question

我想在图表中实现备用区域背景，有点像条纹表格。

我有办法动态设置每个y轴块的区域吗？一旦我能做到这一点，我基本上可以使用CSS来设置交替的背景颜色。

Answer 1

可以像这样静态设置区域： http://c3js.org/samples/region.html

要动态执行此操作，您只需使用API： http://c3js.org/reference.html#api-regions例如

chart.regions([
  {axis: 'x', start: 5, class: 'regionX'},
  {axis: 'y', end: 50, class: 'regionY'}
]);

因此，在生成chart对象后，获取交替条带会构建一个区域数组：

// find range of all data
var allData = d3.merge (chart.data().map(function(d) {
    return d.values.map (function(dd) { return dd.value; });
}));
var dataRange = d3.extent(allData);
dataRange.min = Math.min (dataRange[0], 0);
dataRange.extent = dataRange[1] - dataRange.min;

// set number of pairs of stripes
var stripeCount = 5;
var step = dataRange.extent / stripeCount;
var newRegions = [];
// then divide the data range neatly up into those pairs of stripes
d3.range(0,stripeCount).forEach (function(d) {
    newRegions.push ({axis: 'y', start: dataRange.min+(step*d), end: dataRange.min+(step*(d+0.5)), class: 'stripe1'});
    newRegions.push ({axis: 'y', start: dataRange.min+(step*(d+0.5)), end: dataRange.min+(step*(d+1)), class: 'stripe2'});
});

// set the new regions on the chart object
chart.regions(newRegions);

的CSS：

.c3-region.stripe1 {
  fill: #f00; 
}

.c3-region.stripe2 {
  fill: #0f0;
}

（或者，如果您希望在y刻度上每10个单位创建一个新的条带对，则只需step=10;并将d3.range更改为d3.range(0,dataRange.extent/step)）

我在jsfiddle上分离某人的条形图并添加了条纹 - ＆gt; http://jsfiddle.net/k9c0peax/

为每个y轴组设置动态区域

1 个答案: