C3条形图宽度不能正常工作

Question

嗨，我正在尝试使用C3 js构建条形图，但我不知道由于某种原因宽度在工作正常之前没有正确设置，我只是做了颜色变化而且由于某种原因它打破了。这是我的代码：

var chart1 = c3.generate({
                size: {
                    height: 400,
                },
                data: {
                    type: 'bar',
                    json: [
                        { 'indicator': 'data1', 'Subject1': 100 },
                        { 'indicator': 'data2', 'Subject2': 90 },
                        { 'indicator': 'data3', 'Subject3': 66 },
                        { 'indicator': 'data4', 'Subject4': 50 },
                        { 'indicator': 'data5', 'Subject5': 50 },

                    ],
                    color: function (color, d) {
                        if (d.id && d.value) {
                            if (d.value<=40) {
                                return 'red';
                            }
                            else if (d.value<=70) {
                                return 'orange';
                            }
                            else {
                                return 'limegreen';
                            }
                        }
                    },
                    keys: {
                        x: 'indicator',
                        value: ['Subject1','Subject2','Subject3','Subject4','Subject5']
                    }
                }, 
                legend:{hide:true},
                axis: {
                    x: {
                        type: 'category',
                        tick: {
                            rotate: -55,
                            multiline: true

                        },
                        height: 190
                    },

                    y: {
                        show: false,
                        ticks: 3, // line added
                        padding: { top: 5, bottom: 0 },
                    }
                },
                bar: {
                    width: {
                        ratio: 0.5    
                    }
                },
                bindto: '#chart1'
            });

我得到的结果是，你可以看到在图像中宽度没有填充该条的颜色。

Answer 1

您正在设置5个不同的数据系列（主题1-5），因此它在x轴上为“指标”（数据1-5）的每个值保留5个条形空间，但是您只设置一个值数据中每个数据点的系列。

           { 'indicator': 'data1', 'Subject1': 100 },
           { 'indicator': 'data2', 'Subject2': 90 },
           { 'indicator': 'data3', 'Subject3': 66 },
           { 'indicator': 'data4', 'Subject4': 50 },
           { 'indicator': 'data5', 'Subject5': 50 },

我怀疑Subject应该是一个系列，所以在只有一个数据系列Subject的情况下尝试这个，然后条形沿着x轴在每个'指标'值处适合宽度的一半。

  { 'indicator': 'data1', 'Subject': 100 },
  { 'indicator': 'data2', 'Subject': 90 },
  { 'indicator': 'data3', 'Subject': 66 },
  { 'indicator': 'data4', 'Subject': 50 },
  { 'indicator': 'data5', 'Subject': 50 },


keys: {
   x: 'indicator',
   value: ['Subject']
}

http://jsfiddle.net/68pgvsbh/5/

如果您因某种原因想要保留不同的命名主题系列，则可以选择将它们添加为堆叠组

  groups: [["Subject1", "Subject2", "Subject3", "Subject4", "Subject5"]],