1.D3.js – Best JavaScript Charts Library (Free Tier)
D3.js - Data-Driven Documents (d3js)
2.HighCharts – Best JavaScript Charting Library (Commercial Tier)
Highcharts 在线商店
3.Google Charts – Free
Using Google Charts | Google Developers
4.Chart.JS – Free
Chart.js 中文网 (chartjs)
5.Fusion Charts – Commercial
JavaScript charts for web & mobile | FusionCharts
6.Chartist.js
Chartist - Simple responsive charts (gionkunz.github.io)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>My first Chartist Tests</title>
<link rel="stylesheet" href="chartist.min.css">
</head>
<body>
<div class="ct-chart ct-perfect-fourth"></div>
<script src="chartist.min.js"></script>
<script>
var chart = new Chartist.Line('.ct-chart', {
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
series: [
[12, 4, 2, 8, 5, 4, 6, 2, 3, 3, 4, 6],
[4, 8, 9, 3, 7, 2, 10, 5, 8, 1, 7, 10]
]
}, {
low: 0,
showLine: false,
axisX: {
showLabel: false,
offset: 0
},
axisY: {
showLabel: false,
offset: 0
}
});
// Let's put a sequence number aside so we can use it in the event callbacks
var seq = 0;
// Once the chart is fully created we reset the sequence
chart.on('created', function() {
seq = 0;
});
// On each drawn element by Chartist we use the Chartist.Svg API to trigger SMIL animations
chart.on('draw', function(data) {
if(data.type === 'point') {
// If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations.
data.element.animate({
opacity: {
// The delay when we like to start the animation
begin: seq++ * 80,
// Duration of the animation
dur: 500,
// The value where the animation should start
from: 0,
// The value where it should end
to: 1
},
x1: {
begin: seq++ * 80,
dur: 500,
from: data.x - 100,
to: data.x,
// You can specify an easing function name or use easing functions from Chartist.Svg.Easing directly
easing: Chartist.Svg.Easing.easeOutQuart
}
});
}
});
// For the sake of the example we update the chart every time it's created with a delay of 8 seconds
chart.on('created', function() {
if(window.__anim0987432598723) {
clearTimeout(window.__anim0987432598723);
window.__anim0987432598723 = null;
}
window.__anim0987432598723 = setTimeout(chart.update.bind(chart), 8000);
});
</script>
</body>
</html>
7.Echarts – Open Source, Free
Apache ECharts
8.ZingChart – Commercial
JavaScript Charts in one powerful declarative library | ZingChart
9.Vega – Open Source Chart Library
A Visualization Grammar | Vega
10.Datawrapper – Commercial
Datawrapper: Create charts, maps, and tables
11.Amcharts
JavaScript Charts & Maps - amCharts
12.Plot.Ly
Plotly: The front end for ML and data science models
13.AnyChart – Commercial
AnyChart is a lightweight and robust JavaScript charting library
14.Canvasjs – HTML5 Charts with JavaScript
Beautiful HTML5 Charts & Graphs | 10x Fast | Simple API (canvasjs)
15.EJSchart.js – Enterprise JavaScript Charts
Emprise Javascript Charts (ejschart)
16.Cytoscape.JS – Open Source, Free
Cytoscape.js
17.N3-charts – Open Source JavaScript Charting Library
n3-charts · GitHub
18.Ember Charts – Charts for Ember Framework
Addepar | Ember Charts
19.Chartkick.JS
Chartkick - Create beautiful JavaScript charts with one line of Ruby
20.ShieldUI for JavaScript – Commercial
Shield UI for JavaScript | Shield UI
21.C3.JS
C3.js | D3-based reusable chart library (c3js)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>line chart</title>
</head>
<body>
<div id="chart"></div>
<!-- Load c3.css -->
<link href="c3.css" rel="stylesheet">
<!-- Load d3.js and c3.js -->
<script src="d3.v5.min.js" charset="utf-8"></script>
<script src="c3.min.js"></script>
<script>
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]
]
}
});
}
</script>
</body>
</html>
更多推荐
21个最好的JavaScript图表库
发布评论