Javascript 如果序列数据中的元素为空，Highcharts将不会呈现

我在CRM中显示了一个Highcharts图形，它从页面中的特定元素读取数据。但随着我的进步，我遇到了一些问题，我甚至不确定我是否以最佳的方式来做这件事，事实上，我确定我没有

我每月从另一个系统自动将数据导入CRM中的记录。这些数据存储在页面中当前隐藏的元素中，以防止屏幕上出现混乱

下面的jQuery用于声明变量，以保存HTML中元素的值，这些元素最终用于Highcharts函数中的数据点，如：

var janConnected = $('#jan_connected').text();
var janBusy = $('#jan_busy').text();
var janNoanswer = $('#jan_noanswer').text();
var janAbandoned = $('#jan_abandoned').text();

一年中每个月的每个类别都是如此。然而，并非一年中的所有月份都已发生，因此并非每个元素都有数据

正在使用以下内容呈现图表：

// display the chart
$(document).ready(function() {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'spline',
            borderWidth: 1
        },
        title: {
            text: 'Chart'
        },
        xAxis: {
            categories: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
        },
        yAxis: {
            title: {
                text: 'Total Calls'
            },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: 'white'
            }   
        }
        },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            dataLabels: {
                enabled: true
            }
        }
    },
    exporting: {
        enabled: false
    },  
    series: [{
        name: 'Connected',
        data: JSON.parse("[" + janConnected + "," + febConnected + /* "," + marConnected +  "," + aprConnected + "," + mayConnected + /* "," + junConnected + "," + julConnected + "," + augConnected + "," + sepConnected + "," + octConnected + "," + novConnected + "," + decConnected + */"]")
    }, {
        name: 'Busy',
        data: JSON.parse("[" + janBusy + "," + febBusy + /* "," + marBusy + "," +  aprBusy + "," + mayBusy + /* "," + junBusy + "," + julBusy + "," + augBusy + "," + sepBusy + "," + octBusy + "," + novBusy + "," + decBusy + */"]")
    }, {
        name: 'No Answer',
        data: JSON.parse("[" + janNoanswer + "," + febNoanswer + /* "," + marNoanswer +  "," + aprNoanswer + "," + mayNoanswer + /* "," + junNoanswer + "," + julNoanswer + "," + augNoanswer + "," + sepNoanswer + "," + octNoanswer + "," + novNoanswer + "," + decNoanswer + */"]")
    }, {
        name: 'Abandoned',
        data: JSON.parse ("[" + janAbandoned + "," + febAbandoned + /* "," + marAbandoned +  "," +  aprAbandoned + "," + mayAbandoned + /* "," + junAbandoned + "," + julAbandoned + "," + augAbandoned + "," + sepAbandoned + "," + octAbandoned + "," + novAbandoned + "," + decAbandoned + */"]")
    }, 
        ]
    });
});

您可以在上面每个类别的数据系列中看到，我已经注释掉了后续月份，因为如果我未注释其他月份的图，图表将不会呈现；我将得到一个

JSON.parse:意外字符

，我假设该字符来自元素中没有任何数据。如果您只是从顶部链接的jsFiddle中的div中删除文本/数字，就可以看到这是如何发生的

我不知道我如何才能得到这个设置，这样我就可以让我的所有元素准备就绪，即使元素中没有数据，也可以让图表显示出来。这有意义吗

我真的很挣扎。我相信我一开始就设计得很糟糕。我想我只需要显示图表，不管我定义的元素中是否没有文本

提前谢谢你的帮助。我希望我能充分解释我自己

编辑1:

，但看起来有两个问题：

首先，它现在不显示任何数据点，即使我使用

console.log（connectedArray）

我可以看到数组中元素的所有数据

---

第二，它看起来每个月都有四个类别，而不是每个月有一个类别代表该月的四个数据点。有什么想法吗？

如果您将其更改为：

var janNoanswer = $('#jan_noanswer').text() || '0';

这会使你失望的。你只需要强制一个值，0看起来很适合

编辑：如果需要其他类别不显示，则需要先进行一些计算：

var months = [];
var connectedArray = [];
if ($('jan_connected').html()!='') {
      months.push('January');
      connectedArray.push($('jan_connected').html());
}
if ($('feb_connected').html()!='') {
     months.push('February');
     connectedArray.push($('feb_connected').html());
}
//etc

然后你可以做：

 xAxis: {
        categories: months
    },

及

对Edit1的答复： 您正在向数据传递字符串，而字符串应该是数字，因此添加解析：

connectedArray.push(parseInt($('#jan_connected').html(),10));

---

固定示例：

谢谢你，@dave。是的，这将起到解决问题的作用。这样做会导致一年中所有其他月份都出现在图表上，如下所示：我希望图表只显示有数据的月份，但可能这是不可能的，除非编写了另一个函数来动态更新序列数据？更新的答案，没有时间做小提琴，但希望能给你足够的时间来做。

connectedArray.push(parseInt($('#jan_connected').html(),10));