javascript-handwrite/fitting.html at master · pliao1996/javascript-handwrite · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<html>
<meta charset="utf-8" />

<head>
    <script>
        var data = {
            pei: [58.8, 58.5, 58.5, 58.5, 58.5, 59.1, 58.3, 58.8, 58.4],
            ning: [53.6, 53.4, 53.5, 54.3, 53.8, 53.7, 54, 53.8, 53.5],
            sisi: [65.4, 65.7, 65.7, 65.6, 65.7, 65.7, 66.3, 65.5, 65.7],
            shu: [53.1, 52.7, 52.5, 52.3, 52.5, 52.6, 53, 53.1, 53.3]
        }

        var aim = {
            pei: 56.3,
            ning: 52.1,
            sisi: 60.4,
            shu: 51.6
        }

        var colorMap = {
            pei: 'palevioletred',
            ning: 'green',
            sisi: 'blueviolet',
            shu: 'orange'
        }
        function drawLine(points, color, aim) {

            var interval = 1200 / points.length;
            var step = 30
            var canvas = document.getElementById('linechart');
            var context = canvas.getContext('2d');
            context.setLineDash([1, 1]);
            context.beginPath();
            context.lineWidth = 1;
            context.strokeStyle = color;
            points.forEach((point, index) => {
                context.moveTo(index * interval, point * step);
                if (index + 1 < points.length) {
                    context.lineTo((index + 1) * interval, points[index + 1] * step);
                }
            })
            context.closePath();
            context.stroke();

            context.setLineDash([10, 20]);
            context.beginPath();
            context.lineWidth = 1;
            context.moveTo(0, aim * step);
            context.lineTo(1200, aim * step);
            context.closePath();
            context.stroke();

        }

        function onCanvasLoad() {
            Object.keys(data).forEach((key) => {
                drawLine(data[key].map((n) => n - 50), colorMap[key], aim[key] - 50)
            })
        }

    </script>
</head>

<body onload="onCanvasLoad()">
    <div>
        <canvas id='linechart' height="500" width="1000"></canvas>
    </div>
    <div id='bonus-pool'>
        <div id='pei'>
            <p>pei</p>
            <div>60</div>
        </div>
        <div id='ning'>
            <p>ning</p>
            <div>60</div>
        </div>
        <div id='sisi'>
            <p>sisi</p>
            <div>60</div>
        </div>
        <div id='shu'>
            <p>shu</p>
            <div>60</div>
            <div>60</div>
        </div>
    </div>
    <p>total:300</p>
    <style type="text/css">
        canvas {
            transform: rotateX(180deg);
        }

        #bonus-pool {
            display: flex;
            flex-direction: row;
        }

        #bonus-pool>div {
            width: 100px;
        }

        #pei div {
            background-color: palevioletred;
        }

        #ning div {
            background-color: green;
        }

        #sisi div {
            background-color: blueviolet;
        }

        #shu div {
            background-color: orange;
        }
    </style>

    </style>
</body>

</html>