하이 차트의 스트리밍 멀티 라인에서 특정 값에 대한 마커 추가

Question

여기 샘플 jsfiddle을 기반으로 실시간 스트리밍 데이터로 Highcharts 시계열 차트에서 작업하고 있습니다. fiddle에는 input1, input2, input3, & 입력 4라는 네 줄이 표시되며 실제 임의의 데이터로 업데이트되지만 실제 프로젝트에서는 입력 값이 MQTT를 통해 업데이트됩니다. 여기에 series [i] .addPoint() 메서드로 차트에 포인트를 추가하고 있습니다. 값이 특정 한도를 초과하는 경우 일부 마커 또는 기호를 줄과 함께 추가하려고합니다.

$(function() { 
    $(document).ready(function() { 
    Highcharts.setOptions({ 
     global: { 
     useUTC: false 
     } 
    }); 

    $('#container').highcharts({ 
     chart: { 
     type: 'spline', 
     animation: Highcharts.svg, // don't animate in old IE 
     marginRight: 10, 
     events: { 
      load: function() { 

      // set up the updating of the chart each second 
      var series = this.series; 
      var length = series.length; 
      setInterval(function() { 

       var x = (new Date()).getTime(), // current time 
       a0 = Math.random(); 
       a1 = Math.random(); 
       a2 = Math.random(); 
       series[0].addPoint([x, Math.random()], true, true); 
       for (var i = 1; i < length; i++) { 
       series[i].addPoint([x, Math.random()], false, true); 
       } 
      }, 1000); 
      } 
     } 
     }, 
     title: { 
     text: 'Live random data' 
     }, 
     legend: { 
     enabled: true 
    }, 
     xAxis: { 
     type: 'datetime', 
     tickPixelInterval: 150 
     }, 
     yAxis: { 
     title: { 
      text: 'Value' 
     }, 
     plotLines: [{ 
      value: 0, 
      width: 1, 
      color: '#808080' 
     }] 
     }, 
     tooltip: { 
     formatter: function() { 
      return '<b>' + this.series.name + '</b><br/>' + 
      Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + 
      Highcharts.numberFormat(this.y, 2); 
     } 
     }, 
     exporting: { 
     enabled: false 
     }, 
     series: [{ 
     name: 'input1', 
     data: (function() { 
      // generate an array of random data 
      var data = [], 
      time = (new Date()).getTime(), 
      i; 

      for (i = -19; i <= 0; i += 1) { 
      data.push({ 
       x: time + i * 1000, 
       y: Math.random() 
      }); 
      } 
      return data; 
     }()) 
     }, { 
     name: 'input2', 
     data: (function() { 
      // generate an array of random data 
      var data = [], 
      time = (new Date()).getTime(), 
      i; 

      for (i = -19; i <= 0; i += 1) { 
      data.push({ 
       x: time + i * 1000, 
       y: Math.random() 
      }); 
      } 
      return data; 
     }()) 
     }, { 
     name: 'input3', 
     data: (function() { 
      // generate an array of random data 
      var data = [], 
      time = (new Date()).getTime(), 
      i; 

      for (i = -19; i <= 0; i += 1) { 
      data.push({ 
       x: time + i * 1000, 
       y: Math.random() 
      }); 
      } 
      return data; 
     }()) 
     }, { 
     name: 'input4', 
     data: (function() { 
      // generate an array of random data 
      var data = [], 
      time = (new Date()).getTime(), 
      i; 

      for (i = -19; i <= 0; i += 1) { 
      data.push({ 
       x: time + i * 1000, 
       y: Math.random() 
      }); 
      } 
      return data; 
     }()) 
     }] 
    }); 
     }); 
    }); 

Answer 1

setState() 메소드를 사용하고 툴팁을 사용하십시오. 그런 다음 툴팁에 대한 API로 포커스가있는 점을 둘러싸는 원이나 툴팁을 스타일링하고 조건문이있는 차트의 값에 따라 스타일 또는 툴팁 기호/html을 변경합니다. 답변보기 : Highcharts - manually trigger hover event on a point