[英]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"/>
<font color="#3366FF"><i><b>TIERS PERFORMANCE DASHBOARD</b></i></font>
<div class="loaderGif"> </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.