highcharts 实时图表

bkhjykvo  于 11个月前  发布在  Highcharts
关注(0)|答案(1)|浏览(98)

有一个显示烛台图的代码。使用PHP从mysql获取数据。我想让图表真实的更新,也许一秒一次。我在highcharts上发现了一个真实的更新数据的例子。怎么办呢?我的代码:(document).ready(function(){

var data = '<?php echo $text;?>';
        data = JSON.parse(data);

  // split the data set into ohlc and volume
  var ohlc = [],
    volume = [],
    dataLength = data.length,
    i = 0;

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

  Highcharts.stockChart('container', {
    chart: {
      events: {
        load: function () {
          addPopupEvents(this);
          
        }
      }
    },title: {
            text: '<?php echo strtoupper($title);?>'
    },
    
    yAxis: [{
      labels: {
        align: 'left'
      },
      height: '80%',
      resize: {
        enabled: true
      }
    }, {
      labels: {
        align: 'left'
      },
      top: '80%',
      height: '20%',
      offset: 0
    }],
    <?php if($_COOKIE['fut'] == 299){ ?>
         tooltip: {
            enabled: true
        },
    <?php } ?>

    navigationBindings: {
      events: {
        selectButton: function (event) {
          var newClassName = event.button.className + ' highcharts-active',
            topButton = event.button.parentNode.parentNode;

          if (topButton.classList.contains('right')) {
            newClassName += ' right';
          }

          // If this is a button with sub buttons,
          // change main icon to the current one:
          if (!topButton.classList.contains('highcharts-menu-wrapper')) {
            topButton.className = newClassName;
          }

          // Store info about active button:
          this.chart.activeButton = event.button;
        },
        deselectButton: function (event) {
          event.button.parentNode.parentNode.classList.remove('highcharts-active');

          // Remove info about active button:
          this.chart.activeButton = null;
        },
        showPopup: function (event) {

          if (!this.indicatorsPopupContainer) {
            this.indicatorsPopupContainer = document
              .getElementsByClassName('highcharts-popup-indicators')[0];
          }

          if (!this.annotationsPopupContainer) {
            this.annotationsPopupContainer = document
              .getElementsByClassName('highcharts-popup-annotations')[0];
          }

          if (event.formType === 'indicators') {
            this.indicatorsPopupContainer.style.display = 'block';
          } else if (event.formType === 'annotation-toolbar') {
            // If user is still adding an annotation, don't show popup:
            if (!this.chart.activeButton) {
              this.chart.currentAnnotation = event.annotation;
              this.annotationsPopupContainer.style.display = 'block';
            }
          }

        },
        closePopup: function () {
          this.indicatorsPopupContainer.style.display = 'none';
          this.annotationsPopupContainer.style.display = 'none';
        }
      }
    },
    stockTools: {
      gui: {
        enabled: false
      }
    },
    series: [{
      type: 'candlestick',
      id: 'aapl',
      name: '<?php echo $names[0].'/'.$names[1];?>',
      data: ohlc,
      color: '#f23645', // цвет положительных свечей
      upColor: '#089981',
      // lineColor: 'gray'
    }, {
            type: 'bb',
            linkedTo: 'aapl',
            params:{
                period:200,
              standardDeviation: 2,
            }
        }, {
            type: 'bb',
            linkedTo: 'aapl',
            params:{
                period:200,
              standardDeviation: 3,
            }
        }, {
            type: 'bb',
            linkedTo: 'aapl',
            params:{
                period:200,
              standardDeviation: 4,
            }
        }],
    responsive: {
      rules: [{
        condition: {
          maxWidth: 800
        },
        chartOptions: {
          rangeSelector: {
            inputEnabled: false
          }
        }
      }]
    }
  });
});

字符串
带有自动更新的计划https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/dynamic-update

sbtkgmzw

sbtkgmzw1#

您可以尝试使用动态CSV:https://www.highcharts.com/demo/highcharts/live-data
您可以在PHP端创建一个端点,该端点将为CSV格式的每个查询提供新数据。

相关问题