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

Решение во фрагменте представляет некоторую манипуляцию SVG d3, которая помещает область над столбцами каждой целевой серии. Область имеет заштрихованную серую линию и полупрозрачную заливку. Функция для этого написана так, чтобы быть переносимой, то есть за пределами параметров 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>