Javascript 将该类别的文本放在每个栏下方_Javascript_D3.js

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

javascript d3.js

Javascript 将该类别的文本放在每个栏下方,javascript,d3.js,Javascript,D3.js,我正在使用c3.js创建条形图。我想要像这样的图片：我想在每个栏的下半部分找到类别的名称我怎么做 var chart = c3.generate({ data: { columns: [ ['data1', 120], ['data2', 130], ['data3', 130] ], type: '

我正在使用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
        }
    });

希望这对你有点帮助：

<!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>


/*图例字体样式*/
身体{
字体：11px无衬线；
}
var图表=c3.0({
数据：{
栏目：[
[data1'，120130140]，
],
类型：'bar'
},
颜色：{
图案：[“红色”、“灰色”、“橙色”]
},
酒吧：{
空格：0.25
},
轴线：{
x:{
秀：没错，
类型：'类别'，
类别：['cat1'，'cat2'，'cat3']
},
y:{
节目：假
}
},
图例：{
节目：假
}
});

检查X轴，希望这段代码能有所帮助

var图表=c3.generate({
数据：{
栏目：[
['category'，'data1'，'data2'，'data3']，
[value'，120130130]，
],
x:'类别'，
类型：'bar'，
颜色：{
值：函数（d）{
变量颜色=[“红色”、“灰色”、“橙色”]；
返回颜色[d.索引]；
}
}
},
填充：{
左：120，
右：120
},
酒吧：{
宽度：{
比率：1
}
},
轴线：{
x:{
秀：没错，
类型：“类别”
},
y:{
节目：假
}
},
图例：{
节目：假
}
});
正文{
字体：11px无衬线；
}
.c3-轴-x线，
.c3-轴-x路径{
中风：无！重要；
}

我很感激您，唯一的问题是我需要x轴线消失，如果没有x轴，绘制图形没有任何意义。对于我的可视化，如果有意义，它是3个值之间的比较。在这种情况下，x轴的直线不起任何作用