Question

我想保持相同的绘图表面宽度，但我不确定在哪里，即使这是可能的。

注意这两张图片之间的区别

示例here

因为0-9范围内的数字较小，整个绘图表面将比图表范围从0-5000

更宽

有没有什么方法可以让我对于动态的绘图表面进行修复？

CSS

.coin_data_info{
    width: 400px !important;
    height: 240px !important;
}

HTML

<button id="update">Update</button>
<div class="coin_data_info">
    <canvas id="coin_data_chart" width="400" height="240"></canvas>
</div>

的Javascript

    var coin_data_labels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
    var coin_data_data = [5, 3, 7, 9, 1, 5, 1];
    var coin_data_chart = document.getElementById("coin_data_chart");
    var ctx = document.getElementById("coin_data_chart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            datasets: [{
                    lineTension: 0,
                    pointBackgroundColor: "#fff",
                    label: '$',
                    data: [1200, 1900, 3000, 5000, 2000, 3000, 1200],
                    backgroundColor: [
                        'rgba(255,255,255,0.5)'
                    ],
                    borderColor: [
                        '#000'
                    ],
                    borderWidth: 2
                }]
        },
        options: {
            scales: {
                yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
            },
            legend: {
                display: false
            }
        }
    });
    console.log(myChart);

    document.getElementById("update").addEventListener("click", function(e){
        myChart.data.datasets[0].data = coin_data_data;
        myChart.data.labels = coin_data_labels;
        myChart.update();
    }, false);

Answer 1

我没有在Chartjs文档或代码中看到任何可以防止缩放区域调整大小的地方。

在代码中，他们描述了如何计算布局。鉴于在更新数据时调整了此布局的大小并进行了渲染，我可以看到的唯一方法是允许修改/扩展Chartjs代码。

https://github.com/chartjs/Chart.js/blob/6bea15e7cf89003e3a5945a20cf1d2cc5096728e/src/core/core.layouts.js

// Essentially we now have any number of boxes on each of the 4 sides.
        // Our canvas looks like the following.
        // The areas L1 and L2 are the left axes. R1 is the right axis, T1 is the top axis and
        // B1 is the bottom axis
        // There are also 4 quadrant-like locations (left to right instead of clockwise) reserved for chart overlays
        // These locations are single-box locations only, when trying to register a chartArea location that is already taken,
        // an error will be thrown.
        //
        // |----------------------------------------------------|
        // |                  T1 (Full Width)                   |
        // |----------------------------------------------------|
        // |    |    |                 T2                  |    |
        // |    |----|-------------------------------------|----|
        // |    |    | C1 |                           | C2 |    |
        // |    |    |----|                           |----|    |
        // |    |    |                                     |    |
        // | L1 | L2 |           ChartArea (C0)            | R1 |
        // |    |    |                                     |    |
        // |    |    |----|                           |----|    |
        // |    |    | C3 |                           | C4 |    |
        // |    |----|-------------------------------------|----|
        // |    |    |                 B1                  |    |
        // |----------------------------------------------------|
        // |                  B2 (Full Width)                   |
        // |----------------------------------------------------|
        //
        // What we do to find the best sizing, we do the following
        // 1. Determine the minimum size of the chart area.
        // 2. Split the remaining width equally between each vertical axis
        // 3. Split the remaining height equally between each horizontal axis
        // 4. Give each layout the maximum size it can be. The layout will return it's minimum size
        // 5. Adjust the sizes of each axis based on it's minimum reported size.
        // 6. Refit each axis
        // 7. Position each axis in the final location
        // 8. Tell the chart the final location of the chart area
        // 9. Tell any axes that overlay the chart area the positions of the chart area

更新chart.js线图

1 个答案: