Question

此图表正常渲染，但不再显示底部的时间序列（对于缺少小提琴感到遗憾）：

        var c3chart = c3.generate({
            bindto: "#TrendChart",
            size: {
                //width: width,
                height: height * 2
            },
            subchart: {
                show: true
            },
            data: {
                x: "x",
                xFormat: "%d/%m/%Y %H:%M",
                columns: [c3dates, c3Current, c3data],
                names: {
                    data1: "Tags",
                    data2: "Originals"
                },
                colors: {
                    data1: 'rgb(46, 155, 46)', // '.chart-edit-line',
                    data2: 'rgb(124, 215, 255)' // 'chart-history-line'
                },
                types: {
                    data1: 'line',
                    data2: 'area'
                },
                axes: {
                    data2: "y",
                    data2: 'y2'
                }
            },
            axis: {
                x: {
                    show: true,
                    type: 'timeseries',
                    tick: {
                        format: '%H:%M',
                        values: [
                            '21/02/2017 00:00', '21/02/2017 01:30', '21/02/2017 03:00', '21/02/2017 04:30',
                            '21/02/2017 06:00', '21/02/2017 07:30', '21/02/2017 09:00', '21/02/2017 10:30',
                            '21/02/2017 12:00', '21/02/2017 13:30', '21/02/2017 15:00', '21/02/2017 16:30',
                            '21/02/2017 18:00', '21/02/2017 19:30', '21/02/2017 21:00', '21/02/2017 22:30',
                            '21/02/2017 00:00'
                        ]
                    },
                    padding: {
                        left: 0,
                        right: 0
                    }
                },
                y: {
                    show: true,
                    min: 0,
                    padding: {
                        top: 20,
                        bottom: 0
                    }
                },
                y2: {
                    show: true,
                    min: 0,
                    padding: {
                        top: 20,
                        bottom: 0
                    }
                }
            },
            zoom: { enabled: true }
        });

Answer 1

原来'axis.x.tick.values'数组必须与图表中的值具有相同的日期，否则X轴上没有任何内容可供图表呈现。我使用此代码确保它们匹配：

var timeindices = [
    '21/02/2017 00:00', '21/02/2017 01:30', '21/02/2017 03:00', '21/02/2017 04:30',
    '21/02/2017 06:00', '21/02/2017 07:30', '21/02/2017 09:00', '21/02/2017 10:30',
    '21/02/2017 12:00', '21/02/2017 13:30', '21/02/2017 15:00', '21/02/2017 16:30',
    '21/02/2017 18:00', '21/02/2017 19:30', '21/02/2017 21:00', '21/02/2017 22:30',
    '21/02/2017 00:00'
];
var timeseries = [];
var dateprefix = dataStore[0][0].substring(0, 11);

timeindices.forEach(function (d) {
    timeseries.push(dateprefix + d.substring(11, 16));
});

然后我用这种方式修改了图表构造函数：

axis: {
    x: {
        show: true,
        type: 'timeseries',
        tick: {
            format: '%H:%M',
            values: timeseries

为什么这个C3.JS图表没有显示X轴上的时间序列？

1 个答案: