Question

我正在使用c3.js创建我的条形图。我想要这样的图像：

我想在每个栏的下半部分找到类别的名称。

我该怎么做？

  var chart = c3.generate({

        data: {
            columns: [
                ['data1', 120],
                ['data2', 130],
                ['data3', 130]

            ],
            type: 'bar'

        },
        color: {
            pattern: ['red', 'grey','orange']
        },
        bar: {
            space: 0.25
        },
        axis: {

          x: {
            show:false
          },
          y: {
            show:false
          }
        },
        legend:{
            show:false
        }
    });

http://plnkr.co/edit/u6h9FUkvdNE8JQrVbxBF?p=preview

Answer 1

希望这段代码片段有所帮助。

var chart = c3.generate({
  data: {
    columns: [
      ['category', 'data1', 'data2', 'data3'],
      ['value', 120, 130, 130],
    ],
    x: 'category',
    type: 'bar',
    colors: {
      value: function(d) {
        var colors = ['red', 'grey', 'orange'];
        return colors[d.index];
      }
    }
  },
  padding: {
    left: 120,
    right: 120
  },
  bar: {
    width: {
      ratio: 1
    }
  },
  axis: {

    x: {
      show: true,
      type: 'category'
    },
    y: {
      show: false
    }
  },
  legend: {
    show: false
  }
});

body {
  font: 11px sans-serif;
}

.c3-axis-x line,
.c3-axis-x path {
  stroke: none !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" rel="stylesheet">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js" charset="utf-8"></script>

<body>
  <div id="chart"></div>
  <script type="text/javascript">
  </script>
</body>

Answer 2

希望这对你有所帮助：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" rel="stylesheet">
<script src="http://d3js.org/d3.v3.min.js"></script>
<!-- Load d3.js and c3.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js" charset="utf-8"></script>

<style type="text/css">
/* Legend Font Style */
body {
    font: 11px sans-serif;
}

</style>
</head>
      <body>
      <div id="chart"></div>
      <script type="text/javascript">
      var chart = c3.generate({

            data: {
                columns: [
                    ['data1', 120,130,140],
                ],
                type: 'bar'

            },
            color: {
                pattern: ['red', 'grey','orange']
            },
            bar: {
                space: 0.25
            },
            axis: {

              x: {
                show:true,
                type: 'category',
                categories: ['cat1', 'cat2', 'cat3']
              },
              y: {
                show:false
              }
            },
            legend:{
                show:false
            }
        });



      </script>
      </body>
</html>

检查 X轴

在每个栏下方放置该类别的文本

2 个答案: