如何使 x 轴与 window 中的变化同步

Question

我正在尝试做一些事情来改变图表的大小与 window 的大小同步。

我真的尝试写了它，在某种程度上我是成功的。

我以为我可以用下面的代码完美地完成，但是只有x轴不同步，我不知道该怎么做。

我应该更改什么才能同步？

<script>
    window.onload = function () {
        var canvas = document.getElementById("cvs");
        var ctx = canvas.getContext("2d");

        function fitCanvasSize() {
            canvas.width = document.documentElement.clientWidth - 10;
            canvas.height = document.documentElement.clientHeight - 10;

            data1 = [[10, 50, 'green'], [20, 10, 'green'], [30, 35, 'green'], [40, 25, 'green']];
            data2 = [[10, 54, 'red'], [20, 45, 'red'], [30, 13, 'red'], [40, 32, 'red']];

            scatter = new RGraph.Scatter({
                id: 'cvs',
                data: [data1, data2],
                options: {
                    line: true,
                    xaxisScaleMax: 100,
                    yaxis: false,
                    yaxisScale: false,
                    marginLeft: 150
                }
            }).draw();

            xaxis = new RGraph.Drawing.XAxis({
                id: 'cvs',
                y: 320,
                options: {
                    xaxisLabels: ['Xlabels'],
                    xaxisColor: 'black',
                    textColor: 'black',
                    marginLeft: 150,
                }
            }).draw();

            yaxis = new RGraph.Drawing.YAxis({
                id: 'cvs',
                x: 45,
                options: {
                    yaxisTitle: ['label3'],
                    yaxisColor: 'red',
                    textColor: 'red'
                }
            }).draw();

            yaxis = new RGraph.Drawing.YAxis({
                id: 'cvs',
                x: 95,
                options: {
                    yaxisTitle: ['label2'],
                    yaxisColor: 'blue',
                    textColor: 'blue'
                }
            }).draw();

            yaxis = new RGraph.Drawing.YAxis({
                id: 'cvs',
                x: 145,
                options: {
                    yaxisTitle: ['label1'],
                    yaxisColor: 'green',
                    textColor: 'green'
                }
            }).draw();
        }

        fitCanvasSize();
        window.onresize = fitCanvasSize;
    }
</script>

Answer 1

这是您修改后的代码：

<canvas id="cvs" width="600" height="250" style="border: 1px solid #ccc">[No canvas support]</canvas>

<style>
    /* Turn off the space at the sides of the page */
    body {
        overflow-y: hidden;
        padding: 0;
    }
</style>

<script>
    canvas = document.getElementById('cvs');

    window.onresize = function ()
    {
        RGraph.ObjectRegistry.clear();
        RGraph.clear(canvas);

        canvas.width  = document.documentElement.clientWidth;
        canvas.height = document.documentElement.clientHeight;

        data1 = [ [10, 50, 'green'], [20, 10, 'green'], [30, 35, 'green'], [40, 25, 'green'] ];
        data2 = [ [10, 54, 'red'],   [20, 45, 'red'],   [30, 13, 'red'],   [40, 32, 'red']   ];

        scatter = new RGraph.Scatter({
            id: 'cvs',
            data: [data1, data2],
            options: {
                line: true,
                xaxisScaleMax: 100,
                xaxis: false,
                yaxis: false,
                yaxisScale: false,
                marginLeft: 200
            }
        }).draw();

        xaxis = new RGraph.Drawing.XAxis({
            id: 'cvs',
            y: canvas.height - 35,
            options: {
                xaxisLabels: ['Q1','Q2','Q3','Q4'],
                xaxisColor: 'black',
                textColor: 'black',
                marginLeft: 200,
            }
        }).draw();

        yaxis1 = new RGraph.Drawing.YAxis({
            id: 'cvs',
            x: 60,
            options: {
                yaxisScaleMax: 10,
                yaxisTitle: 'The red title',
                yaxisColor: 'red',
                textColor: 'red'
            }
        }).draw();

        yaxis2 = new RGraph.Drawing.YAxis({
            id: 'cvs',
            x: 125,
            options: {
                yaxisScaleMax: 12,
                yaxisTitle: 'The blue title',
                yaxisColor: 'blue',
                textColor: 'blue'
            }
        }).draw();

        yaxis3 = new RGraph.Drawing.YAxis({
            id: 'cvs',
            x: 200,
            options: {
                yaxisScaleMax: 100,
                yaxisTitle: 'The green title',
                yaxisColor: 'green',
                textColor: 'green'
            }
        }).draw();
    }

    window.onresize();
</script>

如何使 x 轴与 window 中的变化同步

How to synchronize the x-axis to the changes in the window

javascript

rgraph