常用的9个JavaScript图表库详解
1. Chart.js
Chart.js 是一个使用 HTML5 canvas 元素创建图表的 JavaScript 库。它可以绘制多种类型的图表，例如线性图、柱状图、饼图等等。
Chart.js 具有良好的文档和易于使用的 API。它适合初学者和有经验的开发者。
以下是一个简单的例子：
<canvas id="myChart" width="400" height="400"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
2. D3.js
D3.js 是一个 JavaScript 库，用于创建动态、交互式数据可视化的 Web 应用程序。D3.js 不是一个普通的图表库，而是一个更低级别的库。它允许开发者创建自定义图表。
D3.js 具有高度灵活的 API 和强大的选择器功能。开发者需要更多的经验才能将其应用到实际项目。
以下是一个简单的例子：
<svg width="500" height="300"></svg>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var svg = d3.select("svg");
var width = parseFloat(svg.attr("width"));
var height = parseFloat(svg.attr("height"));
var dataset = [5, 10, 15, 20, 25];
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * (width / dataset.length);
})
.attr("y", function(d) {
return height - d * 10;
})
.attr("width", width / dataset.length - 1)
.attr("height", function(d) {
return d * 10;
})
.attr("fill", "steelblue");
</script>
3. Highcharts
Highcharts 是一个纯 JavaScript 创建图表的库，支持多种类型的图表，例如线性图、区域图、柱状图等等。
Highcharts 具有易于使用的 API 和完善的文档。它提供了丰富的配置选项和交互功能。
以下是一个简单的例子：
<div id="container"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script>
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
</script>
4. Google Charts
Google Charts 是由 Google 开发的一个 Web 应用程序图表库。它可以绘制多种类型的图表，例如线性图、饼图、柱状图等等。
Google Charts 具有易于使用的 API 和完善的文档。它还提供了一个图表编辑器，使开发者可以通过拖放和单击等方式轻松创建图表，并可直接将它们嵌入到 Web 应用程序中。
以下是一个简单的例子：
<div id="chart_div"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
5. Morris.js
Morris.js 是一个基于 jQuery 的图表库，用于绘制区域图、线性图和柱状图。它使用 HTML5 和 SVG 元素绘制图表。
Morris.js 具有易于使用的 API，但文档相对简单。它适合初学者和中级开发者。
以下是一个简单的例子：
<div id="myfirstchart" style="height: 250px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script>
Morris.Bar({
element: 'myfirstchart',
data: [
{x: '2011 Q1', y: 3},
{x: '2011 Q2', y: 2},
{x: '2011 Q3', y: 1},
{x: '2011 Q4', y: 2},
{x: '2012 Q1', y: 3},
{x: '2012 Q2', y: 1},
{x: '2012 Q3', y: 2},
{x: '2012 Q4', y: 4},
{x: '2013 Q1', y: 3},
{x: '2013 Q2', y: 2}
],
xkey: 'x',
ykeys: ['y'],
labels: ['Y'],
barColors: function (row, series, type) {
if (type === 'bar') {
var red = Math.ceil(255 * row.y / this.ymax);
return 'rgb(' + red + ', 0, 0)';
}
else {
return '#000';
}
}
});
</script>
6. C3.js
C3.js 是一个使用 D3.js 创建可重用的交互式图表的库。它支持线性图、饼图、柱状图等。
C3.js 具有易于使用的 API 和灵活的配置选项。它提供了一组预定义的模板，使开发者能够轻松地创建图表。
以下是一个简单的例子：
<div id="chart"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.14/c3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.14/c3.min.css" rel="stylesheet">
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});
</script>
7. Chartist.js
Chartist.js 是一个使用 SVG 元素创建响应式图表的 JavaScript 库。它支持线性图、饼图和柱状图等类型的图表，并具有良好的文档和易于使用的 API。
Chartist.js 支持修改 CSS 样式，使开发者能够轻松地自定义图表的外观和感觉。
以下是一个简单的例子：
<div class="ct-chart ct-golden-section"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.4/chartist.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.4/chartist.min.css" rel="stylesheet">
<script>
new Chartist.Bar('.ct-chart', {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
series: [
[5, 2, 4, 2, 0, 3],
[3, 4, 2, 1, 5, 2]
]
});
</script>
8. FusionCharts
FusionCharts 是一个用于绘制多达 100 种图表类型的 JavaScript 库。它支持线性图、面积图、柱状图、漏斗图等等。
FusionCharts 具有完善的文档和易于使用的 API。它支持可定制的主题，使开发者可以轻松地自定义它们的图表。
以下是一个简单的例子：
<div id="chart-container"></div>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script>
FusionCharts.ready(function() {
var revenueChart = new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Quarterly Revenue",
"xAxisName": "Quarter",
"yAxisName": "Revenue (In USD)",
"theme": "fusion"
},
"data": [{
"label": "Q1",
"value": "125000"
}, {
"label": "Q2",
"value": "257000"
}, {
"label": "Q3",
"value": "173000"
}, {
"label": "Q4",
"value": "182000"
}]
}
}).render();
});
</script>
9. ECharts
ECharts 是一个基于 JavaScript 的开源可视化库，可以处理大量的图表类型，例如地图、饼图、力导向图等等。
ECharts 具有强大的文档和易于使用的 API。它还支持响应式设计，并且支持移动设备。
以下是一个简单的例子：
<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
</script>
以上便是常用的 9 个 JavaScript 图表库的详细讲解。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：常用的9个JavaScript图表库详解 - Python技术站
微信扫一扫 
支付宝扫一扫 