c3 图在 chrome 和 safari 浏览器上未与其他图对齐

Question

正如你在这个例子中看到的那样 https://jsfiddle.net/juanX/atw3edu0/6/i 我有两个图表，但它们没有相互对齐。我正在使用 chrome 版本 51.0.2704.84。这件事在 Firefox 浏览器上运行良好。我无法使用 css 执行此操作，因为我打算使用多个动态图。

知道如何在 Chrome 和 Safari 上使用它吗？

var chart = c3.generate({
        bindto: '#chart',
    data: {
        columns: [
            ['data1', 1,52,65,89,200,566,774,200,566,300,700,123,654,852,159,321,756,821,654,123,951,753,926,45,126,345,821,821,921,13],
        ],
        types: {
            data2: 'spline'
        }
    },
    axis: {
        y: {
            padding: {bottom: 0},
            min: 0
        },
        x: {
            padding: {left: 0},
            min: 0,
            show: false
        }
    }

});

var chart = c3.generate({
        bindto: '#chart2',
    data: {
        columns: [
            ['data1', 300, 350, 300, 100, 80, 50],
        ],
        types: {
            data1: 'spline',
        }
    },
    axis: {
        y: {
            padding: {bottom: 0},
            min: 0
        },
        x: {
            padding: {left: 0},
            min: 0,
            show: false
        }
    }

});

Answer 1

因为您的其中一个比例达到 1,000 c3，默认情况下标签的水平度更高 space。

您似乎已经认识到需要修复的是填充，但它需要是 c3.generate 语法中顶层的填充设置。（x 轴的填充似乎 space 到轴的右边而不是左边，并且与 x 数据比例成比例，而不是像素）

https://jsfiddle.net/atw3edu0/9/

图表 2 也是如此（图表 1 也是如此）：

c3.generate({
        bindto: '#chart2',
    data: {
        columns: [
            ['data1', 300, 350, 300, 100, 80, 50],
        ],
        types: {
            data1: 'spline',
        }
    },
    axis: {
        y: {
            padding: {bottom: 0},
            min: 0
        },
        x: {
            padding: {left: 0},
            min: 0,
            show: false
        }
    },
    /* THIS BIT */
    padding: {
        left: 50 // set same value for for both charts
    }
});

c3 图在 chrome 和 safari 浏览器上未与其他图对齐

c3 graph is not lining with other graph on chrome and safari browser

javascript

css

c3.js