Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DataZoom 在动态数据时表现异常 #2667

Closed
qingweibinary opened this issue Feb 26, 2016 · 5 comments
Closed

DataZoom 在动态数据时表现异常 #2667

qingweibinary opened this issue Feb 26, 2016 · 5 comments
Labels

Comments

@qingweibinary
Copy link

qingweibinary commented Feb 26, 2016

  1. 有时候 zoom in 会让 label 跑到 grid 外面
  2. 有时候 zoom out 之后并没有和 series data 同步

我猜测zoom in/out 时并没有设置上下限,当我用滑鼠的轮子操作时,zoom in 到最大化后,继续 zoom in 会循环回到 原始 zoom out 的状态

还是我需要在动态加载数据的同时对 dataZoom 进行改动?

附上示例

option = {
    title : {
        text: '动态数据',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['最新成交价']
    },
    toolbox: {
        show : true,
        feature : {
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    dataZoom : [{
        type: 'inside',
        start : 0,
        end : 100
    },
    {
        type: 'slider',
        start : 0,
        end : 100
    }
    ],
    xAxis : [
        {
            type : 'value',
            scale: true
        }
    ],
    yAxis : [
        {
            type : 'value',
            scale: true,
            name : '预购量',
            max: 1200,
            min: 0,
            boundaryGap: [0.2, 0.2]
        }
    ],
    series : [
        {
            name:'最新成交价',
            type:'line',
            data:(function (){
                var res = [];
                var len = 0;
                while (len < 10) {
                    var n = [
                        len,
                        (Math.random()*10 + 5).toFixed(1)
                    ];
                    res.push({name: n[0], value: n});
                    len++;
                }
                return res;
            })(),
            animation: true,
            animationDurationUpdate: 500,
            animationEasing: 'linear',
            animationEasingUpdate: 'linear'
        }
    ]
};
clearInterval(app.timeTicket);
app.count = 11;
app.timeTicket = setInterval(function (){

    var data0 = option.series[0].data;
    data0.shift();
    var lastData = data0[data0.length - 1].value;
    var x = [lastData[0] + 1, Math.round(Math.random() * 1000)];

    data0.push({name: x[0], value: x});

    myChart.setOption(option);
}, 2100);
@pissang pissang added the bug label Feb 26, 2016
@pissang
Copy link
Contributor

pissang commented Feb 26, 2016

动态数据加载只设置 series 试试,现在你是完整的 option 同时设置了 dataZoom

@qingweibinary
Copy link
Author

qingweibinary commented Feb 26, 2016

setOption 只设置 series 的话,ZoomIn 循环至 zoomOut 的 情况不再出现,但是还是有 label 溢出的问题

option = {
    title : {
        text: '动态数据',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['最新成交价']
    },
    toolbox: {
        show : true,
        feature : {
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    dataZoom : [{
        type: 'inside',
        start : 0,
        end : 100
    },
    {
        type: 'slider',
        start : 0,
        end : 100
    }
    ],
    xAxis : [
        {
            type : 'value',
            scale: true
        }
    ],
    yAxis : [
        {
            type : 'value',
            scale: true,
            name : '预购量',
            max: 1200,
            min: 0,
            boundaryGap: [0.2, 0.2]
        }
    ],
    series : [
        {
            name:'最新成交价',
            type:'line',
            data:(function (){
                var res = [];
                var len = 0;
                while (len < 10) {
                    var n = [
                        len,
                        (Math.random()*10 + 5).toFixed(1)
                    ];
                    res.push({name: n[0], value: n});
                    len++;
                }
                return res;
            })(),
            animation: true,
            animationDurationUpdate: 500,
            animationEasing: 'linear',
            animationEasingUpdate: 'linear'
        }
    ]
};
clearInterval(app.timeTicket);
app.count = 11;
app.timeTicket = setInterval(function (){

    var data0 = option.series[0].data;
    data0.shift();
    var lastData = data0[data0.length - 1].value;
    var x = [lastData[0] + 1, Math.round(Math.random() * 1000)];

    data0.push({name: x[0], value: x});

    myChart.setOption({series: option.series});
}, 2100);

@pissang
Copy link
Contributor

pissang commented Feb 26, 2016

label 溢出指的是?

@qingweibinary
Copy link
Author

qingweibinary commented Feb 26, 2016

不好意思,不常用中文,就 series 的 label , (circle) 会跑到 grid 外面,

在快速 zoom in, 再 zoom out 后,DataZoom slider 会显示已 zoom out 至最大,但图表的显示并不正确,有时可以看到 circle 在 axis 以外

screen shot 2016-02-26 at 10 53 31 am

看看右侧有个小圆点

@qingweibinary
Copy link
Author

qingweibinary commented Feb 26, 2016

I have a workaround for this which fit my use case ~
Set xAxis (or whichever Axis that DataZoom works on) with absolute min and max value
eg.

{ xAxis: {
    min: minimumData - 10,
    max: maximumData + 10,
}}

This will at least prevent label go outside of the graph

@100pah 100pah closed this as completed in f78b8a2 Feb 26, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants