Question

我在CRM中显示的Highcharts图表正在从页面中的特定元素读取数据。但是随着我的进步，我遇到了几个问题，我甚至不确定我是这样做的最佳方式，事实上，我确定我不是。

I have essentially recreated how this is setup in jsFiddle here.

我每月从另一个系统自动将数据导入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: unexpected character，我假设它来自没有任何数据的元素。如果你只是从顶部链接的jsFiddle中的div中删除文本/数字，你可以看到这是如何发生的。

我不知道如何才能进行此设置，因此即使元素中没有数据，我也可以准备好所有元素并显示图表。这有意义吗？

我真的很挣扎。我敢肯定我一开始就设计得非常糟糕。我想我只需要显示图表，无论我定义的元素是否没有文本。

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

修改1：

I've tried updating the fiddle here，但看起来有两个问题：

首先，它现在没有显示任何数据点，即使我做了console.log(connectedArray)我可以看到数组中元素的所有数据。

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

Answer 1

如果您将其更改为：

，则必须具有值

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
    },

和

series: [{name: 'Connected', data: connectedArray }, ... ]

Answer 2

回答Edit1：您正在将字符串传递给数据，而应该是数字，因此请添加解析：

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

修复示例：http://jsfiddle.net/4pptn/1/

如果系列数据中的元素为空，则不会呈现Highcharts

2 个答案: