Highchart - 我必須刷新頁面才能看到新數據

Question

下面是圖表代碼，我的問題是需要使用 JSON 來獲取更新的數據。 我不希望重新渲染整個圖表，而只想重新渲染蠟燭（添加新的）。

我想必須有一個循環通過循環 JSON 並創建一個 chart.update 來查看新數據中的每一秒？

希望任何人都能回答我應該如何用代碼解決這個問題！

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, 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
        }
    }]
});

});

Answer 1

在 google 上快速查看 highcharts api ，您可能需要一個事件屬性，然后是 load 屬性，以及您的邏輯，其中可能包括類似的內容

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

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