c3js多色彩设计

Question

我正在实施条形图来表示我的结果集。我正在尝试使用c3js创建此设计。我参考了文档，但没有得到阴影设计。请有人指导我解决这个问题。

我的代码段是

var chart = c3.generate({
  bindto: '#chart',
  size : {
    width: 600,
    height: 200
  },
  data: {
    columns: [
      ["data1", 40, 20, 20, 20],
      ["data2", 20, 10, 30, 30]
    ],
    type: 'bar',
    groups: [
      ['data1', 'data2']
    ],
    order: null,
    labels: {
      format: function(v, id, i, j) {
        return v;
      }
    }
  },
  bar: {
    space: 0.2,
    width: {
      ratio: 0.2 // this makes bar width 50% of length between ticks
    }
  },

});

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.js"></script>
<div id="chart"></div>

我的要求是在条形图中的条形图中设计如下图

谢谢

Answer 1

代码段中的解决方案引入了d3 SVG操作，该操作在每个目标系列的小节上方放置了一个区域。该区域具有阴影线和半透明填充。编写此功能的函数是可移植的，即在C3构造函数的参数之外，并由呈现的c3事件调用。

doClone（）函数在适当的位置复制节点，这很有用，并且通过'url（#patternid）'创建图案并用作颜色也是一种潜在有用的技术。

也可以在https://codepen.io/JEE42/pen/yRWbvq

获得

function doClone(node){ // clone the given node
  return d3.select(node.parentNode.insertBefore(node.cloneNode(true), node.nextSibling));  
 }

function hatchBars(hatchTargets){ // Place a hatching pattern over the target bars.

  for (var i = 0; i < hatchTargets.length; i = i + 1){

    d3.select('.c3-bars-' + hatchTargets[i]).each(function(d, i){
      d3.select(this).selectAll('path').each(function(d, i){

        var node = d3.select(this).node(); 
        var daClone = doClone(node); 
        
        daClone
          .style('fill', 'url(#hash4_4)') 
          .style('stroke', 'url(#hash4_4)');
          
      });
    })        
  }
  
}
c3.chart.internal.fn.afterInit = function () {

d3.select('defs')
  .append('pattern')
  .attr('id', "hash4_4") // use id to get handle in a moment
  .attr('width', 14)
  .attr('height', 14)
  .attr('patternUnits', "userSpaceOnUse")
  .attr('patternTransform', "rotate(45 0 0 )")

  .append("rect")
  .attr('width', 14)
  .attr('height', 14)
  .attr('fill', '#00000000')  // transparent background
  
d3.select('#hash4_4')   // get the pattenn
  .append('line')  // add a line
  .attr('y2', 14)
  .style('stroke', "#00000044") // semi-transparent bars
  .attr('stroke-width', 14)  
};

//
// Standard C3 chart render with one twist which is the onrendered event call at the end.
//
var chart = c3.generate({
	  bindto: '#chart',
    data: {
        columns: [
            ['data1', -30, 200, 200, 400, -150, 250],
            ['data2', 130, 100, -100, 200, -150, 50],
        ],
        type: 'bar',
        groups: [
            ['data1', 'data2']
        ]
    },
    grid: {
        y: {
            lines: [{value:0}]
        }
    },
  
  onrendered: function () {  // execute after drawn
    
    hatchBars(['data2']); // Place a hatching pattern over the target bars.
    
  }
  
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.min.js"></script>


<div class='chart-wrapper'>
<div class='chat' id="chart"></div>
</div>