提问人:yen 提问时间:6/30/2021 更新时间:6/30/2021 访问量:26
将数据写入 AJAX 回调
writing data data into AJAX callback
问:
我是highchart和nodejs的新手。我有这个脚本,它为我的图表生成了数据,但它是静态的。我想让它成为动态图表,每分钟都有数据。为此,我需要将我的数据流转换为json格式,以便可以通过ajax传递。我做不到。整个代码是
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>
<link rel="stylesheet" type="text/css" href="/public/oi chart.css">
</head>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
<script type="text/javascript">
Highcharts.stockChart('container', {
chart: {
height: (1 / 2 * 100) + '%' // 1:2 ratio
},
rangeSelector: {
enabled: true,
selected: customRange,
buttons: [{
type: 'day',
count: 1,
text: '1D'
}, {
type: 'week',
count: 1,
text: '1W'
}, {
type: 'week',
count: 2,
text: '2W'
}, {
type: 'month',
count: 1,
text: '1M'
}, {
type: 'all',
text: 'All'
}]
},
time: {
timezoneOffset: timezone
},
title: {
text: chartTitle,
},
subtitle: {
text: subTitle,
},
yAxis: {
offset: 60,
title: {
text: 'Open Interest'
},
resize: {
enabled: true
}
},
xAxis: {
type: 'datetime'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
marker: {
enabled: false
},
label: {
connectorAllowed: false
},
}
},
series: [{
name: 'Expected',
data: [<% for(var i=0; i < expected_data.length; i++) { %> [<%= expected_data[i] %>], <% } %>].sort()
}, {
name: 'Actual',
data: [<% for(var i=0; i < actual_data.length; i++) { %> [<%= actual_data[i] %>], <% } %>].sort()
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
</script>
</html>```
only this part I want to write it into the AJAZ Callback somewhat like this<http://jsfiddle.net/jugal/j4ZYB/> so that it can be accessed via url by using fetch() function
```series: [{
name: 'Expected',
data: [<% for(var i=0; i < expected_data.length; i++) { %> [<%= expected_data[i] %>], <% } %>].sort()
}, {
name: 'Actual',
data: [<% for(var i=0; i < actual_data.length; i++) { %> [<%= actual_data[i] %>], <% } %>].sort()```
and after the url is generated i want to pass it to this to create live chart
```let chart = Highcharts.chart('container', {
series: []
});
//the chart is update every each 3 seconds
setInterval(function() {
fetch("data url generated by ajaz will come here")
.then(response => response.json())
.then(jsonData => {
// define series variable
const series = [{
data: jsonData.data1
}, {
data: jsonData.data2
}];
//update chart series config
chart.update({
series: series
}, true, true, true)
});
}, 3000);```
答: 暂无答案
评论
[<% for(var i=0; i < expected_data.length; i++) { %> [<%= expected_data[i] %>], <% } %>].sort()
expected_data
actual_data