Chart.js에서 X가 부등 간격으로 꺾은 선 그래프를 그립니다.
입력 데이터
data.json
[
{ "x": 0.0, "y": 10.2 },
{ "x": 0.9, "y": 4.7 },
{ "x": 1.2, "y": 5.1 },
{ "x": 1.5, "y": 6.1 },
{ "x": 2.2, "y": 4.3 },
{ "x": 3.5, "y": 6.2 },
{ "x": 4.2, "y": 4.8 },
{ "x": 4.7, "y": 5.8 },
{ "x": 15.2, "y": 3.2 },
{ "x": 18.2, "y": 5.2 },
{ "x": 22.5, "y": 7.5}
]
<!DOCTYPE html>
<head lang="ja">
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="scatter.js"></script>
<script src="draw_line_chart.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="200"></canvas>
<hr />
Jan/18/2018<p />
</body>
scatter.js
// ----------------------------------------------------------------------
/*
scatter.js
Jan/18/2018
*/
// ----------------------------------------------------------------------
jQuery (function ()
{
const file_json = "data.json"
jQuery.getJSON (file_json,function (data_aa)
{
draw_line_chart_proc ("myChart",data_aa,0,12)
})
})
// ----------------------------------------------------------------------
draw_line_chart.js
// -----------------------------------------------------------------------
/*
draw_line_chart.js
Jan/17/2018
*/
// -----------------------------------------------------------------------
function draw_line_chart_proc (id_chart,data_aa,ymin,ymax)
{
const options_aa = {
legend: { display: false },
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks: { min: 0, max: 24, stepSize: 3}
}],
yAxes: [{
type: 'linear',
position: 'bottom',
ticks: { min: ymin, max: ymax}
}]
}
}
var ctx = jQuery("#" + id_chart)
var scatterChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
tension: 0,
fill: false,
pointRadius: 0,
borderWidth: 0,
backgroundColor: "blue",
borderColor: "blue",
data: data_aa
}]
},
options: options_aa
})
}
// -----------------------------------------------------------------------
function draw_character_xx (id_chart)
{
var ctx = jQuery("#" + id_chart)[0].getContext('2d')
ctx.font = "12px 'ＭＳ Ｐゴシック'";
ctx.fillStyle = "black";
ctx.fillText("時刻", 300, 15);
}
// -----------------------------------------------------------------------
function draw_character_yy (id_chart,label_aa,unit_aa)
{
var ctx = jQuery("#" + id_chart)[0].getContext('2d')
ctx.font = "12px 'ＭＳ Ｐゴシック'";
ctx.fillStyle = "black";
ctx.fillText(label_aa, 5, 15);
ctx.fillText(unit_aa, 5, 35);
ctx.font = "18px 'ＭＳ Ｐゴシック'";
ctx.fillText(label_aa, 300, 25);
}
// -----------------------------------------------------------------------
관련 페이지
Chart.js에서 일본어 사용
Reference
이 문제에 관하여(Chart.js에서 X가 부등 간격으로 꺾은 선 그래프를 그립니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ekzemplaro/items/190a41e1918ea7deb4ff텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
