Chart.js 缩小

huangapple go评论75阅读模式
英文:

Chart.js shrinking

问题

使用chart.js出现了一个新问题。
我的图表开始神秘地缩小到几乎看不见。
看起来这是chart.js中引入的一个新bug。
这种缩小效果显然不是预期的或者想要的。

var scanCountChart = new Chart("ScanCountChart", {
    type: "bar",
    data: {
        labels: xVals,
        datasets: [{
            backgroundColor: barColors,
            data: yVals
        }]
    },
    options: {
        plugins: {
            tooltip: {
                titleFont: {
                    size: 50
                },
                bodyFont: {
                    size: 30
                },
                footerFont: {
                    size: 15 // 默认情况下没有页脚
                }
            },
            legend: { display: false },
            zoom: {
                limits: {
                    y: { min: 0, max: 100 },
                    y2: { min: -5, max: 5 }
                },
            }
        },
        scales: {
            x: {
                ticks: {
                    font: {
                        size: xFontSize
                    },
                    maxRotation: 45,
                    minRotation: 25
                }
            },
            y: {
                ticks: {
                    font: {
                        size: yFontSize
                    }
                }
            }
        }
    }
});
英文:

Using chart.js a new issue has appeared.
My charts have started mysteriously shrinking to nothing.
It looks like a new bug that has been introduced in chart.js.
This shrinking effect is obviously not intended or wanted.

var scanCountChart = new Chart("ScanCountChart", {
        type: "bar",
        data: {
            labels: xVals,
            datasets: [{
                backgroundColor: barColors,
                data: yVals
            }]
        },
        options: {
            plugins: {
                tooltip: {
                    titleFont: {
                        size: 50
                    },
                    bodyFont: {
                        size: 30
                    },
                    footerFont: {
                        size: 15 // there is no footer by default
                    }
                },
                legend: { display: false },
                zoom: {
                    limits: {
                        y: { min: 0, max: 100 },
                        y2: { min: -5, max: 5 }
                    },
                }
            },
            scales: {
                x: {
                    ticks: {
                        font: {
                            size: xFontSize
                        },
                        maxRotation: 45,
                        minRotation: 25
                    }
                },
                y: {
                    ticks: {
                        font: {
                            size: yFontSize
                        }
                    }
                }
            }
        }
    });

答案1

得分: 1

回答自己的问题。
解决方法似乎是添加 maintainAspectRatio: false

var scanCountChart = new Chart("ScanCountChart", {
    type: "bar",
    data: {
        labels: xVals,
        datasets: [{
            backgroundColor: barColors,
            data: yVals
        }]
    },
    options: {
        maintainAspectRatio: false,  // *** 重要:必须添加此项,否则图表会出现奇怪的缩小效果。
        plugins: {
            tooltip: {
                titleFont: {
                    size: 50
                },
                bodyFont: {
                    size: 30
                },
                footerFont: {
                    size: 15 // 默认情况下没有页脚
                }
            },
            legend: { display: false },
            zoom: {
                limits: {
                    y: { min: 0, max: 100 },
                    y2: { min: -5, max: 5 }
                },
            }
        },
        scales: {
            x: {
                ticks: {
                    font: {
                        size: xFontSize
                    },
                    maxRotation: 45,
                    minRotation: 25
                }
            },
            y: {
                ticks: {
                    font: {
                        size: yFontSize
                    }
                }
            }
        }
    }
});
英文:

Answering own question.
Solution appears to be adding maintainAspectRatio: false.

var scanCountChart = new Chart("ScanCountChart", {
    type: "bar",
    data: {
        labels: xVals,
        datasets: [{
            backgroundColor: barColors,
            data: yVals
        }]
    },
    options: {
maintainAspectRatio: false,  // *** Important : this is required or a strange vanishing zoom out effect occurs with the graph. 
        plugins: {
            tooltip: {
                titleFont: {
                    size: 50
                },
                bodyFont: {
                    size: 30
                },
                footerFont: {
                    size: 15 // there is no footer by default
                }
            },
            legend: { display: false },
            zoom: {
                limits: {
                    y: { min: 0, max: 100 },
                    y2: { min: -5, max: 5 }
                },
            }
        },
        scales: {
            x: {
                ticks: {
                    font: {
                        size: xFontSize
                    },
                    maxRotation: 45,
                    minRotation: 25
                }
            },
            y: {
                ticks: {
                    font: {
                        size: yFontSize
                    }
                }
            }
        }
    }
});

huangapple
  • 本文由 发表于 2023年3月7日 12:40:40
  • 转载请务必保留本文链接:https://go.coder-hub.com/75658106.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定