chart.js怎么图表设置实际大小

<!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动态设置宽高也根本不管用,求解求解!

阅读 18.3k
2 个回答

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题