如何在c3.js的x轴上制作倒条形图

Question

我能用c3.js实现这个目标

这是我的c3.js代码。

socket.broadcast.emit();

我想实现这一点，任何想法？

Answer 1

你可以使用css转换来镜像包含条形的组并使用transform-origin来保持它在svg中的位置：

import matplotlib.pyplot as plt
import matplotlib.animation as animation

fig = plt.figure()
ax1 = fig.add_subplot(1,1,1)

def animate(i):
    graph_data = open('inputs.txt','r').read()
    lines = graph_data.split('\n')
    xs = []
    ys = []

prices = [30]

for line in lines:
    if len(line) > 1:
        b, s, y = line.split(',')
        b = int(b)
        s = int(s)
        def price():
            x = prices[-1]
            pr = b / (b + s) - s / (b + s)
            global result
            result = x + x * pr
            return result

    price()
    prices.append(result)
    xs.append(y)
    ys.append(result)
    ax1.clear()
    ax1.plot(xs, ys)
    ax1.grid(True)

ani = animation.FuncAnimation(fig, animate, interval=1000)

plt.show()

      var chart = c3
        .generate({
            bindto : "#topUses",
            size : {
                height : 180,
                width : 400
            },
            bar : {
                width : 14
            },
            padding : {
                left : 100,
                top : 50
            },
            color : {
                pattern : [ '#ff1919', '#ff1919', '#ff1919', '#ff1919',
                        '#ff1919' ]
            },
            data : {
                x : 'x',
                columns : [
                        [ 'x', 'Google', 'Yahoo', 'Facebook',
                                'Capital One', 'Express' ],
                        [ 'value', 160, 310, 232, 405, 200 ] ],

                type : 'bar',

                color : function(inColor, data) {
                    var colors = [ '#ff1919', '#ff1919', '#ff1919',
                            '#ff1919', '#ff1919' ];
                    if (data.index !== undefined) {
                        return colors[data.index];
                    }

                    return inColor;
                }
            },
            axis : {
                rotated : true,
                x : {
                    type : 'category',
                    show : false,
                },
                y : {
                    show : false
                }
            },
            tooltip : {
                grouped : false
            },
            legend : {
                show : false
            }
        });

.c3-chart{
transform-origin: 120px 0px;
transform:scale(-1,1);
}

另一个棘手的方法是反转值['value'，-160，-310，-232，-405，-200]，然后你必须在传说中找到要删除“ - ”的内容