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 },

我怀疑主题应该是一个系列，因此在只有一个数据系列主题的情况下尝试此操作，然后条形图沿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"]],

C3条形图宽度无法正常工作

1 个答案: