如何在 AJAX 回调中转换我的图表数据创建

Posted 2023-05-08

【中文标题】如何在 AJAX 回调中转换我的图表数据创建

【英文标题】：how can I convert my chart data creation in AJAX callback

【发布时间】：2021-09-11 17:54:42

【问题描述】：

这是我创建 highchart 图表的代码。我想转换在 AJAX 回调中制作图表的数据，因为我想让我的图表成为每分钟更新的实时图表。唯一的方法是通过阿贾克斯回调。我怎样才能做到这一点。非常相似的东西就像这样http://jsfiddle.net/jugal/j4ZYB/

    <script src="https://code.highcharts.com/stock/highstock.js"></script>
    <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>```

【问题讨论】：

这能回答你的问题吗？ ***.com/questions/13157693/…

是的，它是相似的，但是 url 中的内容......它是处理数据的位置......我对吗？

【参考方案1】：

您可以尝试这种方法来实现所需的输出。我认为代码中的一切都解释得很好。这里的图表不是动态的，因为数据是静态的JSON在线存储链接。

//create the initial chart
let chart = Highcharts.chart('container', 
  series: []
);

//the chart is update every each 3 seconds
setInterval(function() 
  fetch("https://api.npoint.io/cc798213da33bfead2d6")
    .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);

演示：https://jsfiddle.net/BlackLabel/bs5Ltdo0/

API：https://api.highcharts.com/class-reference/Highcharts.Chart#update

【讨论】：

您能告诉我获取 URl 中的内容吗？根据我的理解，它是处理数据的 URL，对吧？

你能告诉我如何将我的数据转换为数组数组中的 url

URL 指向一个返回 json 的页面，Sebastian 使用的链接显示了 highcharts 遵循的格式。如何生成这些数据取决于您。

您好，我仍然无法以 json 格式传递数据，您能否举一个类似于我的情况的示例以便更好地理解

@ness 你的数据是如何生成的？