Chart.js Line Charts Samples
var ctx = document.getElementById("myChart").getContext("2d"); | |
var chart = new Chart(ctx, { | |
type: "line", | |
data: { | |
labels: ["Age: 0", "Age: 1", "Age: 2", "Age: 3", "Age: 4", ['Lunaの歳', 'Age: 5'], "Age: 6", ['Point', 'Age: 7'], "Age: 8", "Age: 9", "Age: 10"], | |
datasets: [{ | |
label: "罹患率 (Morbidity)", | |
backgroundColor: "rgba(255, 99, 132, 0.3)", | |
borderColor: "rgb(255, 99, 132)", | |
pointHoverBackgroundColor: "rgb(225, 225, 225)", | |
pointHoverRadius: 10, | |
pointRadius: [3, 4, 6, 8, 10, 20, 10, 20, 9, 12, 20], | |
data: [0.1, 0.3, 0.4, 0.6, 0.9, 1, 0.9, 1.8, 1.5, 1.8, 2.6], | |
fill: true | |
}] | |
}, | |
plugins: [{ | |
afterDatasetsDraw: function (d, h) { | |
var f = d.getDatasetMeta(0); | |
var e = f.data; | |
var a = e[7]._model.x; | |
var g = e[7]._yScale.top; | |
var c = e[7]._yScale.bottom; | |
var b = d.chart.ctx; | |
b.beginPath(); | |
b.lineWidth = 2; | |
b.strokeStyle = "#008edd"; | |
b.moveTo(a, g); | |
b.lineTo(a, c); | |
b.stroke() | |
} | |
}], | |
options: { | |
tooltips: { | |
backgroundColor: 'rgba(43, 8, 169, 0.7)' | |
}, | |
responsive: true, | |
maintainAspectRatio: false, | |
title: { | |
display: true, | |
text: "腎臓病発病率の年齢推移" | |
}, | |
legend: { | |
position: "top" | |
}, | |
scales: { | |
xAxes: [{ | |
gridLines: { | |
color: "lightgray" | |
}, | |
ticks: { | |
beginAtZero: true | |
}, | |
display: true, | |
scaleLabel: { | |
display: true, | |
labelString: "年齢 (Age)" | |
} | |
}], | |
yAxes: [{ | |
gridLines: { | |
color: ['gray', 'red', 'orange', 'yellow', 'green', 'pink'], | |
zeroLineColor: "black" | |
}, | |
ticks: { | |
beginAtZero: true, | |
stepSize: 0.5, | |
userCallback: function (tick) { | |
return tick.toString() + '%'; | |
} | |
}, | |
display: true, | |
scaleLabel: { | |
display: true, | |
labelString: "Morbidity (%)" | |
} | |
}] | |
} | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment