正文

新手必看！5款可视化开发框架深度解析，助你轻松入门数据展示

/0 浏览量
0722

在当今大数据时代，数据可视化成为了数据分析与展示的重要手段。而对于新手来说，选择一款适合自己的可视化开发框架尤为重要。下面，我将为大家详细介绍5款流行的可视化开发框架，帮助大家轻松入门数据展示。

1. ECharts

ECharts 是一款使用 JavaScript 实现的开源可视化库，可以应用于 PC 端、移动端和多种图表场景。以下是 ECharts 的特点：

  • 丰富的图表类型：支持折线图、柱状图、饼图、散点图等多种图表类型。
  • 简单易用：使用简单，只需在 HTML 中引入 ECharts 库，即可进行图表绘制。
  • 强大的扩展性：支持自定义图表类型和插件，满足个性化需求。

示例代码：

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2. D3.js

D3.js 是一款基于 JavaScript 的可视化库，可以创建各种交互式的数据可视化效果。以下是 D3.js 的特点：

  • 强大的数据处理能力：支持 CSV、JSON、XML 等多种数据格式。
  • 丰富的可视化元素：支持路径、形状、文本等可视化元素。
  • 交互性强：支持缩放、拖拽等交互操作。

示例代码：

// 引入 D3.js 库
d3.csv("data.csv", function(data) {
    // 绘制柱状图
    var svg = d3.select("svg")
        .attr("width", 500)
        .attr("height", 300);
    svg.selectAll("rect")
        .data(data)
        .enter()
        .append("rect")
        .attr("width", function(d) { return d.value; })
        .attr("height", 20)
        .attr("x", function(d, i) { return i * 30; })
        .attr("y", 0);
});

3. Chart.js

Chart.js 是一款基于 HTML5 Canvas 的开源图表库，适用于移动端和 PC 端。以下是 Chart.js 的特点：

  • 简单易用：使用简单，只需在 HTML 中引入 Chart.js 库，即可进行图表绘制。
  • 丰富的图表类型：支持折线图、柱状图、饼图、雷达图等多种图表类型。
  • 自定义性强：支持自定义颜色、字体、线型等样式。

示例代码：

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

4. Highcharts

Highcharts 是一款基于 HTML5 Canvas 和 SVG 的开源图表库，适用于移动端和 PC 端。以下是 Highcharts 的特点：

  • 丰富的图表类型：支持折线图、柱状图、饼图、地图等多种图表类型。
  • 高度可定制：支持自定义颜色、字体、线型等样式。
  • 交互性强：支持缩放、拖拽等交互操作。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Highcharts 示例</title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/data.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
    <div id="container" style="height: 400px"></div>
    <script>
        var chart = Highcharts.chart('container', {
            chart: {
                type: 'column'
            },
            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)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}:</td>' +
                    '<td style="padding:0"><b>{point.y:.1f} °C</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            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: '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]
            }, {
                name: 'Berlin',
                data: [0.9, 0.6, 3.5, 7.4, 10.3, 5.2, 3.4, 1.1, 0.8, 0.1, 0.2, 0.1]
            }, {
                name: 'Weijing',
                data: [2.6, 3.2, 4.9, 7.0, 8.4, 9.0, 10.3, 11.0, 6.9, 4.5, 1.4, 0.6]
            }]
        });
    </script>
</body>
</html>

5. AntV G2

AntV G2 是一款基于 JavaScript 的可视化引擎，由蚂蚁金服开源。以下是 AntV G2 的特点：

  • 易用性：使用简单，只需在 HTML 中引入 AntV G2 库，即可进行图表绘制。
  • 丰富的图表类型：支持折线图、柱状图、饼图、地图等多种图表类型。
  • 高度可定制：支持自定义颜色、字体、线型等样式。

示例代码：

import { Chart } from '@antv/g2';

// 创建图表实例
const chart = new Chart({
    container: 'container', // 容器 ID
    autoFit: true, // 自动适配容器
    height: 500 // 图表高度
});

// 配置图表
chart.data([
    { type: '分类一', sales: 38 },
    { type: '分类一', sales: 52 },
    { type: '分类一', sales: 61 },
    { type: '分类一', sales: 145 },
    { type: '分类一', sales: 48 },
    { type: '分类二', sales: 38 },
    { type: '分类二', sales: 52 },
    { type: '分类二', sales: 61 },
    { type: '分类二', sales: 145 },
    { type: '分类二', sales: 48 },
    { type: '分类三', sales: 38 },
    { type: '分类三', sales: 52 },
    { type: '分类三', sales: 61 },
    { type: '分类三', sales: 145 },
    { type: '分类三', sales: 48 },
]);

chart.scale('sales', {
    min: 0,
    nice: true,
    alias: '销量'
});

chart.legend({
    position: 'top-left'
});

chart.coordinate('theta', {
    radius: 0.75
});

chart.interval().adjust('stack').position('sales').color('type');

chart.render();

以上5款可视化开发框架各有特点，可以根据自己的需求和喜好进行选择。希望这篇文章能帮助大家轻松入门数据展示。

-- 展开阅读全文 --