Chartjs v. 3.7.1 放大太多后缩小不起作用

问题描述 投票：0回答：2

我在前端和 Chartjs 方面还是个新手。我的问题是，当我放大超过某个点时，我无法缩小回来。我尝试了鼠标滚轮选项并添加了“缩小”按钮，但两者都不起作用。当我放大一点时，我不会遇到同样的问题。我尝试了 Chrome 和 Edge 浏览器，两者都有相同的行为。

CahartJs 版本：3.7.1

chartjs-plugin-zoom 版本：1.2.0

注意：第二张图是数据抽取，与当前问题无关。

script.js 和index.html:

//data creation

let labels2 = [];
let data2 = []
i = 0
k = 0

while (k < 250) {
    if (i < 10) {
        let last_hall = 600
        data2.push(last_hall)
        labels2.push(k);
        i++
    }

    if (i >= 10) {
        let last_hall = 500
        data2.push(last_hall)
        labels2.push(k);
        i++
        if (i == 20) {

            for (let j = 0; j < 30; j++) {
                let last_hall = getRandomInt(800, 1300)
                data2.push(last_hall)
                labels2.push(k);
                k++
            }
            i = 0
        }

    }

    k++
}



//data2 = data2.fill(0).map(() => Math.random());
// let labels2 = [];
// let i = 0;
// data2.forEach(element => {
//     labels2.push(i);
//     i++;
// });


let data3 = [];
data3 = data2;
let labels3 = [];
labels3 = labels2;
ColorArr = ["red", "blue", "red"]
let backgroundColorArr = [];
let backgroundColorArr2 = [];

var ctx = document.getElementById('myChart2').getContext('2d');
var ctx2 = document.getElementById('myChart3').getContext('2d');


const up = (ctx, value) => ctx.p0.parsed.y >= ctx.p1.parsed.y ? value : undefined;
const down = (ctx, value) => ctx.p0.parsed.y < ctx.p1.parsed.y ? value : undefined;
const up2 = (ctx2, value) => ctx2.p0.parsed.y >= ctx2.p1.parsed.y ? value : undefined;
const down2 = (ctx2, value) => ctx2.p0.parsed.y < ctx2.p1.parsed.y ? value : undefined;


data2.forEach(element => {
    backgroundColorArr.push(ColorArr[i % 3]);
    i++;
});

backgroundColorArr2 = backgroundColorArr;



//Decimation

// if (data3.length > 1000) {
//     var datastep = Math.floor(data3.length / 1000) //always show 1000 values from all data
//     console.log(datastep);
//     for (i = 0; i < 1000; i++) {
//         data3[i] = data3[i * datastep];
//         backgroundColorArr2[i] = backgroundColorArr2[i * datastep];
//         labels3[i] = labels3[i * datastep];

//     }

// }
// console.log(labels3)
// data3 = data3.slice(0, 1000);
// labels3 = labels3.slice(0, 1000);
// backgroundColorArr2 = backgroundColorArr2.slice(0, 1000);




let chart3 = new Chart(ctx, {
    type: 'line',
    data: {
        labels: labels2,
        datasets: [{

            data: data2,
            fill: true,
            //backgroundColor: backgroundColorArr[ctx.p0DataIndex],
            segment: {
                borderColor: ctx => up(ctx, 'rgba(75,192,192,1)') || down(ctx, "red"),
                backgroundColor: ctx => up(ctx, 'rgba(75,192,192,1)') || down(ctx, "red"), //backgroundColorArr[ctx.p0DataIndex]

            },
        }]
    },
    options: {
        //parsing: false,
        scales: {
            x: {
                ticks: {
                    maxTicksLimit: 10,
                    autoSkip: true,

                }
            },
            y: {
                beginAtZero: true
            }

        },

        datasets: {
            parsing: false,
            line: {
                pointRadius: 0 // disable for all `'line'` datasets
            }
        },
        plugins: {
            // decimation: {
            //     algorithm: 'lttb',
            //     enabled: true,
            //     samples: 20
            // },
            zoom: {
                pan: {
                    enabled: true,
                    mode: 'x',
                },
                zoom: {
                    
                    wheel: {
                        enabled: true,
                        
                    },
                    pinch: {
                        enabled: true
                    },
                    mode: 'x',
                }
            }
        }
    }
});



let chart2 = new Chart(ctx2, {
    type: 'line',
    data: {
        labels: labels3,
        datasets: [{

            data: data3,
            fill: true,
            //backgroundColor: backgroundColorArr[ctx.p0DataIndex],
            segment: {
                borderColor: ctx2 => up2(ctx2, 'rgba(75,192,192,1)') || down(ctx2, "red"),
                backgroundColor: ctx2 => up2(ctx2, 'rgba(75,192,192,1)') || down(ctx2, "red"), //backgroundColorArr[ctx.p0DataIndex],

            },
        }]
    },
    options: {
        //parsing: false,
        scales: {
            x: {
                ticks: {
                    maxTicksLimit: 10,
                    autoSkip: true,

                }
            },
            y: {
                beginAtZero: true
            }

        },


        datasets: {
            parsing: false,
            line: {
                pointRadius: 0 // disable for all `'line'` datasets
            }
        },
        plugins: {
            // decimation: {
            //     algorithm: 'lttb',
            //     enabled: true,
            //     samples: 20
            // },
            zoom: {
                pan: {
                    enabled: true,
                    mode: 'x',
                },
                zoom: {
                    //enabled: true,
                    wheel: {
                        enabled: true,
                    },
                    pinch: {
                        enabled: true
                    },
                    mode: 'x',
                }
            }
        }
    }
});



function resetZoom() {
    chart2.resetZoom();

}

function resetZoom2() {
    chart3.resetZoom();

}
function zoomButton() {
    chart2.zoom(1.1);

}
function zoomButton2() {
    chart3.zoom(1.3);

}
function zoomOutButton() {
    chart2.zoom(0.9);

}
function zoomOutButton2() {
    chart3.zoom(0.7);

}

function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>Charts, Charts, Charts</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"
        integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.2.0/chartjs-plugin-zoom.min.js"
        integrity="sha512-TT0wAMqqtjXVzpc48sI0G84rBP+oTkBZPgeRYIOVRGUdwJsyS3WPipsNh///ay2LJ+onCM23tipnz6EvEy2/UA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

<body>
    <button onclick="download_csv_file()"> Download CSV </button>
    <h1>Charts, Charts, Charts</h1>
    <div class="container">
        <div class="row">

            <div class="col-6 chart">
                <canvas id="myChart2" width="1000" height="800"></canvas>
                <button onclick="resetZoom2()"> Reset </button>
                <button onclick="zoomOutButton2()"> Zoom Out </button>
                <button onclick="zoomButton2()"> Zoom In</button>
            </div>
        </div>
        <div class="row">
            <div class="col-6 chart">
                <canvas id="myChart3" width="1000" height="800"></canvas>

                <button onclick="resetZoom()"> Reset </button>

                <button onclick="zoomButton()"> Zoom In</button>
                <button onclick="zoomOutButton()"> Zoom Out</button>

            </div>
            <div class="col-6 chart">
                <canvas id="myChart4" width="500" height="400"></canvas>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

chart.js zooming
2个回答
3
投票

刚刚遇到了同样的问题。 https://github.com/chartjs/chartjs-plugin-zoom/issues/696

可能的解决方案： 不要使用数字作为标签，使用它们的 String 版本 通过在数组的项目上使用 

.toString()
。

[1, 2, 3] -> ["1", "2", "3"]
0
投票

正如有人在另一个答案中提到的，X 轴数据必须采用字符串格式。

在您的情况下，您可以通过将 

labels
属性修改为如下内容来做到这一点：

labels: labels3.map(i => i.toString()),
datasets: ...

这对我有用，希望对你也有用！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.