35 lines
1.0 KiB
JavaScript
35 lines
1.0 KiB
JavaScript
|
"use strict";
|
||
|
|
|
||
|
|
const colors = [
|
||
|
|
'#00429d', '#204fa3', '#325da9', '#406aaf', '#4e78b5', '#5a86bb',
|
||
|
|
'#6694c1', '#73a2c6', '#80b1cc', '#8ebfd1', '#9dced6', '#addcda',
|
||
|
|
'#c0eade', '#d8f6e1', '#ffffe0'
|
||
|
|
]
|
||
|
|
|
||
|
|
function graph(canvasId, array) {
|
||
|
|
if (array.length == 0) {
|
||
|
|
throw "array.length == 0"
|
||
|
|
}
|
||
|
|
|
||
|
|
var min = array.reduce(function(a, b) { return (a < b)? a: b; })
|
||
|
|
var max = array.reduce(function(a, b) { return (a < b)? b: a; })
|
||
|
|
|
||
|
|
var canvas = document.getElementById(canvasId)
|
||
|
|
var context = canvas.getContext("2d")
|
||
|
|
context.clearRect(0, 0, canvas.width, canvas.height)
|
||
|
|
|
||
|
|
context.beginPath()
|
||
|
|
context.strokeStyle = "black"
|
||
|
|
context.moveTo(0, canvas.height / 2)
|
||
|
|
context.lineTo(canvas.width, canvas.height / 2)
|
||
|
|
context.stroke()
|
||
|
|
|
||
|
|
array.forEach(function(v, i) {
|
||
|
|
|
||
|
|
context.fillStyle = colors[(i) % colors.length]
|
||
|
|
context.fillRect((i + 0.1) * canvas.width / array.length, canvas.height / 2, 0.8 * canvas.width / array.length, v * canvas.height / (min - max) / 2)
|
||
|
|
context.strokeText(v, (i + 0.4)* canvas.width / array.length, canvas.height /10)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|