【Monaca】D3.jsを使用して折れ線グラフを表示する

私が開発したアプリの折れ線グラフは、すべてD3.jsを使用しています。

D3 is a JavaScript library for visualizing data with HTML, SVG, and CSS.

「どうやって折れ線グラフを表示しているのか」など問い合わせが多いため、今回はコピー＆ペーストすればアプリに使える、折れ線グラフを表示する方法について紹介します。

d3.min.jsを[js]フォルダにアップロードしてください。
2次元配列dataに年月日と数値を設定し、window.fn.chart.createLineChart(“chart”, data)を実行すれば、折れ線グラフが表示されます。
※見た目が少し変わるように、Google Fontsを使用しています。

Monacaデバッガーの結果です。
iOS版

Android版

index.html

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=MuseoModerno&display=swap"> 
 
  <script src="js/d3.min.js"></script>
  <script src="js/d3chart.js"></script>
  <script src="js/app.js"></script>
</head>
<body>
  <ons-page>
    <ons-toolbar>
      <div class="center">D3.js Line Chart</div>
    </ons-toolbar>
    <div id="chart"></div>
  </ons-page>
</body>
</html>

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<ons-page>

<ons-toolbar>

<div class="center">D3.js Line Chart</div>

</ons-toolbar>

</ons-page>

</body>

</html>

style.css

#chart {
    width: 100%;
    height: 240px;
}
#d3-chart {
  background-color: #fff;
}
.axis text {
  font-size: 12px;
  font-family: "MuseoModerno", cursive;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  stroke-width: 1px;
}
.tick line {
  opacity: 0.1;
  stroke-width: 1px;
}
.line-red {
  fill: none;
  stroke: #ff4081;
  stroke-width: 2px;
}
.point-red {
  fill: #ff4081;;
  stroke: #ff4081;
  stroke-width: 1px;
}

#chart {

width: 100%;

height: 240px;

}

#d3-chart {

background-color: #fff;

}

.axis text {

font-size: 12px;

font-family: "MuseoModerno", cursive;

}

.axis path,

.axis line {

fill: none;

stroke: #000;

stroke-width: 1px;

}

.tick line {

opacity: 0.1;

stroke-width: 1px;

}

.line-red {

fill: none;

stroke: #ff4081;

stroke-width: 2px;

}

.point-red {

fill: #ff4081;;

stroke: #ff4081;

stroke-width: 1px;

}

app.js

"use strict";
ons.ready(function () {
  var data = [
    ["20200601", 70],
    ["20200602", 68],
    ["20200603", 71],
    ["20200604", 70],
    ["20200605", 73],
    ["20200606", 76],
    ["20200607", 72],
    ["20200608", 67],
    ["20200609", 65],
    ["20200610", 69]
  ];
  window.fn.chart.createLineChart("chart", data);
});

"use strict";

ons.ready(function () {

var data = [

["20200601", 70],

["20200602", 68],

["20200603", 71],

["20200604", 70],

["20200605", 73],

["20200606", 76],

["20200607", 72],

["20200608", 67],

["20200609", 65],

["20200610", 69]

];

window.fn.chart.createLineChart("chart", data);

});

d3chart.js

"use strict";
//************************************************************
// module: d3chart.js
// author: otak-lab
// use: d3.min.js
//************************************************************
if (!window.hasOwnProperty("fn")) {
  window.fn = {};
}
window.fn.chart = {};
//************************************************************
// create line chart
//************************************************************
window.fn.chart.createLineChart = function (id, data) {
  var elem = document.getElementById(id);
  if (!elem) return;
  if (data.length == 0) return;
  // margin
  var margin = {
    top: 15, right: 15, bottom: 25, left: 25
  };
  // width, height
  var w = elem.clientWidth - (margin.left + margin.right);
  var h = elem.clientHeight - (margin.top + margin.bottom);
  // min, max
  var min = Math.min.apply(null, data.map(function (d) { return d[1]; }));
  var max = Math.max.apply(null, data.map(function (d) { return d[1]; }));
  if (min < 0) {
    min += Math.floor(min * 0.05);
  } else if (min > 0) {
    min -= Math.floor(max * 0.05);
  }
  if (max > 0) {
    max += Math.floor(max * 0.05);
  } else if (max < 0) {
    max -= Math.floor(min * 0.05);
  }
  // y
  var y = d3.scaleLinear()
    .domain([min, max])
    .nice()
    .range([h, 0]);
  // x
  var x = d3.scaleBand()
    .domain(data.map(function (d) {
      return d[0];
    }))
    .range([0, w]);
  // adjust line x positon
  var pos = (x(data[1][0]) - x(data[0][0])) / 2;
  // axis
  var yAxis = d3.axisLeft(y)
    .tickSizeInner(-w)
    .tickSizeOuter(0)
    .tickPadding(4)
    .tickFormat(function (d) {
      return d3.format(",")(d);
    })
    .ticks(7);
  var xAxis = d3.axisBottom(x)
    .tickValues(x.domain())
    .tickSizeInner(-h)
    .tickSizeOuter(0)
    .tickPadding(8)
    .tickFormat(function (d, i) {
      var result = Number(d.substr(6, 2)).toString();
      if (i == 0) result = Number(d.substr(4, 2)).toString() + "/" + result;
      return result;
    });
  // line
  var line = d3.line()
    .x(function (d) {
      return (x(d[0]) + pos);
    })
    .y(function (d) {
      return y(d[1]);
    })
    .curve(d3.curveLinear);
  // remove chart
  d3.select("#d3-chart").remove();
  // create svg
  var svg = d3.select(elem)
    .append("svg")
    .attr("id", "d3-chart")
    .attr("width", elem.clientWidth.toString() + "px")
    .attr("height", elem.clientHeight.toString() + "px")
    .append("g")
    .attr("transform", "translate(" + margin.left.toString() + ", " + margin.top.toString() + ")");
  // create x
  svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0, " + h.toString() + ")")
    .call(xAxis);
  // create y
  svg.append("g")
    .attr("class", "axis")
    .call(yAxis);
  // line
  svg.append("path")
    .attr("class", "line-red")
    .attr("d", line(data));
  // point
  svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("class", "point-red")
    .attr("cx", function (d) { return x(d[0]) + pos; })
    .attr("cy", function (d) { return y(d[1]); })
    .attr("r", "5px");
};

100

101

102

103

104

105

106

107

108

109

110

111

"use strict";

//************************************************************

// module: d3chart.js

// author: otak-lab

// use: d3.min.js

//************************************************************

if (!window.hasOwnProperty("fn")) {

window.fn = {};

}

window.fn.chart = {};

//************************************************************

// create line chart

//************************************************************

window.fn.chart.createLineChart = function (id, data) {

var elem = document.getElementById(id);

if (!elem) return;

if (data.length == 0) return;

// margin

var margin = {

top: 15, right: 15, bottom: 25, left: 25

};

// width, height

var w = elem.clientWidth - (margin.left + margin.right);

var h = elem.clientHeight - (margin.top + margin.bottom);

// min, max

var min = Math.min.apply(null, data.map(function (d) { return d[1]; }));

var max = Math.max.apply(null, data.map(function (d) { return d[1]; }));

if (min < 0) {

min += Math.floor(min * 0.05);

} else if (min > 0) {

min -= Math.floor(max * 0.05);

}

if (max > 0) {

max += Math.floor(max * 0.05);

} else if (max < 0) {

max -= Math.floor(min * 0.05);

}

// y

var y = d3.scaleLinear()

.domain([min, max])

.nice()

.range([h, 0]);

// x

var x = d3.scaleBand()

.domain(data.map(function (d) {

return d[0];

}))

.range([0, w]);

// adjust line x positon

var pos = (x(data[1][0]) - x(data[0][0])) / 2;

// axis

var yAxis = d3.axisLeft(y)

.tickSizeInner(-w)

.tickSizeOuter(0)

.tickPadding(4)

.tickFormat(function (d) {

return d3.format(",")(d);

})

.ticks(7);

var xAxis = d3.axisBottom(x)

.tickValues(x.domain())

.tickSizeInner(-h)

.tickSizeOuter(0)

.tickPadding(8)

.tickFormat(function (d, i) {

var result = Number(d.substr(6, 2)).toString();

if (i == 0) result = Number(d.substr(4, 2)).toString() + "/" + result;

return result;

});

// line

var line = d3.line()

.x(function (d) {

return (x(d[0]) + pos);

})

.y(function (d) {

return y(d[1]);

})

.curve(d3.curveLinear);

// remove chart

d3.select("#d3-chart").remove();

// create svg

var svg = d3.select(elem)

.append("svg")

.attr("id", "d3-chart")

.attr("width", elem.clientWidth.toString() + "px")

.attr("height", elem.clientHeight.toString() + "px")

.append("g")

.attr("transform", "translate(" + margin.left.toString() + ", " + margin.top.toString() + ")");

// create x

svg.append("g")

.attr("class", "axis")

.attr("transform", "translate(0, " + h.toString() + ")")

.call(xAxis);

// create y

svg.append("g")

.attr("class", "axis")

.call(yAxis);

// line

svg.append("path")

.attr("class", "line-red")

.attr("d", line(data));

// point

svg.selectAll("circle")

.data(data)

.enter()

.append("circle")

.attr("class", "point-red")

.attr("cx", function (d) { return x(d[0]) + pos; })

.attr("cy", function (d) { return y(d[1]); })

.attr("r", "5px");

};

月	火	水	木	金	土	日
				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

【Monaca】D3.jsを使用して折れ線グラフを表示する

【Monaca】数値を3桁区切りで表示する

【Monaca】D3.jsを使用して棒グラフを表示する

【Monaca】D3.jsを使用して折れ線グラフを表示する

Recommended Posts

【Cordova】admob-plusプラグインにおいて広告が表示されない場合の対処方法

【Cordova】cordova-plugin-local-notificationプラグインの通知clickイベントが発火しない場合の対処方法

【Cordova】ビルド時にgradleの「journal-1.lock」ファイルロックが発生した場合の対処方法