ChartsJS不加载，除了Inspect元素

ChartsJS Not loading except with Inspect Element

本文关键字：Inspect 元素 除了 加载 ChartsJS      更新时间：2023-09-26

我使用ChartsJS创建一个测量。我喜欢他们的风格，所以我认为与Highcharts或其他工具相比，实现起来不会太难。

我把代码(来自一个jQuery AJAX加载-可能是一个因素)，它只工作，如果我右键单击并打开Inspect Element，或者如果它已经打开，我必须关闭它。否则就是空白的空白……没有控制台错误。

代码:

var scaleSettings = {
startValue: -50,
endValue: 50,
majorTick: {
    color: 'black',
    tickInterval: 10
},
minorTick: {
    visible: true,
    color: 'black',
    tickInterval: 1
}
};

 $("#gaugeGraph").dxCircularGauge({
    value:200,
    valueIndicator: {
        type: 'rangebar',
        color: '#483D8B'
        },
        geometry: {
    startAngle: 180, endAngle: 0
},
scale: {
    startValue: 0, endValue: 100,
    majorTick: {
        tickInterval: 25,
        tickInterval: 50,
        tickInterval: 75,
        tickInterval: 100
    },
    label: {
        customizeText: function (arg) {
            return arg.valueText + ' %';
        }
    }
}
});

装载代码:

文档

$()时()函数{

    loadURL("dataGraph.php?id=<?php echo $id;?>", $('#section > .graph'));
    loadURL("dataGauge.php?id=<?php echo $id;?>", $('#section > .gauge')); //GAUGE
                $(window).trigger('resize'); 
    loadURL("dataRecords.php?id=<?php echo $id;?>", $('#section > .dataTable'));

});

@k0pernikus帮助发现了调整大小的问题。

我使用了下面的代码:

$( document ).ready(function() {
var scaleSettings = {
startValue: -50,
endValue: 50,
majorTick: {
    color: 'black',
    tickInterval: 10
},
minorTick: {
    visible: true,
    color: 'black',
    tickInterval: 1
}
};
 $(window).resize(function()
{
     $("#gaugeGraph").dxCircularGauge({
    value:200,
    valueIndicator: {
        type: 'rangebar',
        color: '#483D8B'
        },
        geometry: {
    startAngle: 180, endAngle: 0
},
scale: {
    startValue: 0, endValue: 100,
    majorTick: {
        tickInterval: 25,
        tickInterval: 50,
        tickInterval: 75,
        tickInterval: 100
    },
    label: {
        customizeText: function (arg) {
            return arg.valueText + ' %';
        }
    }
}
});
}).resize();


});
相关文章：