Question

我正在尝试在Highcharts的工具提示中显示csv数据。数据：

Time,Users,AVG_Sec,Volume,ServerName,InstanceName
 11:35  AM ,59,.863,664,server1,int123
 11:35  AM ,43,.659,392,server2,int123
 11:35  AM ,46,1.347,442,server3,int124
 11:35  AM ,49,1.164,702,server2,int125

我可以在图表中显示用户，avg_sec和音量。如果我可以将图表中的服务器名称和实例名称显示为条形/列，请至少在工具提示中显示它们，请告诉我。

到目前为止的代码：

$(document).ready(function() {

        var options = {
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Last Hourly All'
            },

             tooltip:{
                     formatter:function(){
                       return '<b>' + this.series.name + '</b>' + 
                                  '<br/><b>X Value:</b> ' + this.x +
                                  '<br/><b>Y Value:</b> ' + this.y +
                                  '<br/><b>Other Data:</b> ' + this.point.ServerName;
                     }
            },          



            credits: {
            enabled: false
            },
            xAxis: {
                categories: [],
                labels: {
                  rotation: -90                     
              }

            },
            yAxis:[{
                    startOnTick: false,
                    title: {
                        text: 'No of Transactions'
                    }
                }, {
                    opposite: true,
                    title: {
                        text: 'Response Time'
                    }
                }, {
                    opposite: true,
                    title: {
                        text: 'Volume'
                    }
                }, {
                    opposite: true,
                    title: {
                        text: 'Server Name'
                    }
                }, {
                    opposite: true,
                    title: {
                        text: 'Instance Name'
                    }
                }
              ],
            series: []
        };
        //try.csv    
        $.get('data/lastHrlyAllTZ1.csv', function(data) {
            // Split the lines
            var lines = data.split('\n');
            //variable declaration
             var series = {
                    data: [],
                    type: 'spline',
                     color: '#336633'   
                };
                var series1 = {
                    yAxis: 1,
                    data: [],
                     color: '#FF3399'                           
                };    
                var series2 = {
                    yAxis: 2,
                    data: [],
                     color: '#9900FF'   
                };
                var series3 = {
                    yAxis: 3,
                    data: [],
                     color: '#660066'   
                };  
                var series4 = {
                    yAxis: 4,
                    data: [],
                     color: '#CC99CC'   
                };

            $.each(lines, function(lineNo, line) {
                var items = line.split(',');

                // header line contains categories
                if (lineNo == 0) {
                     series1.name = items[1];
                     series.name = items[2];
                     series2.name = items[3];
                      series3.name = items[4];
                       series4.name = items[5];
                }

                // the rest of the lines contain data with their name in the first position
                else {
                                $.each(items, function (itemNo, item) {
                                if (itemNo == 0) {   
                                    options.xAxis.categories.push(item);
                                } else if (itemNo == 1) {
                                //console.log(parseFloat(item));
                                    series1.data.push(parseFloat(item));
                                } else if(itemNo == 2){
                                    series.data.push(parseFloat(item));
                                } else if(itemNo == 3){
                                    series2.data.push(parseFloat(item));
                                }
                                else if(itemNo == 4){
                                //alert(item);
                                    series3.data.push(item);
                                }
                                else if(itemNo == 5){                               
                                    series4.data.push(item);
                                }
                            });

                }

            });

               options.series.push(series1);
               options.series.push(series2);
                options.series.push(series3);
                 options.series.push(series4);
                 options.series.push(series);
            var chart = new Highcharts.Chart(options);

在截至目前的工具提示中，它表示“未定义”。

Answer 1

它不起作用，因为您只将值推送到数据数组中，但不定义参数名称。您应该将点作为对象推送，您可以在其中定义参数的名称和y值。

Highchart工具 - 显示CSV数据

1 个答案: