javascript 如何在Chart.js中调整图表大小/缩放图表

s2j5cfk0 于 2023-01-29 发布在 Java

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

我在我的代码中使用chart.js。基本上，它工作得很好，但是我在同一个画布上创建第n次图表时遇到了一个问题。我收到错误消息，告诉我应该先销毁图表。然后我在这里找到了一些如何做到这一点的想法，并将这部分代码作为解决方案：

let chartStatus = Chart.getChart("line-chart"); 
if (chartStatus != undefined) {
    chartStatus.destroy();
    //$("div.line-chart").remove();
    //$("div.line-chart").append('<canvas id="line-chart" style="width: 1221px; height: 280px;"></canvas>');
}

它工作正常-至少我没有得到任何错误了，但当我创建图表第二次和更多次，它得到调整大小。请看所附的图片：

如果你看一下比例尺，你会发现它变了。
我的问题是：我怎样才能销毁一个图表并正确地重新创建它的大小/比例等，或者我怎样才能更新一个图表而不是销毁它？
代码如下所示：
浏览器：

let chartStatus = Chart.getChart("line-chart"); 
if (chartStatus != undefined) {
    chartStatus.destroy();
    //$("div.line-chart").remove();
    //$("div.line-chart").append('<canvas id="line-chart" style="width: 1221px; height: 280px;"></canvas>');
}

new Chart(document.getElementById("line-chart"), {
    type: 'line',
    data: {
            labels: labelX,
            datasets: [{ 
            data: waga,
                label: "Waga",
                borderColor: "#3e95cd",
                borderWidth: 1,
                fill: false
        }
        ]
    },
    options: {
            title: {
            display: true,
            responsive: true,
            maintainAspectRatio: false
        }
    }
});

超文本：

<div><canvas id="line-chart" style="width: 1221px; height: 280px;"></canvas></div>

JavaScript

来源：https://stackoverflow.com/questions/75266295/how-to-size-scale-a-chart-in-chart-js

2条答案

按热度按时间

1l5u6lss1#

我已经找到了一个适合我的here解决方案。现在，我的代码如下所示：

let chartStatus = Chart.getChart("line-chart"); 
if (chartStatus != undefined) {
    document.getElementById('line-chart').remove();
    let canvas = document.createElement('canvas');     
    canvas.setAttribute('id','line-chart');     
    canvas.setAttribute('width','1221');     
    canvas.setAttribute('height','280');     
    document.querySelector("#line-chart-wrapper").appendChild(canvas);
}

和HTML部分...

<div id="line-chart-wrapper"><canvas id="line-chart" style="width: 1221px; height: 280px;"></canvas></div>

现在，无论创建多少次，图表看起来都正常。

赞(0）回复(0）举报 2023-01-29

kuhbmx9i2#

画布会在每次绘制图表时调整大小，以适应图表的内容。也可以用相反的方式来完成--让内容适应图表的大小，但这既复杂又耗时，而且如果大小非常不相等，也不一定能正常工作，所以chart.js选择调整大小。
因此，您不能依赖于画布的样式大小，因此建议大致基于代码摘录来设置容器div的样式大小，如下面的示例所示。

let labelX = [], waga = [];
    function resetData(){
        const d0 = Date.now() - 3*365*24*3600*1000*Math.random();
        // change the whole arrays, since the chart is destroyed and rebuilt
        labelX = Array.from({length: 10}, (_, i) =>
            new Date(d0 + i * 24 * 3600 * 1000).toLocaleDateString(undefined,
                {year: 'numeric', month: 'numeric', day: 'numeric'}));
        waga = Array.from({length: 10}, (_, i) => Math.random());
    }

    let chart;
    function drawChart(){
        chart = new Chart(document.getElementById("line-chart"), {
            type: 'line',
            data: {
                labels: labelX,
                datasets: [{
                    data: waga,
                    label: "Waga",
                    borderColor: "#3e95cd",
                    borderWidth: 1,
                    fill: false
                }]
            },
            options: {
                title: {
                    display: true,
                    responsive: true,
                    maintainAspectRatio: false
                },
                scales: {
                    x: {
                        bounds: 'ticks',
                        type: 'category',
                    },
                    y: {
                        type: 'linear',
                        display: true,
                        min: 0,
                        max: 1
                    }
                }
            }
        });
    }

    resetData();
    drawChart();

    document.getElementById('reset').onclick = function(){
        resetData();
        document.querySelector('canvas#line-chart').innerHTML = '';
        chart.destroy();
        drawChart();
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js"
        integrity="sha512-t41WshQCxr9T3SWH3DBZoDnAT9gfVLtQS+NKO60fdAwScoB37rXtdxT/oKe986G0BFnP4mtGzXxuYpHrMoMJLA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="line-chart-container" style="height:300px; border: 1px solid red">
<canvas id="line-chart"></canvas>
</div>
<button id="reset">Reset</button>

尽管如此，更有效的解决方案是只更改数据，然后调用chart.update，如果它符合您的目的，如下所示：
一个二个一个一个

赞(0）回复(0）举报 2023-01-29

我来回答

javascript 如何在Chart.js中调整图表大小/缩放图表

2条答案

相关问题

热门标签

最新问答