javascript - chart.js怎么图表设置实际大小-PHP中文网问答

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <title></title>
   
    <script src="../js/Chart-1.0.1-beta.4.js"></script>
    <script>
        var data = {
            labels: ["MON", "TUS", "WED", "THU", "FRI", "SAT","SUN"],
            datasets: [{

// lineItemName: "test1",

                    fillColor: 'rgba(238,90,133,0.7)',
                    strokeColor: "rgb(238,90,133)",
                    pointColor: "#5b5956",
                    pointStrokeColor: "#a54d65",
                    data: [50, 38, 20, 40, 58, 50 ,40]
                },

            ]
        };

        var chartLine = null;
        window.onload = function() {
            var ctx = document.getElementById("myChart").getContext("2d");
            
            
            chartLine = new Chart(ctx).Line(data, {
                scaleOverride: true, //是否用硬编码重写y轴网格线
                scaleSteps: 3, //y轴刻度的个数
                scaleStepWidth: 20, //y轴每个刻度的宽度
                scaleStartValue: 0, //y轴的起始值
                pointDot: true, //是否显示点
                pointDotRadius: 3, //点的半径
                pointDotStrokeWidth: 2, //点的线宽
                datasetStrokeWidth: 1, //数据线的线宽
                animation: true, //是否有动画效果
                animationSteps: 60 ,//动画的步数
                scaleLineWidth : 1,
                // Y/X轴的颜色
                scaleLineColor : '#686665',
                scaleGridLineColor : "#686665",
                scaleFontSize : 12,
                scaleFontColor : "#fff",
            });

         
        }
    </script>
</head>
<body>
    
        <canvas id="myChart" width="400" height="200" ></canvas>
                

</body>

</script>

</html>

=================================================================

问题就是，加了viewport那行，图表就不缩放了，始终是固定大小，不加那行，就是自适应大小。这怎么搞？也没有对canvas实际内容设置大小的地方。给myChart动态设置宽高也根本不管用，求解求解！

全部回复(2)

阿神2017-04-11 09:19:09 2楼

“user-scalable=no”这表示禁止用户缩放，如果改成“user-scalable=yes”就是同意用户缩放，和你的需求其实并没有冲突吧（只是对用户拉伸放大或缩小做了规定）。话说，我还是不明白题主你到底是要它自适应还是要他固定宽高?https://www.zhihu.com/questio...这是知乎上canvas自适应宽高的讨论，希望能帮到你

赞 +0

添加回复

PHP中文网2017-04-11 09:19:09 1楼

我理解你的意思是想把图表显示得比显示区域大，然后超出的部分通过拖动来查看？

我对这个工具本身没啥研究，不过有一个解决方案可以尝试一下。

用两层 p 作为容易，第一层限定大小，就是显示大小，设置 overflow: auto。
第二层按你期望的图表大小设置大小，并在这上面画图。