正文

揭秘：免费在线图表库，轻松提升数据可视化技能

/0 浏览量
0320

引言

在当今数据驱动的世界中，数据可视化已成为传达复杂信息的关键工具。对于数据分析师、市场研究人员和任何需要展示数据的人来说，掌握数据可视化技能至关重要。幸运的是，有许多免费在线图表库可以帮助我们轻松创建专业级别的图表。本文将详细介绍一些最受欢迎的免费在线图表库，并提供使用它们的指南。

免费在线图表库介绍

1. Google Charts

简介：Google Charts 是 Google 提供的一个强大的图表库，支持多种类型的图表，包括折线图、柱状图、饼图、散点图等。

使用方法：

<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: 'Daily Activities',
    pieHole: 0.4,
  };

  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}
</script>
<div id="piechart" style="width: 900px; height: 500px;"></div>

2. Chart.js

简介：Chart.js 是一个简单易用的图表库，适合快速创建图表，特别适合初学者。

使用方法：

<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: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>

3. D3.js

简介：D3.js 是一个功能强大的JavaScript库，用于在Web上创建交互式数据可视化。

使用方法：

// 创建SVG元素
var svg = d3.select("body").append("svg")
    .attr("width", 500)
    .attr("height", 300);

// 创建矩形
svg.selectAll("rect")
    .data([30, 20, 10])
    .enter().append("rect")
    .attr("width", function(d) { return d; })
    .attr("height", 100)
    .attr("x", function(d, i) { return i * 120; })
    .attr("y", 50);

4. Highcharts

简介：Highcharts 是一个流行的图表库，提供广泛的图表类型和高级功能。

使用方法：

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <div id="container" style="height: 400px; min-width: 310px"></div>
    <script type="text/javascript">
        Highcharts.chart('container', {
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Monthly Average Temperature'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                             'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },
            plotOptions: {
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function () {
                                window.open(this.series.name + ' - ' + this.x + ': ' + this.y + ' °C', '_blank');
                            }
                        }
                    }
                }
            },
            series: [{
                name: 'Tokyo',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }, {
                name: 'New York',
                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
            }, {
                name: 'Berlin',
                data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
            }, {
                name: 'London',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }]
        });
    </script>
</body>
</html>

总结

选择合适的免费在线图表库对于提升数据可视化技能至关重要。Google Charts、Chart.js、D3.js 和 Highcharts 都是功能强大的工具，可以根据不同的需求和技能水平进行选择。通过实践和探索这些图表库，您可以创建出引人注目的数据可视化作品，从而更好地传达信息。

-- 展开阅读全文 --