nvd3

chart visualization

nvd3はd3.jsをベースにした再利用可能なチャートライブラリです。このライブラリはシンプルでありながら強力なチャートインターフェースを提供し、データ視覚化作業を容易にします。

Latest Ver 1.8.6

Homepage

Github

7,227

📢 d3.jsベースのシンプルで強力なチャートライブラリ

CDNダウンロード

License: Apache-2.0

Asset Type :

すべてのバージョンを見る

https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.js

https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.css

https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css

https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.js.map

https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css.map

https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js.map

Sample Code

⚠️ import 文を含む一部のコードは、jsFiddleで正しく実行されない場合があります。エラーが発生した場合は、コードをコピーしてご自身の環境でお試しください。

📄 HTML
<svg style="width:800px;height:600px;"></svg><script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js"></script><script>var data = [{ values: [{x: 1, y: 10}, {x: 2, y: 20}, {x: 3, y: 30}], key: 'Sample Data' }]; nv.addGraph(function() { var chart = nv.models.lineChart(); chart.xAxis.axisLabel('Time').tickFormat(d3.format(',r')); chart.yAxis.axisLabel('Value').tickFormat(d3.format('.02f')); d3.select('svg').datum(data).call(chart); return chart; });</script>

🎨 External CSS
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css" rel="stylesheet">

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js"></script>

⚙️ JavaScript
var data = [{ values: [{x: 1, y: 10}, {x: 2, y: 20}, {x: 3, y: 30}], key: 'Sample Data' }]; nv.addGraph(function() { var chart = nv.models.lineChart(); chart.xAxis.axisLabel('Time').tickFormat(d3.format(',r')); chart.yAxis.axisLabel('Value').tickFormat(d3.format('.02f')); d3.select('svg').datum(data).call(chart); return chart; });