Javascriptで表とグラフを組み合わせた図を作りたい

Javascriptで下図のような表とグラフを組み合わせた図を作りたいと思っています。

Google ChartやChart.jsなど、このような表を作るのに適したライブラリを教えて頂けませんか。

yambejp

2021/10/13 09:10

折れ線グラフくらならSVGで自作とか検討されていませんか？

行動規範の内容に同意します

回答1件

ベストアンサー

試しに SVG のライブラリ（Snap.svg）を用いて、プロットしてみました。
https://jsfiddle.net/cx20/nc4w9s0r/1/

html
1<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>

javascript
1const columns = ["2006年", "2007年", "2008年", "2009年", "2010年", "2011年"];
2const dataSets = [
3{label:"A地域", color:"#00f", values:[933, 501, 796, 969 , 998, 1150]},
4{label:"B地域", color:"#f00", values:[801, 453, 719, 952, 1011, 1231]}
5]
6let svg = Snap(640, 480);
7drawColumns(svg, columns);
8drawTable(svg, dataSets);
9drawGraph(svg);
10plotData(svg, dataSets);
11
12function drawColumns(svg, columns) {
13    for (let i = 0; i < columns.length; i++) {
14        svg.rect(60 + i * 60, 200 + 30, 60, 30).attr({
15            stroke: "#777",
16            strokeWidth: 2,
17            fill: "none"
18        });
19        svg.text(65 + i * 60, 220 + 30, columns[i]);
20    }
21}
22
23function drawTable(svg, dataSets) {
24    for (let i = 0; i < dataSets.length; i++) {
25        let data = dataSets[i];
26        svg.rect(60 - 60, 200 + 60 + i * 30, 60, 30).attr({
27            stroke: "#777",
28            strokeWidth: 2,
29            fill: "none"
30        });
31        svg.text(65 - 60, 220 + 60 + i * 30, data.label);
32        for (let j = 0; j < data.values.length; j++) {
33            svg.rect(60 + j * 60, 200 + 60 + i * 30, 60, 30).attr({
34                stroke: "#777",
35                strokeWidth: 2,
36                fill: "none"
37            });
38            svg.text(65 + j * 60, 220 + 60 + i * 30, data.values[j]);
39        }
40    }
41}
42
43function drawGraph(svg) {
44    for (let i = 0; i < 8; i++) {
45        let x1 = 55;
46        let y1 = i * 30 + 20;
47        let x2 = 420;
48        let y2 = i * 30 + 20;
49        svg.line(x1, y1, x2, y2).attr({
50            stroke: "#777",
51            strokeWidth: 1
52        });
53        svg.text(x1 - 50, y1, String((7 - i) * 200));
54    }
55    svg.line(60, 20, 60, 230).attr({
56        stroke: "#777",
57        strokeWidth: 1
58    });
59}
60
61function plotData(svg, dataSets) {
62    for (let i = 0; i < dataSets.length; i++) {
63        let data = dataSets[i];
64        let graphData = [];
65        for (let j = 0; j < data.values.length; j++) {
66            graphData.push(60 + 30 + j * 60);
67            graphData.push(230 - (data.values[j] / 1400) * 210);
68        }
69        svg.polyline(graphData).attr({
70            stroke: data.color,
71            strokeWidth: 2,
72            fill: "none"
73        });
74    }
75}
76