将数据写入 AJAX 回调

writing data data into AJAX callback

提问人:yen 提问时间:6/30/2021 更新时间:6/30/2021 访问量:26

问:

我是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);```
jquery json ajax highcharts 回调

评论

0赞 ppotaczek 6/30/2021
嗨,@yen,确切的问题是什么?在这里: jsfiddle.net/BlackLabel/8xdtjruv 您可以找到带有动态数据的简单示例。
0赞 yen 7/2/2021
问题是我正在尝试将数据转换为json格式,可以通过ajax回调访问,但我无法将其转换为json格式[<% for(var i=0; i < expected_data.length; i++) { %> [<%= expected_data[i] %>], <% } %>].sort()
0赞 ppotaczek 7/2/2021
它不是有效的 JS 代码。和的来源是什么?expected_dataactual_data

答: 暂无答案