1

试图为这种奇怪的行为寻求帮助。

我设法得到了 highcharts 图表、多个系列等所有设置。使用内联数组中的静态值时，这些值会正确分配给图表，但如果我从 csv 文件中提取数字，除非我暂停执行并显示警报消息，否则不会分配它们。请看下面的代码

$(function () {

        // every row on report needs
        // category defined (left side)
        var mycategories = [];

        // every column on report needs
        // seriesname defined
        var headers = [];
        var myseriesnames = []; 

        var lines = [];
        var line_tokens = [];

        // Read data from csv file
        $.get('top10raj.csv', function(data) { 

        // Split the lines
        lines = data.split('\n');
        console.log("First line : "+ lines[0]);

        headers = lines[0].split(',');
        for (var i = 1; i < headers.length; i++) {
            myseriesnames.push(headers[i]);
        }

        //
        // display all lines 
        //
        for (var i = 1; i < lines.length; i++) {

            line_tokens = lines[i].split(',');

            console.log('Equip.No:' + line_tokens[0].trim());   // Equipment Number
            console.log(line_tokens[1].trim());                 // ActualCost
            console.log(line_tokens[2].trim());                 // ActualMaterial
            console.log(line_tokens[3].trim());                 // ActualLabor
            console.log(line_tokens[4].trim());                 // ActualOther

            mycategories.push(line_tokens[0].trim());

            }

        });

        alert('report ready');

        var myarray = [7,6,7,8,7,8,3,4,1,4,7,8,7,5];

        var serObj = [{ 'name': myseriesnames[0], 
                        data:[8,9,8,6,5,2,3,6,5,7,4,5,8,9]
                        },
                    {   'name': myseriesnames[1], 
                        data:[8,5,6,9,8,7,4,5,2,5,8,7,8,6]
                        },
                    {   'name': myseriesnames[2], 
                        data: myarray
                        },
                    {   'name': myseriesnames[3], 
                        data: myarray
                    },                  
            ];

        var chart = new Highcharts.Chart({
            chart: {
                renderTo:'container',
                type: 'column'
            },
            title:{
                text:'Chart Title'
            },
            tooltip:{
                    formatter:function(){
                        return '<b>' + this.series.name + '</b>' +          
                        '<br/><b>Item Number:</b> ' + this.x +                  // X Value
                        '<br/><b>Amount:</b> ' + this.y +                       // Y Value
                        '<br/><b>Other Data:</b> ';// + this.point.note;
                    }
            },          
            credits:{enabled:false},
            legend:{
            },
            plotOptions: {
                series: {
                    shadow:false,
                    borderWidth:0
                }
            },
            xAxis:{
                // Need to define categories for every row 
                // on the report (left side)
                categories: mycategories,
                lineColor:'#999',
                lineWidth:1,
                tickColor:'#666',
                tickLength:3,
                labels: { rotation:45, align:'left'},
                title:{
                    text:'Equipment', 
                }
            },
            yAxis:{
                lineColor:'#999',
                lineWidth:1,
                tickColor:'#666',
                tickWidth:1,
                tickLength:3,
                gridLineColor:'#ddd',
                title:{
                    text:'Amount (USD)',
                    rotation:-90,
                    margin:50,
                }
            },    
            series: serObj


        });

});

EqptNumber,ActualTotal,ActualMaterial,ActualLabor,ActualOther,
111.3207B,666693.61,606564.37,53866.49,6262.75,
106.3355,588647.91,240175.91,322779.00,25693.00,
106.3307,364234.86,266598.36,97636.50,0,
125.L8702A,356025.49,347519.49,8506.00,0,
122.E8801A,340712.89,25483.39,33729.50,281500.00,
127.E2201,319372.29,112362.97,307731.88,100722.56,
107.3251A,310587.25,316225.36,35496.50,41134.61,
622.CW88105,307762.86,7957.36,299805.50,0,
133.1203A,307285.20,40273.19,249658.01,17354.00,
106.3352,278737.48,132009.49,146728.00,0.01,
107.3251ACC,310587.25,316225.36,35496.50,41134.61,
622.CW88105CC,307762.86,7957.36,299805.50,0,
133.1203ACC,307285.20,40273.19,249658.01,17354.00,
106.3352CC,278737.48,132009.49,146728.00,0.01,

我正在使用的 csv 文件显示在源代码的底部。

如果以下行

alert('report ready');

被注释掉，我丢失了所有类别标签，它们被沿 X 轴的 0..1,2,3.. 等取代。努力理解为什么会发生这种情况，但到目前为止还没有修复的运气。感谢我能得到的任何帮助，因为我真的想将 Highcharts 库与动态数据一起使用，并且仅使用来自预定义数组的静态数据是非常有限的。

4

1 回答 1

1

问题是您对 csv 文件 ( $.get ) 的请求是异步执行的，这意味着您的其余代码在返回数据之前正在运行。尝试将您的代码移动到回调函数中，例如

//..your code
mycategories.push(line_tokens[0].trim());

            }
      //moved your code here
      var myarray = [7,6,7,8,7,8,3,4,1,4,7,8,7,5];

        var serObj = [{ 'name': myseriesnames[0], 
                        data:[8,9,8,6,5,2,3,6,5,7,4,5,8,9]
                        },
                    {   'name': myseriesnames[1], 
                        data:[8,5,6,9,8,7,4,5,2,5,8,7,8,6]
                        },
                    {   'name': myseriesnames[2], 
                        data: myarray
                        },
                    {   'name': myseriesnames[3], 
                        data: myarray
                    },                  
            ];

        var chart = new Highcharts.Chart({
            chart: {
                renderTo:'container',
                type: 'column'
            },
            title:{
                text:'Chart Title'
            },
            tooltip:{
                    formatter:function(){
                        return '<b>' + this.series.name + '</b>' +          
                        '<br/><b>Item Number:</b> ' + this.x +                  // X Value
                        '<br/><b>Amount:</b> ' + this.y +                       // Y Value
                        '<br/><b>Other Data:</b> ';// + this.point.note;
                    }
            },          
            credits:{enabled:false},
            legend:{
            },
            plotOptions: {
                series: {
                    shadow:false,
                    borderWidth:0
                }
            },
            xAxis:{
                // Need to define categories for every row 
                // on the report (left side)
                categories: mycategories,
                lineColor:'#999',
                lineWidth:1,
                tickColor:'#666',
                tickLength:3,
                labels: { rotation:45, align:'left'},
                title:{
                    text:'Equipment', 
                }
            },
            yAxis:{
                lineColor:'#999',
                lineWidth:1,
                tickColor:'#666',
                tickWidth:1,
                tickLength:3,
                gridLineColor:'#ddd',
                title:{
                    text:'Amount (USD)',
                    rotation:-90,
                    margin:50,
                }
            },    
            series: serObj


        });


        });

        //here's where  the alert used to be
       ///alert('report ready');
});
于 2012-10-16T20:27:53.313 回答