Highcharts series.data对我不起作用
[英]Highcharts series.data not working for me
问题描述
I'm trying to use data from a csv to make a chart. 
我正在尝试使用csv中的数据制作图表。 I included the csv parser code, but you don't have to read it; 我包含了csv解析器代码，但是您不必阅读它； I confirmed it's working correctly from console.log. 我从console.log确认它可以正常工作。 arr[1] looks something like this: arr [1]看起来像这样：
[[1,2],
[3,4],
[5,7]]
I pass arr[1] to series.data (close to the bottom); 我将arr [1]传递给series.data（靠近底部）； however, I get a blank graph. 但是，我得到一个空白图表。 I'm trying to get a simple (x,y) line graph. 我正在尝试获得一个简单的（x，y）折线图。 What am I doing wrong? 我究竟做错了什么？ Thanks in advance for the help! 先谢谢您的帮助！
EDIT: I pasted that 2D array from above into series.data and it made a graph...I think my parser code is running after my Highcharts code. 编辑：我从上面将2D数组粘贴到series.data中，并制作了一个图形...我认为我的解析器代码在我的Highcharts代码之后运行。 Why is that/how do I fix that. 为什么这样/我该如何解决。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stock Data - Highcharts</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on DOM loaded -->
<script>
//CSV parser
var arr = new Array();
function successFunction(data) {
var allRows = data.split(/\r?\n|\r/);
for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
var this_row = allRows[singleRow].split(',')
if (singleRow === 0) {
//start at the first yaxis column
for (var i = 1; i < this_row.length; i++) {
arr[i] = new Array();
}
}
else {
for (var i = 1; i < this_row.length; i++) {
var a = Number(this_row[0]);
var b = Number(this_row[i]);
var temp_arr = [a, b];
arr[i].push(temp_arr);
}
}
}
console.log(arr[1])
}
var csv_name = "just-prices-sample.csv"
$.ajax({
url: csv_name,
dataType: 'text',
}).done(successFunction);
//end of CSV parser
document.addEventListener('DOMContentLoaded', function () {
Highcharts.chart('container', {
chart: {
type: 'line'
},
rangeSelector: {
selected: 1
},
title: {
text: 'Stock Price'
},
yAxis: {
title: {
text: 'Price (Dollars)'
}
},
series : [{
data: arr[1],
type: 'line'
}]
});
});
</script>
</head>
<body>
<!-- 3. Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
2 个解决方案
解决方案1
0 2018-05-23 08:40:19
Look like you don't get arr as you defind 看起来像在确定时没有收到arr
here is working example https://jsfiddle.net/nageen/oxrL8fd2/ 这是工作示例https://jsfiddle.net/nageen/oxrL8fd2/
i have make it static because your CSV file not giving any data. 我将其设为静态，因为您的CSV文件未提供任何数据。 you have to check why you not getting data from CSV file. 您必须检查为什么不从CSV文件获取数据。 i just want to show everything is good except you arr[1] because arr is getting data from CSV and if CSV don't give data then arr will empty and it not showing graph. 我只想显示一切都好，除了arr[1]因为arr从CSV获取数据，如果CSV不提供数据，则arr将为空并且不显示图形。
解决方案2
0 2018-05-23 09:11:14
Correct answer (thanks to askerovlab): 正确答案（感谢askerovlab）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stock Data - Highcharts</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on DOM loaded -->
<script>
//CSV parser
var arr = new Array();
function successFunction(data) {
var allRows = data.split(/\r?\n|\r/);
for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
var this_row = allRows[singleRow].split(',')
if (singleRow === 0) {
//start at the first yaxis column
for (var i = 1; i < this_row.length; i++) {
arr[i] = new Array();
}
}
else {
for (var i = 1; i < this_row.length; i++) {
var a = Number(this_row[0]);
var b = Number(this_row[i]);
var temp_arr = [a, b];
arr[i].push(temp_arr);
}
}
}
console.log(arr[1]);
}
//end of CSV parser
function chartsFunction() {
Highcharts.chart('container', {
chart: {
type: 'line'
},
rangeSelector: {
selected: 1
},
title: {
text: 'Stock Price'
},
yAxis: {
max: 25,
title: {
text: 'Price (Dollars)'
}
},
series : [{
data: arr[1],
type: 'line'
}]
});
}
document.addEventListener('DOMContentLoaded', function () {
var csv_name = "just-prices-sample.csv"
$.ajax({
url: csv_name,
dataType: 'text',
}).done((data) => { successFunction(data); chartsFunction(); })
});
</script>
</head>
<body>
<!-- 3. Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.