Как добавить метки для регионов в линейный график c3.js или подробный график?

Question

Я использую c3.js для построения линейной диаграммы с регионом по ссылке по этой ссылке .

Мне нужно показать метку для регионов. Я много искал, но не мог найти решение.

Существующий код:

var chart = c3.generate({
    bindto: '#detail_chart',
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250, 400],
            ['data2', 830, 1200, 1100, 1400, 1150, 1250, 1500],
        ],
        axes: {
            data2: 'y2'
        }
    },
    axis: {
        y2: {
            show: true
        }
    },
    regions: [
        {axis: 'x', end: 1, class: 'regionX'},
        {axis: 'x', start: 2, end: 4, class: 'regionX'},
        {axis: 'x', start: 5, class: 'regionX'},
        {axis: 'y', end: 50, class: 'regionY'},
        {axis: 'y', start: 80, end: 140, class: 'regionY'},
        {axis: 'y', start: 400, class: 'regionY'},
        {axis: 'y2', end: 900, class: 'regionY2'},
        {axis: 'y2', start: 1150, end: 1250, class: 'regionY2'},
        {axis: 'y2', start: 1300, class: 'regionY2'},
    ]
});

.c3-region.regionY {
  fill: blue;
}
.c3-region.regionY2 {
  fill: yellow;
}

<!-- Load c3.css -->
<link href=" https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.css
" rel="stylesheet">

<!-- Load d3.js and c3.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.min.js"></script>
 <div id="detail_chart"></div>

Мое требование:

regions: [
            {axis: 'x', end: 1, class: 'regionX',label:'label1'},
            {axis: 'x', start: 2, end: 4, class: 'regionZ',label:'label3'},
            {axis: 'x', start: 5, class: 'regionY',label:'label2'},
          ]

Ожидаемый результат: Как этого добиться, используя c3.js или d3.js. Если у кого есть идея поделитесь со мной. Заранее спасибо.

Answer 1

Вот способ сделать это с d3. Вам нужно будет изменить размер шрифта на свой вкус. Смотрите комментарии в коде.

var chart = c3.generate({
    bindto: '#detail_chart',
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250, 400],
            ['data2', 830, 1200, 1100, 1400, 1150, 1250, 1500],
        ],
        axes: {
            data2: 'y2'
        }
    },
    axis: {
        y2: {
            show: true
        }
    },
    regions: [
        {axis: 'x', end: 1, class: 'regionX'},
        {axis: 'x', start: 2, end: 4, class: 'regionX'},
        {axis: 'x', start: 5, class: 'regionX'},
        {axis: 'y', end: 50, class: 'regionY'},
        {axis: 'y', start: 80, end: 140, class: 'regionY'},
        {axis: 'y', start: 400, class: 'regionY'},
        {axis: 'y2', end: 900, class: 'regionY2'},
        {axis: 'y2', start: 1150, end: 1250, class: 'regionY2'},
        {axis: 'y2', start: 1300, class: 'regionY2'},
    ]
});

// set your labels here
var labels = {
  '_1': 'label for region _1',
  '2_4': 'label for region 2-4',
  '5_': 'label for 5_'
};

// select all regionX rectangles in the chart
d3.selectAll('#detail_chart rect.regionX').each( function(r){
  var region = this;
  // attach a text element to the parent node
  d3.select(this.parentNode)
    .append('text')
    // x offset is current region's x value + half its width
    .attr('x', function() {
      return region.width.baseVal.value/2 + region.x.baseVal.value;
    })
    .attr('y', 20) // change this to your liking
    .attr('text-anchor', 'middle')
    .attr('class', 'region-label')
    .text( function(){
      // this corresponds to the values you set when configuring the axis
      // it is in the form <start>_<end>
      var id = (r.start ? r.start : '') + '_' + (r.end ? r.end : '');
      return labels[ id ]
    });
});

.c3-region.regionY {
  fill: blue;
}
.c3-region.regionY2 {
  fill: yellow;
}

<!-- Load c3.css -->
<link href=" https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.css" rel="stylesheet">

<!-- Load d3.js and c3.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.min.js"></script>
 <div id="detail_chart"></div>