Javascript 无法使用highchart在次Y轴上绘制样条曲线（从CSV文件获取数据）
我不熟悉Highcharts，并且试图通过读取CSV文件来绘制图表。当我提取并尝试显示时，我看到Y轴的值是垂直线上的点，而不是水平线上的点。 请告诉我如何将其转换为辅助X轴 我的全部代码： data.htmlJavascript 无法使用highchart在次Y轴上绘制样条曲线（从CSV文件获取数据）,javascript,html,csv,highcharts,Javascript,Html,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" xm
<!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>
非常感谢。这是你想要的吗？小提琴： 我已经创建了三个轴，每个轴代表数据中的一列，其中第一列是分类时间。首先创建系列，否则将为已经执行此操作的每一行创建系列。创建系列后，将项目从一行推送到指定系列，在最后一步中，在创建图表之前，将系列推送到选项
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);
你好，Pawel，这正是我要找的东西，非常感谢你帮了我。我真的很感谢你的帮助。
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);