如何在c3.js折线图或明细图中添加区域标签？

Question

我正在使用 c3.js 绘制带有区域的折线图，并引为this link。

我需要显示区域标签。 我搜索了很多东西，但没有找到任何解决方案。

现有代码：

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>