Javascript (C3, D3_チュートリアル)
■c3.js, d3.jsのグラフのライブラリ。
Reactを使って何か作ろうかと思うけど、別のライブラリを組み合わせたい。グラフや地図関連のライブラリとしてc3.js、d3.jsを少しみたい。今回は単純にチュートリアル的なサンプルを動かすまで。
公式らしきウェブサイトから持ってきて下のコードを作成。
今回はReactを使わず、単純にhtml構文で関連ライブラリを参照させた。
<html>
<head>
<meta charset="utf-8">
<link href="c3.css" rel="stylesheet">
<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
<script src="c3.min.js"></script>
<script type="text/javascript" src="sample012.js"></script>
</head>
<body>
<div id="chart"></div>
</body>
</html>上の sample012.js が下。
window.onload = function () {
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
axes: {
data2: 'y2' // ADD
}
},
axis: {
y2: {
show: true // ADD
}
}
});
};実行結果（htmlファイルをブラウザで表示）が下。
C3ライブラリはD3がないと動作しないよう。d3.v5.min.js の文を除くと下のエラーになって、グラフは表示されない。
c3.min.js:2 Uncaught TypeError: Cannot read properties of undefined (reading 'schemeCategory10')
また、c3.css を除くと下のような表示になった。ウェブサイトでは c3.css、d3.v5.min.js、c3.min.js を参照していたけど、3つとも必要だった。
d3.v5.min.js は、オフラインで使えるファイルをダウンロードできる所がよく分からなかったので、URLで参照。d3.v7.min.js というものはダウンロードできたけど、これではグラフ部分が表示されなかった（コンソールで c3.min.js:2 Uncaught TypeError: this.d3.set is not a function と出ている）。
window.onload で、要素が読み込まれた後にグラフ表示。これも入れないと id="chart" が読み込まれる前に javascript が動作するようでエラーになる。
もう少しc3、d3を見る。
