5_2_2 グラフの描画関連

グラフの描画には、Plotlyライブラリを使用しています。Plotlyには、適切な形式でプロットしたい横軸と縦軸のデータを配列で渡すだけです。

// Plotlyを使ってグラフを描く
const plot = async(beer) => {
  const trace = {
    x: beer[0],
    y: beer[1],
    mode: 'markers',
    type: 'scatter',
    name:'ビール'
  };
  const data = [trace];
  const layout = {
    xaxis: {
      range: [20, 40],
      title: '最高気温'
  },
    yaxis: {
      range: [200, 500],
      title: '売上数'
  },
    title: '最高気温とビール売上数'
  };
   Plotly.newPlot('chart1', data, layout, { displayModeBar: false });
   train(beer);
}

// グラフ上に線を描く
const addLine = (xData, yData) => {
  const trace = {
    x: xData,
    y: yData,
    mode: 'lines',
    type: 'scatter',
    name: ' y = ax + b',
    marker: { size: 8 }
  };
  Plotly.addTraces('chart1', [trace]);
}

// グラフ上に点を描く
const addPoint = (xData, yData) => {
  const trace = {
    x: xData,
    y: yData,
    mode: 'markers',
    type: 'scatter',
    name: '30度の予測',
    marker: { size: 12 }
  };
  Plotly.addTraces('chart1', [trace]);
}

addLine()とaddPoint()は後で使用する関数です。plot()関数では、グラフが描けたら最後にtrain(beer)を呼び出しています。