簡體   English   中英

無法使用highchart在輔助Y軸上繪制樣條線(從CSV文件獲取數據)

[英]Unable to draw Spline on secondary Y Axis (getting data from CSV file) using highchart

我是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

請需要幫助,不勝感激!!!

非常感謝。

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

我創建了三個軸,每個軸用於數據中的一列,其中第一列是類別-時間。 首先創建系列,否則您將為每行創建系列(您已經在執行此操作)。 創建系列后,將項目從一條線推到特定系列,並在最后一步中,在創建圖表之前-將系列推到選項。

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);

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM