响应式条形图

时间:2019-01-21 16:06:39

标签: angular typescript responsive-design chart.js bar-chart

我正在使用chart.js,并试图根据屏幕宽度来改变粗细度

我编写了一个函数,其中变量保存屏幕的值并确定宽度,并根据该宽度编写了逻辑

我在全球app.service.ts中编写的这段代码

public checkWidth() {
    var width = window.innerWidth;
    if (width <= 768)
 {
        this.screenWidth = 'sm';
        this.onMobileChange(true);
    } 
else if (width > 768 && width <= 992)
 {
        this.screenWidth = 'md';
        this.onMobileChange(false);
    } 
else {
        this.screenWidth = 'lg';
        this.onMobileChange(false);
    }
}

然后我在带有条形图的文件中使用了这段代码。

public checkWidth() 
{
        var width = window.innerWidth;
        if (width <= 1000)
 {
this.newBarThickness = 15;
            } else 
{
            this.newBarThickness  = 27;
           }
        }

0 个答案:

没有答案