[英]Highcharts series.data not working for me
我正在嘗試使用csv中的數據制作圖表。 我包含了csv解析器代碼,但是您不必閱讀它; 我從console.log確認它可以正常工作。 arr [1]看起來像這樣:
[[1,2],
[3,4],
[5,7]]
我將arr [1]傳遞給series.data(靠近底部); 但是,我得到一個空白圖表。 我正在嘗試獲得一個簡單的(x,y)折線圖。 我究竟做錯了什么? 先謝謝您的幫助!
編輯:我從上面將2D數組粘貼到series.data中,並制作了一個圖形...我認為我的解析器代碼在我的Highcharts代碼之后運行。 為什么這樣/我該如何解決。
<!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>
看起來像在確定時沒有收到arr
這是工作示例https://jsfiddle.net/nageen/oxrL8fd2/
我將其設為靜態,因為您的CSV文件未提供任何數據。 您必須檢查為什么不從CSV文件獲取數據。 我只想顯示一切都好,除了arr[1]
因為arr從CSV獲取數據,如果CSV不提供數據,則arr
將為空並且不顯示圖形。
正確答案(感謝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.