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 轴在 'indicator'（数据 1-5）的每个值处保留 space 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' 值处占据宽度的一半。

  { '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"]],

C3 条形图宽度工作不正常

C3 bar chart width is not working properly

d3.js

c3.js