Highcharts
Highcharts是使用JavaScript編寫的免費(fèi)圖表庫(kù)。它可以輕松地繪制各種類型的圖表，包括線圖、柱狀圖、餅圖、散點(diǎn)圖等。使用Highcharts，需要先引入庫(kù)文件，然后創(chuàng)建一個(gè)div元素，并指定寬度和高度。最后在腳本中使用Highcharts對(duì)象，傳遞數(shù)據(jù)和配置選項(xiàng)即可實(shí)現(xiàn)圖表繪制。
<head><script src="https://code.highcharts.com/highcharts.js"></script></head><body><div id="container" style="width: 600px; height: 400px"></div><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></body>Chart.js
Chart.js是一個(gè)易于使用且功能強(qiáng)大的JavaScript圖表庫(kù)。它支持多種圖表類型，包括線圖、柱狀圖、餅圖、雷達(dá)圖等。使用Chart.js需要先引入庫(kù)文件，在html中創(chuàng)建一個(gè)canvas元素并設(shè)置寬度和高度。在腳本中使用Chart對(duì)象，傳遞數(shù)據(jù)和選項(xiàng)即可。
<head><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script></head><body><canvas id="myChart" width="400" height="400"></canvas><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></body>D3.js
D3.js是一個(gè)數(shù)據(jù)驅(qū)動(dòng)的JavaScript庫(kù)，用于創(chuàng)建動(dòng)態(tài)和交互式的數(shù)據(jù)可視化。它不僅支持各種圖表類型，還支持各種形狀和圖形。D3.js與其他圖表庫(kù)不同的是，它直接操作文檔對(duì)象模型（DOM），而不是隱藏其文檔結(jié)構(gòu)。
<head><script src="https://d3js.org/d3.v5.min.js"></script></head><body><svg width="400" height="400"></svg><script>const data = [12, 19, 3, 5, 2, 3];
const svg = d3.select('svg');
const width = +svg.attr('width');
const height = +svg.attr('height');
const xScale = d3.scaleBand()
.domain(d3.range(data.length))
.range([0, width])
.padding(0.1);
const yScale = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([height, 0]);
const g = svg.append('g')
.attr('transform', 'translate(' + 30 + ',' + 10 + ')');
g.selectAll('rect')
.data(data)
.enter().append('rect')
.attr('x', (d, i) =>xScale(i))
.attr('y', (d) =>yScale(d))
.attr('width', xScale.bandwidth())
.attr('height', (d) =>height - yScale(d))
.attr('fill', 'steelblue');
g.selectAll('text')
.data(data)
.enter().append('text')
.text((d) =>d)
.attr('x', (d, i) =>xScale(i) + xScale.bandwidth() / 2)
.attr('y', (d) =>yScale(d) - 5)
.attr('text-anchor', 'middle');
</script></body>總結(jié)
這些圖表框架都是強(qiáng)大且靈活的工具，用于創(chuàng)建各種類型的數(shù)據(jù)可視化。它們提供不同的特點(diǎn)和用法，可以根據(jù)需要進(jìn)行選擇。無(wú)論使用哪個(gè)圖表框架，都需要根據(jù)自己的需求和數(shù)據(jù)類型進(jìn)行調(diào)整和優(yōu)化。