Question

我使用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 + ' %';
        }
    }
}
});

加载代码：

$（document）.ready（function（）{

    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'));

}）;

Answer 1

@ 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();





});

图表JS除了Inspect Element之外没有加载

1 个答案: