개요

사진

샘플 코드

const sg = [1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 4, 4, 7, 8, 14, 17, 20, 20, 20, 23, 25, 25, 25, 26, 26, 26, 28, 29, 33, 41, 53, 59, 66, 74, 84, 94, 109, 135, 147, 160, 171, 189, 214, 233, 242, 256, 274, 293, 329, 361, 417, 461, 494, 522, 581, 634, 690, 724, 787, 818, 835, 880, 921, 961, 1015, 1054, 1101, 1140, 1211, 1307, 1401, 1524, 1725, 1894, 1988, 2230, 2497, 2775, 3129, 3495, 3855, 4097, 4457, 4971, 5544, 6176, 6895, 7394, 7688, 8170, 8718, 9291, 9846, 10430, 10804, 11150, 11541, 11993, 12429, 12863, 13231, 13441, 13613, 13894, 14117, 14305, 14571, 14876, 15077, 15253, 15374, ];
var myChart;
var ctx = document.getElementById("canvas").getContext("2d");
const yy =  [1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 3, 1, 6, 3, 3, 0, 0, 3, 2, 0, 0, 1, 0, 0, 2, 1, 4, 8, 12, 6, 7, 8, 10, 10, 15, 26, 12, 13, 11, 18, 25, 19, 9, 14, 18, 19, 36, 32, 56, 44, 33, 28, 59, 53, 56, 34, 63, 31, 17, 45, 41, 40, 54, 39, 47, 39, 71, 96, 94, 123, 201, 169, 94, 242, 267, 278, 354, 366, 360, 242, 360, 514, 573, 632, 719, 499, 294, 482, 548, 573, 555, 584, 374, 346, 391, 452, 436, 434, 368, 210, 172, 281, 223, 188, 266, 305, 201, 176, 121]
var pre = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,2,3,4,5,7,9,11,14,18,22,27,33,40,48,57,67,79,92,107,123,141,160,180,202,225,248,273,298,323,347,372,395,417,437,455,471,484,495,502,506,506,503,497,488,476,461,444,424,403,380,356,331,306,281,257,233,209,187,166,147,129,112,97,83,71,60,51,42,35,29,24,19,16,12,10,8,6,5,5];
var label = [];
var data = [];
var s = 0;
for (var i = 0; i < 131; i++)
{
    label.push(i);
    if (i < 111)
    {
        s += yy[i]; 
    }
    else
    {
        s += pre[i];
    }
    data.push(s);
}
var j = 0;
var out = document.getElementById('out');
for (i = 0; i < 131; i++)
{
    if (i > 116)
    {
        j++;
        out.value += j + "," + data[i] + "\n";
    }
}
myChart = new Chart(ctx, {
  type: 'line',
    data: {
    labels: label,
    datasets: [{
      label: "prev",
      fillColor: "rgba(151, 17, 25, 0.2)",
      strokeColor: "rgba(151, 17, 25, 1)",
      pointColor: "rgba(151, 17, 25, 1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(151, 17, 25, 1)",
      data: data
    }, {
      label: "real",
      fillColor: "rgba(151, 187, 205, 0.2)",
      strokeColor: "rgba(151, 187, 205, 1)",
      pointColor: "rgba(151, 187, 205, 1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(151, 187, 205, 1)",
      data: sg
    }]
  },
    options: {
        elements: {
            rectangle: {
                borderWidth: 2,
                borderColor: 'rgb(0, 255, 0)',
                borderSkipped: 'bottom'
            }
        },
        responsive: true,
        legend: {
            position: 'top',
        },
        title: {
            display: true,
            text: 'Chart.js Line Chart'
        }
    }
});

아티팩트