Question

昨天我发布了一个关于获取highcharts.JS以解决XML数据被推送到它时的问题的问题。我没有深入了解所以我认为我得到的答案有点偏离所以今天我会尝试重新发布它，看看我是否能得到更适合我的问题的答案

我有一个Quickbase应用程序，使用来自API调用的XML数据绘制到highchart.js图表。 XML数据是一个表查询，可以从14个字段中恢复记录数据。在这些字段中，数据的范围可以从.001到99.99，但是有些数据会不时产生{NaN，NaN，NaN}数组，当该系列被推入图形时，它会使整个图形为空白直到你取消选择该选项

昨天有人建议Highcharts有一个内置的＆＃34; nodata＆＃34;函数，但我找到解释的唯一方法就是当有一个实例时，图表中绝对没有数据提供（在这种情况下，它显示在图表上＃34;没有数据＆＃34;，但那是不是我要找的东西，因为总会有至少一个（通常至少有五个，但为了简单起见，我会说一个）字段有数据。

以下是我目前正在使用的代码

    <!DOCTYPE html>
<html>
<head>
<title>Graph</title>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>

<script>

$(document).ready(function() {

    var sgaxml = 'https://sga.quickbase.com/db/bjmdensiu?apptoken=beadyrucxguavbx5isubd6iaqpe&act=API_DoQuery&query=%7B14.EX.%27_FID_9%7D&clist=7.24.25.26.27.28.29.30.31.32.33.34.35.36.37'

        var options = {
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Components Over Time'
            },
            xAxis: {
                categories: []
            },
            yAxis: {
                title: {
                    text: 'Concentration%'
                }
            },
            series: []
        };

        // Load the data from the XML file 
        $.get(sgaxml, function(xml) {

        // Split the lines
        var xml = $(xml).find('record');


    // Variables for the component series

    var seriesH = {
            name: 'Hydrogen',
            data: []
        };

         var seriesHe = {
            name: 'Helium',
            data: []
        };

    var seriesO = {
            name: 'Oxygen',
            data: []
        };

    var seriesHs = {
            name: 'Hydrogen Sulfide',
            data: []
        };

    var seriesN = {
            name: 'Nitrogen',
            data: []
        };

    var seriesC = {
            name: 'Carbon Dioxide',
            data: []
        };

    var seriesM = {
            name: 'Methane',
            data: []
        };

    var seriesE = {
            name: 'Ethane',
            data: []
        };

    var seriesP = {
            name: 'Propane',
            data: []
        };

    var seriesIb = {
            name: 'Iso-Butane',
            data: []
        };

    var seriesNb = {
            name: 'N-Butane',
            data: []
        };

    var seriesIp = {
            name: 'Iso-Pentane',
            data: []
        };

    var seriesNp = {
            name: 'N-Pentane',
            data: []
        };

    var seriesHex = {
            name: 'Hexanes+',
            data: []
        };

    xml.each(function (i, record) {
            options.xAxis.categories.push(new Date(parseInt($(record).find('sample_date').text())));
        seriesH.data.push(parseFloat($(record).find('hydrogen').text()));
        seriesHe.data.push(parseFloat($(record).find('helium').text()));
        seriesO.data.push(parseFloat($(record).find('oxygen').text()));
        seriesHs.data.push(parseFloat($(record).find('hydrogen_sulfide').text()));
        seriesN.data.push(parseFloat($(record).find('nitrogen').text()));
        seriesC.data.push(parseFloat($(record).find('co2').text()));
            seriesM.data.push(parseFloat($(record).find('methane').text()));
            seriesE.data.push(parseFloat($(record).find('ethane').text()));
        seriesP.data.push(parseFloat($(record).find('propane').text()));
        seriesIb.data.push(parseFloat($(record).find('iso_butane').text()));
        seriesNb.data.push(parseFloat($(record).find('n_butane').text()));
        seriesIp.data.push(parseFloat($(record).find('iso_pentane').text()));
        seriesNp.data.push(parseFloat($(record).find('n_pentane').text()));
        seriesHex.data.push(parseFloat($(record).find('hexanes_').text()));
        });

    console.log(seriesO.data);  

        if(seriesH.data >= .001){console.log("No Hydrogen Data")} else {options.series.push(seriesH)};
    if(seriesHe.data >= .001){console.log("No Helium Data")} else {options.series.push(seriesHe)};
    if(seriesO.data >= .001){console.log("No Oxygen Data")} else {options.series.push(seriesO)};
    if(seriesHs.data >= .001){console.log("No H2S Data")} else {options.series.push(seriesHs)};
    if(seriesN.data >= .001){console.log("No Nitrogen Data")} else {options.series.push(seriesN)};
    if(seriesC.data >= .001){console.log("No Carbon Dioxide Data")} else {options.series.push(seriesC)};
    if(seriesM.data >= .001){console.log("No Methane Data")} else {options.series.push(seriesM)};
    if(seriesE.data >= .001){console.log("No Ethane Data")} else {options.series.push(seriesE)};
    if(seriesP.data >= .001){console.log("No Propane Data")} else {options.series.push(seriesP)};
    if(seriesIb.data >= .001){console.log("No Iso-B Data")} else {options.series.push(seriesIb)};
    if(seriesNb.data >= .001){console.log("No N-B Data")} else {options.series.push(seriesNb)};
    if(seriesIp.data >= .001){console.log("No Iso-P Data")} else {options.series.push(seriesIp)};
    if(seriesNp.data >=.001){console.log("No N-P Data")} else {options.series.push(seriesNp)};
    if(seriesHex.data >=.001){console.log("No Hexane+ Data")} else {options.series.push(seriesHex)};
        console.log('options: ', options);

            var chart = new Highcharts.Chart(options);
    });
});

</script>

</head>
<body>
<div id="container" style=" width: 1000px; height: 600px; margin: 0 auto "></div>
</body>
</html>

这是API调用的XML输出

    <qdbapi>
<action>API_DoQuery</action>
<errcode>0</errcode>
<errtext>No error</errtext>
<dbinfo>
<name>RESULT</name>
<desc/>
</dbinfo>
<variables>
<co2>Carbon Dioxide</co2>
<methane>methane</methane>
</variables>
<chdbids></chdbids>
<record>
<sample_date>1386892800000</sample_date>
<hydrogen>0.002</hydrogen>
<helium>0.114</helium>
<oxygen/>
<hydrogen_sulfide/>
<nitrogen>1.926</nitrogen>
<co2>0.454</co2>
<methane>82.163</methane>
<ethane>6.353</ethane>
<propane>4.760</propane>
<iso_butane>0.618</iso_butane>
<n_butane>1.819</n_butane>
<iso_pentane>0.491</iso_pentane>
<n_pentane>0.544</n_pentane>
<hexanes_>0.756</hexanes_>
<update_id>1408654196361</update_id>
</record>
<record>
<sample_date>1383782400000</sample_date>
<hydrogen>0.006</hydrogen>
<helium>0.038</helium>
<oxygen/>
<hydrogen_sulfide/>
<nitrogen>0.512</nitrogen>
<co2>0.844</co2>
<methane>83.178</methane>
<ethane>8.678</ethane>
<propane>3.631</propane>
<iso_butane>0.493</iso_butane>
<n_butane>1.097</n_butane>
<iso_pentane>0.342</iso_pentane>
<n_pentane>0.371</n_pentane>
<hexanes_>0.810</hexanes_>
<update_id>1408981434690</update_id>
</record>
<record>
<sample_date>1369699200000</sample_date>
<hydrogen>0.004</hydrogen>
<helium>0.060</helium>
<oxygen/>
<hydrogen_sulfide/>
<nitrogen>1.684</nitrogen>
<co2>0.443</co2>
<methane>77.742</methane>
<ethane>10.430</ethane>
<propane>6.842</propane>
<iso_butane>0.587</iso_butane>
<n_butane>1.482</n_butane>
<iso_pentane>0.232</iso_pentane>
<n_pentane>0.249</n_pentane>
<hexanes_>0.245</hexanes_>
<update_id>1408981112624</update_id>
</record>
</qdbapi>

我知道在我的代码的后半部分中，if else是不会起作用的，因为数组中的值不是数字而是NaN。我的问题是，如果我有NaN的值，我将如何测试，如果我这样做，不要将该系列推送到图表中。我不能完全删除它，因为有些人实际上会对目前在NaN上获得价值的人有价值

Answer 1

查看您的xml，值是有效数字，因此它不能是NaN。我在您的代码中发现的一个逻辑错误是，您正在将数组seriesH.data与数字.001进行比较，该数字无效。

 if(seriesH.data >= .001){console.log("No Hydrogen Data")} else {options.series.push(seriesH)};

您应该将数组的单个元素与数值测试进行比较。

 if(seriesH.data[0] >= .001){console.log("No Hydrogen Data")} else {options.series.push(seriesH)};

在JS数组中测试NaN？

1 个答案: