javascript - Highchart - 我必须刷新页面才能看到新数据

Question

下面是图表代码，我的问题是需要使用JSON来抓取更新的数据。我不想重新渲染整个图表，而是只渲染蜡烛(添加新的)。

我想必须有一个循环，通过循环 JSON 并创建图表更新来每秒查看新数据？

希望任何人都能回答我应该如何用代码解决这个问题!

https://codeshare.io/alxOMZ

$.getJSON('/api/v1/public/getcharts?market=BTC-'+coinsymbol, function (data) {

    // split the data set into trading and volume
    var trading = [],
        volume = [],
        dataLength = data.length,
        // set the allowed units for data grouping
        groupingUnits = [[
            'hour',                         // unit name
            [1]                             // allowed multiples
        ], [
            'day',
            [1, 7]
        ]],

        i = 0;


    for (i; i < dataLength; i += 1) {
        trading.push([
            data[i][0], // the date
            data[i][1], // open
            data[i][2], // high
            data[i][3], // low
            data[i][4] // close
        ]);

        volume.push([
            data[i][0], // the date
            data[i][5] // the volume
        ]);
    }


    // create the chart


    Highcharts.stockChart('container', {
        title: {
            text: null
        },
        scrollbar: {
              enabled: false
          },


        credits: {
          enabled: false
      },

         chart: {

            renderTo: 'container',
    backgroundColor: 'none',




   },


         rangeSelector: {
      selected: 2,
             buttons: [{
                 type: 'hour',
                 count: 1,
                 text: '1h'
             }, {
                 type: 'day',
                 count: 1,
                 text: '1D'
             }, {
                 type: 'day',
                 count: 7,
                 text: '7D'
             }, {
                 type: 'month',
                 count: 1,
                 text: '1M'
             }, {
                 type: 'all',
                 count: 1,
                 text: 'All'
             }],
             selected: 5,
             inputEnabled: false
         },
     legend: {
                     enabled: false
         },

     exporting: {
                     enabled: false
         },
     plotOptions: {

      candlestick: {    
        lineColor: '#E75162',           
           upLineColor: '#5BB789',
           upColor: '#5BB789',
           color: '#E75162'
           }
       },
        yAxis: [{
            crosshair: {
            snap: false
        },

            height: '100%',

            resize: {
                enabled: false
            }
        }, {

            top: '100%',
            height: '10%',
            offset: 0
        }],

        tooltip: { enabled: false },

        series: [

            {
            type: 'candlestick',
            name: coinsymbol,
            data: trading,
            dataGrouping: {
                units: groupingUnits
            }
        }, {
            type: 'column',
            name: coinsymbol+' Volume',
            data: volume,
            yAxis: 1,
            dataGrouping: {
                units: groupingUnits
            }
        }]
    });
});

---

-----代码-----

$.getJSON('/api/v1/public/getcharts?market=BTC-'+coinsymbol, 函数(数据){

// split the data set into trading and volume
var trading = [],
    volume = [],
    dataLength = data.length,
    // set the allowed units for data grouping
    groupingUnits = [[
        'hour',                         // unit name
        [1]                             // allowed multiples
    ], [
        'day',
        [1, 7]
    ]],

    i = 0;


for (i; i < dataLength; i += 1) {
    trading.push([
        data[i][0], // the date
        data[i][1], // open
        data[i][2], // high
        data[i][3], // low
        data[i][4] // close
    ]);

    volume.push([
        data[i][0], // the date
        data[i][5] // the volume
    ]);
}


// create the chart


Highcharts.stockChart('container', {
    title: {
        text: null
    },
    scrollbar: {
          enabled: false
      },


    credits: {
      enabled: false
  },

     chart: {

        renderTo: 'container',
backgroundColor: 'none',

},

     rangeSelector: {
  selected: 2,
         buttons: [{
             type: 'hour',
             count: 1,
             text: '1h'
         }, {
             type: 'day',
             count: 1,
             text: '1D'
         }, {
             type: 'day',
             count: 7,
             text: '7D'
         }, {
             type: 'month',
             count: 1,
             text: '1M'
         }, {
             type: 'all',
             count: 1,
             text: 'All'
         }],
         selected: 5,
         inputEnabled: false
     },
 legend: {
                 enabled: false
     },

 exporting: {
                 enabled: false
     },
 plotOptions: {

  candlestick: {    
    lineColor: '#E75162',           
       upLineColor: '#5BB789',
       upColor: '#5BB789',
       color: '#E75162'
       }
   },
    yAxis: [{
        crosshair: {
        snap: false
    },

        height: '100%',

        resize: {
            enabled: false
        }
    }, {

        top: '100%',
        height: '10%',
        offset: 0
    }],

    tooltip: { enabled: false },

    series: [

        {
        type: 'candlestick',
        name: coinsymbol,
        data: trading,
        dataGrouping: {
            units: groupingUnits
        }
    }, {
        type: 'column',
        name: coinsymbol+' Volume',
        data: volume,
        yAxis: 1,
        dataGrouping: {
            units: groupingUnits
        }
    }]
});

});

Answer 1

查看 highcharts api quickly on google ，您可能需要一个事件属性，然后是加载属性，以及您的逻辑，其中可能包括类似

chart: {
    events: {
        load: function () {

            // here's how you would access your series
            var series = this.series[0];
            setInterval(function () {
                //modify your series here.
            }, 1000);
        }
    }
}