ChartJS 用按钮实现图表缩放

kiayqfof 于 2022-11-06 发布在 Chart.js

关注(0)|答案(2)|浏览(171)

是否有可能实现缩放按钮快速缩放（+和-按钮）与chartjs现在我使用以下代码：

pan: {
                    enabled: true,
                    mode: 'xy',
                    rangeMin: {
                        // Format of min pan range depends on scale type
                        x: null,
                        y: null
                    },
                    rangeMax: {
                        // Format of max pan range depends on scale type
                        x: null,
                        y: null
                    }
                },
                zoom: {
                    enabled: true,
                    mode: 'xy',
                    rangeMin: {
                        // Format of min pan range depends on scale type
                        x: 1,
                        y: 1
                    },
                    rangeMax: {
                        // Format of max pan range depends on scale type
                        x: 5,
                        y: 5
                    }

仅通过鼠标滚轮（默认）谢谢

chart.js

来源：https://stackoverflow.com/questions/49727597/implement-chartjs-zoom-with-buttons

2条答案

按热度按时间

0aydgbwb1#

您可以使用事件行程常式来检查/更新xAxes的刻度，以达到类似的效果：

$('#zoom_in').click(function(){
    ticks = myChart.chart.options.scales.xAxes[0].ticks;

    /* if x-axis is categorical, use the data.labels to determine current axis range, e.g.:
    labels = myChart.chart.data.labels; 
    startTick = labels.indexOf(ticks.min);
    endTick = labels.indexOf(ticks.max);
    */

    // below assumes ticks.min and ticks.max are numeric
    var diff = ticks.max - ticks.min;
    var factor = 0.05;

    var newMin = ticks.min + factor * diff;
    var newMax = ticks.max - factor * diff;

    ticks.min = newMin;
    ticks.max = newMax;  
    myChart.update();
});

赞(0）回复(0）举报 2022-11-06

3htmauhk2#

数值需要更改为图表.配置.选项.刻度.x

document.getElementById("lastDays").onclick = ()=> {
        ticks = chart.config.options.scales.x;
        ticks.min = lastDaysMs;
        ticks.max = nowTime;
        chart.update();
      };

赞(0）回复(0）举报 2022-11-06

我来回答

ChartJS 用按钮实现图表缩放

2条答案

相关问题

热门标签

最新问答