ECMAScript/tools/C3 - 豚吐露＠wiki

C3.js

versions

---

D3.jsのwrapper framework。

C3.js

---

// c3チャートを生成
var chart = c3.generate({
    bindto: '#chart',
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ]
    }
});
 
// d3オブジェクトにアクセス
var d3 = chart.internal.d3;
 
// スケール関数の定義
var xScale = chart.internal.x;
var yScale = chart.internal.y;
 
// グラフのSVG要素を取得
var svg = d3.select('#chart svg');
 
// マウスムーブイベントを追加
svg.on('mousemove', function(event) {
    // マウスの座標を取得
    var mouseX = d3.pointer(event)[0];
    var mouseY = d3.pointer(event)[1];
 
    // 座標をグラフ上の値に変換
    var xValue = xScale.invert(mouseX);
    var yValue = yScale.invert(mouseY);
 
    // グラフ上の値をコンソールに表示
    console.log(`${mouseX},${mouseY} => ${xValue},${yValue}`);
}); 

---

更新日： 2024年11月27日 (水) 16時21分35秒