VisActor / VChart

VChart, more than just a cross-platform charting library, but also an expressive data storyteller.
https://www.visactor.io/vchart
MIT License
955 stars 67 forks source link

时序图如何让x轴 位于坐标系下方 #2927

Closed tangguo13 closed 3 months ago

tangguo13 commented 3 months ago

What problem does this feature solve?

如下代码 当我绘制出点时序图是 图表位于坐标系的第四象限右下,我期望可以出现在第一象限即右上
const [spec, setSpec] = useState({ type: 'sequence', autoFit: true, appendPadding: { left: 80, right: 80 }, series: [ { type: 'bar', barTitle: '清醒', dataId: 'register1', xField: 'start_time', x2Field: 'end_time', yField: 'value', animation: false, height: 20, padding: -1, }, { type: 'bar', barTitle: '快速眼动', dataId: 'register2', xField: 'start_time', x2Field: 'end_time', yField: 'value', animation: false, height: 20, padding: -1, }, { type: 'bar', barTitle: '测试', dataId: 'register2', xField: 'start_time', x2Field: 'end_time', yField: 'value', animation: false, height: 20, padding: -1, }, ], axes: [ { orient: 'bottom', type: 'time', layers: [ { tickStep: 7200, timeFormat: '%H:%M' } ] } ],

    data: [
        {
            id: 'register1',
            values: [
                {
                    start_time: 1720517808,
                    end_time: 1720527808,
                    value: 1
                },
                {
                    start_time: 1720537808,
                    end_time: 1720557808,
                    value: 1
                }
            ]
        },
        {
            id: 'register2',
            values: [
                {
                    start_time: 1720527808,
                    end_time: 1720537808,
                    value: 1
                },
                {
                    start_time: 1720557808,
                    end_time: 1720587808,
                    value: 1
                }
            ]
        },
        {
            id: 'register3',
            values: [
                {
                    start_time: 1720527808,
                    end_time: 1720537808,
                    value: 1
                },
                {
                    start_time: 1720557808,
                    end_time: 1720587808,
                    value: 1
                }
            ]
        },
    ]
});

What does the proposed API look like?

希望通过设置某个属性,改变x的位置 我试着改变axes-time-orient:bottom 但是效果不是我们想要达到的 axes: [ { orient: 'bottom', type: 'time', layers: [ { tickStep: 7200, timeFormat: '%H:%M' } ] } ],

skie1997 commented 3 months ago

What problem does this feature solve?

如下代码 当我绘制出点时序图是 图表位于坐标系的第四象限右下,我期望可以出现在第一象限即右上 const [spec, setSpec] = useState({ type: 'sequence', autoFit: true, appendPadding: { left: 80, right: 80 }, series: [ { type: 'bar', barTitle: '清醒', dataId: 'register1', xField: 'start_time', x2Field: 'end_time', yField: 'value', animation: false, height: 20, padding: -1, }, { type: 'bar', barTitle: '快速眼动', dataId: 'register2', xField: 'start_time', x2Field: 'end_time', yField: 'value', animation: false, height: 20, padding: -1, }, { type: 'bar', barTitle: '测试', dataId: 'register2', xField: 'start_time', x2Field: 'end_time', yField: 'value', animation: false, height: 20, padding: -1, }, ], axes: [ { orient: 'bottom', type: 'time', layers: [ { tickStep: 7200, timeFormat: '%H:%M' } ] } ],

    data: [
        {
            id: 'register1',
            values: [
                {
                    start_time: 1720517808,
                    end_time: 1720527808,
                    value: 1
                },
                {
                    start_time: 1720537808,
                    end_time: 1720557808,
                    value: 1
                }
            ]
        },
        {
            id: 'register2',
            values: [
                {
                    start_time: 1720527808,
                    end_time: 1720537808,
                    value: 1
                },
                {
                    start_time: 1720557808,
                    end_time: 1720587808,
                    value: 1
                }
            ]
        },
        {
            id: 'register3',
            values: [
                {
                    start_time: 1720527808,
                    end_time: 1720537808,
                    value: 1
                },
                {
                    start_time: 1720557808,
                    end_time: 1720587808,
                    value: 1
                }
            ]
        },
    ]
});

What does the proposed API look like?

希望通过设置某个属性,改变x的位置 我试着改变axes-time-orient:bottom 但是效果不是我们想要达到的 axes: [ { orient: 'bottom', type: 'time', layers: [ { tickStep: 7200, timeFormat: '%H:%M' } ] } ],

很抱歉之前没有考虑到这种场景,我提交了相关改动,预计下次更新版本后这边就可以配置bottom axis了,效果如下: image

tangguo13 commented 3 months ago

thanks for your answer , I'm tryed to use the type: 'rangeColumn' can also achieve the same function 微信图片_20240710165711

tangguo13 commented 3 months ago
const spec = {
    type: 'rangeColumn',
    padding: {
        left: 0,
        right: 0,
        top: 20,
        bottom: 0,
    },
    data: [
        {
            id: 'data0',
            values: specData
        }
    ],
    direction: 'horizontal',
    yField: 'type',
    minField: 'start_time',
    maxField: 'end_time',
    seriesField: 'color',
    tooltip: {
        visible: false
    },
    axes: [
        {
            orient: 'left', type: 'band', bandPadding: 0, trimPadding: false,
            paddingOuter: 0.3,
            tick: {
                visible: false,
            },
            domainLine: {
                visible: false,
            },
        },
        {
            type: 'time',
            orient: 'bottom',
            min: minTime,
            max: maxTime,
            tick: {
                visible: false,
            },
            grid: {
                style: {
                    lineDash: [3, 3],
                    stroke: 'rgb(224,230,241)',
                    lineWidth: 0.5
                }
            },
            layers: [
                {
                    tickStep: 7200,
                    timeFormat: '%H:%M',
                    tickCount: '10',
                    forceTickCount: '10',
                }
            ],

        }
    ],
};