Столбчатая диаграмма C3 - Пользовательская метка оси X - PullRequest
Новая
       45

Столбчатая диаграмма C3 - Пользовательская метка оси X

0 голосов
/ 29 октября 2018

Я использую библиотеку диаграмм C3 в своем приложении для визуализации данных. Я попытался построить гистограмму со значениями x, y. Диаграмма отображается нормально, но значение тика по оси X не отображается на моем графике. Но то же самое показывает хорошо в разделе легенды. Я пытался во многом, но не повезло. Пожалуйста, помогите мне достичь этого.

Expected_Result

 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

1 Ответ

0 голосов
/ 29 октября 2018

Вы доставляли данные JSON как один объект с множеством атрибутов, а не как набор незаметных объектов. Я преобразовал данные в пары «имя = значение», введя атрибуты «label» и «val». Это дает вам преимущество использования большего количества возможностей 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>
...