正文

教你轻松选图，盘点5款实用在线图表库

/0 浏览量
0623

在数据分析和报告制作中，图表是传达信息的关键工具。一个好的图表不仅能够直观地展示数据，还能增强报告的可读性和说服力。下面，我将为你盘点5款实用在线图表库，帮助你轻松制作出专业的图表。

1. Google Charts

简介：Google Charts 是一款由 Google 提供的免费图表制作工具，它支持多种图表类型，包括柱状图、折线图、饼图等。

特点：

  • 易用性：通过简单的API调用，即可将图表嵌入到网页中。
  • 多样性：提供丰富的图表类型，满足不同需求。
  • 定制化：支持自定义图表样式和颜色。

示例代码：

<iframe src="https://www.google.com/chart?cht=p3&chd=t:60,40&chl=Apples|Oranges&chco=ff0000,00ff00" width="400" height="200"></iframe>

2. Chart.js

简介：Chart.js 是一个基于 HTML5 Canvas 的简单、灵活的图表库，适用于各种数据可视化需求。

特点：

  • 轻量级：文件大小小，加载速度快。
  • 响应式：图表支持响应式设计，适用于不同屏幕尺寸。
  • 易于集成：可以轻松集成到现有的项目中。

示例代码：

<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 是一个基于 Web 标准（SVG、Canvas、HTML）的数据绑定和可视化库，它允许你用数据来操作文档。

特点：

  • 强大：能够创建复杂的数据可视化效果。
  • 灵活性：几乎可以创建任何类型的图表。
  • 社区支持：拥有庞大的开发者社区。

示例代码：

var dataset = [12, 5, 7, 17, 4, 11, 2, 14, 9, 3];
var width = 400;
var height = 200;
var barWidth = width / dataset.length;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("width", barWidth)
    .attr("height", function(d) { return d; })
    .attr("x", function(d, i) { return i * barWidth; })
    .attr("y", function(d) { return height - d; });

4. Highcharts

简介：Highcharts 是一个功能强大的图表库，支持多种图表类型，包括柱状图、折线图、散点图等。

特点：

  • 专业：适合用于商业报告和网站。
  • 定制化：提供丰富的配置选项，满足个性化需求。
  • 响应式：支持响应式设计，适用于不同设备。

示例代码：

<div id="container" style="height: 400px; min-width: 310px"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script>
  Highcharts.chart('container', {
    chart: {
      type: 'bar'
    },
    title: {
      text: 'Monthly Average Rainfall'
    },
    subtitle: {
      text: 'Source: WorldClimate.com'
    },
    xAxis: {
      categories: [
        'Jan',
        'Feb',
        'Mar',
        'Apr',
        'May',
        'Jun',
        'Jul',
        'Aug',
        'Sep',
        'Oct',
        'Nov',
        'Dec'
      ]
    },
    yAxis: {
      title: {
        text: 'Rainfall (mm)'
      }
    },
    series: [{
      name: 'Tokyo',
      data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
  });
</script>

5. Plotly

简介：Plotly 是一个交互式图表库，支持多种图表类型，包括散点图、柱状图、线图等。

特点：

  • 交互性：提供丰富的交互功能，如缩放、平移等。
  • 定制化：支持自定义图表样式和颜色。
  • 集成性：可以轻松集成到各种平台和框架中。

示例代码：

import plotly.graph_objects as go

fig = go.Figure(data=[go.Scatter(x=[1, 2, 3], y=[1, 2, 3])])
fig.update_layout(title='Basic Scatter', xaxis_title='X Axis', yaxis_title='Y Axis')
fig.show()

通过以上5款在线图表库，你可以轻松地制作出各种类型的图表，让你的数据可视化更加专业和吸引人。无论是用于学术研究、商业报告还是个人博客，这些图表库都能为你提供强大的支持。

-- 展开阅读全文 --