时间戳

首页 > 解决方案 > C3 条形图 - 自定义 X 轴标签

javascript - C3 条形图 - 自定义 X 轴标签

问题描述

我在我的应用程序中使用 C3 图表库进行数据可视化。我试图用 x,y 值绘制条形图。图表显示正常，但 x 轴刻度值未显示在我的图表中。但是在图例部分也显示得很好。我尝试了很多方法，但没有运气。请帮助我实现这一目标。

预期结果

 var chart = c3.generate({
                /*  size: {
                        height: 400
                    }, */
                bindto:"#chart",
                data: {
                    json: [{"<-10":0,"<-8":0,"<-6":3,"<-4":1,"<-2":15,"<0":40,"<2":82,"<4":68,"<6":7,"<8":6,"<10":3,">10":1}],
                    keys: {
                        value: ["<-10","<-8","<-6","<-4","<-2","<0","<2","<4","<6","<8","<10",">10"],
                    },
                    type: 'bar'
                },
                bar: {
                    ratio: 1.5
                },
                color: {//referred color code from materializecss color palette
                    //   pattern: ['#f44336', '#ef5350', '#e57373', '#ef9a9a', '#ffcdd2', '#ffebee', '#c8e6c9', '#a5d6a7', '#81c784', '#4caf50', '#388e3c', '#1b5e20']
                    pattern: ['#ffebee', '#ffcdd2', '#ef9a9a', '#e57373', '#ef5350', '#f44336', '#1b5e20', '#388e3c', '#4caf50', '#81c784', '#a5d6a7', '#c8e6c9']
                },
                tooltip: {
                    format: {
                        title: function (d) { return 'Test'; },
                        value: function (value, ratio, id) {
                            return value;
                        }
                    }
                }
            });
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.css">
<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>

Fiddle_Link

标签： javascriptjqueryd3.jschartsc3.js

解决方案

您将 JSON 数据作为一个具有许多属性的对象而不是一组谨慎的对象来提供。我通过引入 'label' 和 'val' 属性将数据有效地转换为 name = value 对。这为您提供了使用更多 C3 功能的好处。

var chart = c3.generate({
                  size: {
                        height: 200,
                        width: 600
                    }, 
                bindto:"#chart",
                data: {
                    json: [{label: "<-10", val:0},{label: "<-8",val:0},{label: "<-6",val:3},{label: "<-4",val:1},{label: "<-2",val:15},{label: "<0",val:40},{label: "<2",val:82},{label: "<4",val:68},{label: "<6",val:7},{label: "<8",val:6},{label: "<10",val:3},{label: ">10",val:1}],
                    keys: {
                        x: 'label',
                        value: ["val"],
                    },
                  type: 'bar',
                  color: function(color, d){
                          var lst = ['#ffebee', '#ffcdd2', '#ef9a9a', '#e57373', '#ef5350', '#f44336', '#1b5e20', '#388e3c', '#4caf50', '#81c784', '#a5d6a7', '#c8e6c9']
                          return(lst[d.index]);
                      
                    }                
                },
                legend: {
                  show: false
                },                 
                axis: {
                  x: {
                    type: 'category',
                    tick: { centered: true},

                   }
                },

                bar: {
                  width: {
                    ratio: 1
                    }
                },
                
                tooltip: {
                    format: {
                        title: function (d) { return 'Test'; },
                        value: function (value, ratio, id) {
                            return value;
                        }
                    }
                }

            });
<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>

推荐阅读