3

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

我基本上已经在此处重新创建了 jsFiddle 中的设置方式。

我每个月都会从另一个系统自动将数据导入 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：

我试过在这里更新小提琴，但看起来有两个问题：

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

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

4

2 回答 2

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 }, ... ]
于 2013-06-08T00:00:29.530 回答
1

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

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

固定示例：http: //jsfiddle.net/4pptn/1/

于 2013-06-10T12:11:31.153 回答