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 构造函数参数之外，并由 onrendered 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>

c3js多色设计

c3js Multi color design

charts

d3.js

c3.js