создание графика SP C (Статистический контроль процесса) в реальном времени с использованием plotly Js - PullRequest
Новая
       2

создание графика SP C (Статистический контроль процесса) в реальном времени с использованием plotly Js

0 голосов
/ 27 мая 2020

Я новичок в использовании Js, и я нашел образец кода для создания диаграммы SP C из https://plotly.com/javascript/spc-control-charts/. 

var Data = {
  type: 'scatter',
  x: [1,2,3,4,5,6,7,8,9],
  y: [4,2,-1,4,-5,-7,0,3,8],
  mode: 'lines+markers',
  name: 'Data',
  showlegend: true,
  hoverinfo: 'all',
  line: {
    color: 'blue',
    width: 2
  },
  marker: {
    color: 'blue',
    size: 8,
    symbol: 'circle'
  }
}

var Viol = {
  type: 'scatter',
  x: [6,9],
  y: [-7,8],
  mode: 'markers',
  name: 'Violation',
  showlegend: true,
  marker: {
    color: 'rgb(255,65,54)',
    line: {width: 3},
    opacity: 0.5,
    size: 12,
    symbol: 'circle-open'
  }
}

var CL = {
  type: 'scatter',
  x: [0.5, 10, null, 0.5, 10],
  y: [-5, -5, null, 5, 5],
  mode: 'lines',
  name: 'LCL/UCL',
  showlegend: true,
  line: {
    color: 'red',
    width: 2,
    dash: 'dash'
  }
}

var Centre = {
  type: 'scatter',
  x: [0.5, 10],
  y: [0, 0],
  mode: 'lines',
  name: 'Centre',
  showlegend: true,
  line: {
    color: 'grey',
    width: 2
  }
}

var data = [Data,Viol,CL,Centre]

var layout = {
  title: 'Basic SPC Chart',
  xaxis: {
    zeroline: false
  },
  yaxis: {
    range: [-10,10],
    zeroline: false
  }
}

Plotly.newPlot('myDiv', data,layout);

Но оба приведенных примера stati c, и мне нужно сделать график в реальном времени. Через некоторое время я обнаружил, что мы можем использовать Plotly.extendTraces. Ниже приведен пример кода, который я получил о extendTraces. Но мне не удалось объединить эти два кода. Кто-нибудь может помочь мне. 

function rand() { 
  return Math.random();
}

var cnt = 0;

var interval = setInterval(function() {
  Plotly.extendTraces('myDiv', {
    y: [[rand()]]
  }, [0])

  if(cnt === 100) clearInterval(interval);
}, 10000);
...