无法使用高图在辅助Y轴上绘制样条线(从CSV文件获取数据)

时间:2014-01-14 23:11:37

标签: javascript html5 csv highcharts

我是Highcharts的新手并尝试通过阅读CSV文件来绘制图表。当我提取并尝试显示时,我看到Y轴的值是一行(垂直)而不是水平线上的点。 请告诉我如何将其转换为辅助X轴。

我的整个代码:

data.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
         <title>Performance Dashboard</title>


        <!-- 1. Add these JavaScript inclusions in the head of your page -->
        <script type="text/javascript" src="C:\Project\datafromCSV\js\jquery.min.js"></script>
        <script type="text/javascript" src="C:\Project\datafromCSV\scripts\highcharts.js"></script>
        <!--<link rel="stylesheet" type="text/css" href="C:\strawberry\files\styles\dbdash.css" />
         <link rel="stylesheet" type="text/css" href="C:\Project\strawberry files\css\jmenu.css" />
        -->

        <!-- 2. Add the JavaScript to initialize the chart on document ready -->
        <script type="text/javascript">


function load()
{

$(document).ready(function() {

            var options = {
                chart: {
                    renderTo: 'container',
                    type: 'column'
                },
                title: {
                    text: '5 min interval'
                },
                xAxis: {
                    categories: []
                },
                yAxis:[{ 

                    startOnTick: false,
                    title: {
                      text: 'No of Transactions'                     
                      }                 
                  },
                    {                                       
                    opposite: true,
                    title: {
                    text: 'Response Time'
                    }
                }                 
                  ],
                series: []
            };

            $.get('timeData.csv', function(data) {
                // Split the lines
                var lines = data.split('\n');
                $.each(lines, function(lineNo, line) {
                    var items = line.split(',');

                    // header line contains categories
                    if (lineNo == 0) {
                        $.each(items, function(itemNo, item) {
                            if (itemNo > 0) options.xAxis.categories.push(item);
                        });
                    }

                    // the rest of the lines contain data with their name in the first position
                    else {
                        var series = {                          

                            data: []
                        };
                        var series1 = {                         
                            yAxis:1,
                            data: []
                        };
                        $.each(items, function(itemNo, item) {
                            if (itemNo == 0) {
                                series.name = item;             

                            } 
                            else if (itemNo == 2) {
                            series1.name='Response time';
                            series1.type = 'spline';                            
                            series1.data.push(parseFloat(item));

                            } 

                            else {          

                                series.data.push(parseFloat(item));

                            }
                        });

                        options.series.push(series);
                        options.series.push(series1);

                    }

                });

                var chart = new Highcharts.Chart(options);
            });


        });
}
    function funCPU()
    {
    alert("hi");

    }


        </script>

    </head>
    <body id="dbdashBody" onload="load()">
    <table class="container" border="0" align="center" cellpadding=0 cellspacing=0>
        <tr>
        <td valign="top">
            <div class="header">
            <div class="headerLeft">
            </div>
            <div class="headerCenter"><img src="C:\strawberry\files\images\logo.jpg"/> &nbsp;&nbsp;&nbsp;&nbsp; 
            <font color="#3366FF"><i><b>TIERS PERFORMANCE DASHBOARD</b></i></font>
            <div class="loaderGif">&nbsp;</div>        
            </div>
            <div class="headerRight">                   
            </div>                  
            </div>    
             <div class="menuBar">  
            <ul id="jMenu">                           
               <li><a href="#" ><b>Home Page</b></a></li>                      
               <li><a href="#" onclick="funCPU()"><b>CPU Utilization</b></a></li>   
            </ul>               
        </td>
        </tr>

    </table>

        <!-- 3. Add the container -->
        <div id="container" style="width:1200px; height:400px; vertical-align: top;  display: inline-block; padding: 10px;"></div>



    </body>
</html>

和timeData.csv

Time,users,AverageSec,Volume
8:00,2325,0.627,28821
7:55,1529,0.609,19124
7:50,1095,0.544,15825
7:45,865,0.584,12852
7:40,709,0.573,10263
7:35,554,0.605,8149
7:30,427,0.641,5821

请帮助,非常感谢!!!

提前多多感谢。

1 个答案:

答案 0 :(得分:0)

这是你想要的吗?小提琴:http://jsfiddle.net/Yrygy/84/

我创建了三个轴,每个轴用于数据中的一列,其中第一列是category - time。首先创建系列,否则你将为每一行创建系列(你已经这样做了)。创建系列之后,将项目从一行推送到特定系列,并在创建图表之前完成步骤 - 将系列推送到选项。

var data = 'Time,users,AverageSec,Volume\n8:00,2325,0.627,28821\n7:55,1529,0.609,19124\n7:50,1095,0.544,15825';
// Split the lines
var lines = data.split('\n');
var series = {
    data: []
};
var series1 = {
    yAxis: 1,
    data: [],
    type: 'spline'
};    
var series2 = {
    yAxis: 2,
    data: []
};
$.each(lines, function (lineNo, line) {
    var items = line.split(',');

    // header line contains names
    if (lineNo == 0) {
        series1.name = items[1];
        series.name = items[2];
        series2.name = items[3];
        /*$.each(items, function (itemNo, item) {
            if (itemNo > 0)
                series.name = item;
        });*/
    }

    // the rest of the lines contain data with their name in the first position
    else {
        $.each(items, function (itemNo, item) {
            // first item on line - category/time
            if (itemNo == 0) {   
                options.xAxis.categories.push(item);
            } else if (itemNo == 1) {
                series1.data.push(parseFloat(item));
            } else if(itemNo == 2){
                series.data.push(parseFloat(item));
            } else if(itemNo == 3){
                series2.data.push(parseFloat(item));
            }
        });


    }
});


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