Question

我目前正在使用c3图表，我想要做的是默认隐藏一些数据然后允许用户查看他们需要的数据。（完美的场景是一次只能切换一个系列）。但主要问题是我似乎无法只使用一个系列正确呈现图表。这是一个例子。任何想法为什么它显示其他系列的一点点？它应该只显示“c”（绿色）

var somethingWeLoadedFromTheServer = [
    {a:23, b:45, c:12},
    {a:34, b:19, c:38},
    {a:25, b:62, c:56},
    {a:44, b:88, c:74}
];

var chart = c3.generate({
    data: {
        json: somethingWeLoadedFromTheServer,
        keys: {
            value: ['a', 'b','c'],
            //x: 'c'
        },
        type: 'bar',
        hide: ['a','b']
    },

    bar: {
        width: {
            ratio: 0.5 // this makes bar width 50% of length between ticks
        }
    },
    axis: {
    //rotated: true
    }
//    axis: {
//      y: {
//          tick: {
//              count: 3,
//              format: d3.format('.2f')
//          }
//      }
//  }
});

http://jsfiddle.net/Lbej86Lf/

Answer 1

是的，基于json的条形图可能有些小问题 - 我实际上已经使用了你所看到的效果来帮助支持非堆叠的条形图。堆积的条形图，即在同一个地方覆盖图表

这有效，隐藏了第一个onrendered回调中的相关系列 - 首先由一个标志指示。应该可以使用oninit而不是这样做因为某种原因使得条形图宽1px，grr（我看到你提交了一个c3错误，我将我的发现添加到其中）

var firstRun = true;
var chart = c3.generate({
data: {
    json: somethingWeLoadedFromTheServer,
    keys: {
        value: ['a', 'b','c'],
        //x: 'c'
    },
    type: 'bar',
    //hide: ['a','b']
},

bar: {
    width: {
        ratio: 0.5 // this makes bar width 50% of length between ticks
    }
},
axis: {
//rotated: true
},
onrendered: function () {
   if (firstRun) {
      this.api.hide(['a', 'b']);
      firstRun = false;
    }
},
//    axis: {
//      y: {
//          tick: {
//              count: 3,
//              format: d3.format('.2f')
//          }
//      }
//  }
});

http://jsfiddle.net/Lbej86Lf/1/

c3图表显示了我希望它隐藏的数据

1 个答案: