正文

揭秘：10个免费又好用的图表库网站，让你的数据分析更轻松！

/0 浏览量
0808

在当今这个数据驱动的时代，图表已成为我们理解和传达数据信息的重要工具。一个好的图表库可以极大地简化数据分析过程，让你更快、更直观地展示数据。下面，我将为大家揭秘10个免费又好用的图表库网站，让你的数据分析工作变得更加轻松愉快。

1. ECharts

ECharts是由百度开源的一个使用JavaScript实现的开源可视化库。它提供了直观、交互性强、功能丰富的图表，如折线图、柱状图、散点图等。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. Chart.js

Chart.js是一个基于HTML5 Canvas的简单、灵活的图表库。它支持多种图表类型，如饼图、线图、柱状图等。Chart.js易于上手，适用于快速开发小型项目。

特点：

  • 支持多种图表类型
  • 简单易用
  • 兼容性强
  • 可配置性强

代码示例：

new Chart(document.getElementById('myChart'), {
    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
            }
        }
    }
});

3. Highcharts

Highcharts是一个功能强大的JavaScript图表库，提供丰富的图表类型和自定义选项。它适用于各种应用场景，包括网站、桌面应用程序和移动设备。

特点：

  • 丰富的图表类型
  • 高度可定制
  • 兼容性强
  • 提供丰富的API和文档

代码示例：

<div id="container" style="height: 400px"></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/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>

<script type="text/javascript">
Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    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)'
        }
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true,
                format: '{point.y:.1f}'
            }
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.1f} mm</b> of <b>{total}: {total.toPercent(point.y)}</b><br/>'
    },
    series: [{
        name: 'Rainfall',
        colorByPoint: true,
        data: [{
            name: 'Sep',
            y: 29.9
        }, {
            name: 'Oct',
            y: 71.5
        }, {
            name: 'Nov',
            y: 106.4
        }, {
            name: 'Dec',
            y: 129.2
        }, {
            name: 'Jan',
            y: 144.0
        }, {
            name: 'Feb',
            y: 48.9
        }, {
            name: 'Mar',
            y: 38.8
        }, {
            name: 'Apr',
            y: 54.4
        }, {
            name: 'May',
            y: 68.2
        }, {
            name: 'Jun',
            y: 71.6
        }, {
            name: 'Jul',
            y: 75.5
        }, {
            name: 'Aug',
            y: 79.2
        }]
    }],
    drilldown: {
        series: [
            {
                name: 'Budapest',
                id: 'Budapest',
                data: [
                    {
                        name: 'Buda Castle',
                        y: 1255.7
                    },
                    {
                        name: 'St. Stephen\'s Basilica',
                        y: 731.5
                    },
                    {
                        name: 'Fisherman\'s Bastion',
                        y: 741.9
                    },
                    {
                        name: 'Dohány Street Synagogue',
                        y: 813.6
                    },
                    {
                        name: 'Széchenyi Thermal Bath',
                        y: 732.2
                    },
                    {
                        name: 'Margit Bridge',
                        y: 926.0
                    },
                    {
                        name: 'National Széchényi Library',
                        y: 830.9
                    },
                    {
                        name: 'Liszt Ferenc tér',
                        y: 734.4
                    },
                    {
                        name: 'Heroes\' Square',
                        y: 786.2
                    },
                    {
                        name: 'Házy Park',
                        y: 728.9
                    }
                ]
            },
            {
                name: 'Budapest',
                id: 'Budapest',
                data: [
                    {
                        name: 'Buda Castle',
                        y: 1255.7
                    },
                    {
                        name: 'St. Stephen\'s Basilica',
                        y: 731.5
                    },
                    {
                        name: 'Fisherman\'s Bastion',
                        y: 741.9
                    },
                    {
                        name: 'Dohány Street Synagogue',
                        y: 813.6
                    },
                    {
                        name: 'Széchenyi Thermal Bath',
                        y: 732.2
                    },
                    {
                        name: 'Margit Bridge',
                        y: 926.0
                    },
                    {
                        name: 'National Széchényi Library',
                        y: 830.9
                    },
                    {
                        name: 'Liszt Ferenc tér',
                        y: 734.4
                    },
                    {
                        name: 'Heroes\' Square',
                        y: 786.2
                    },
                    {
                        name: 'Házy Park',
                        y: 728.9
                    }
                ]
            }
        ]
    }
});
</script>

4. D3.js

D3.js是一个基于Web标准的数据驱动文档操作（Data Driven Documents）的JavaScript库。它能够将数据转换成可操作的文档或图像，为数据可视化提供了强大的工具。

特点：

  • 功能强大，可定制性强
  • 兼容性好
  • 易于与其他前端框架结合
  • 丰富的API和社区支持

代码示例：

d3.select("body").append("svg")
    .attr("width", 500)
    .attr("height", 200);

var data = [10, 20, 30, 40, 50];
var bars = d3.select("svg")
    .selectAll("rect")
    .data(data)
    .enter()
    .append("rect");

bars.attr("x", function(d, i) { return i * 50; })
    .attr("y", function(d) { return 200 - d; })
    .attr("width", 40)
    .attr("height", function(d) { return d; });

5. Google Charts

Google Charts是一个由Google提供的数据可视化工具，支持多种图表类型，如折线图、柱状图、饼图等。Google Charts易于使用，具有高度的自定义性，适合快速展示数据。

特点：

  • 兼容性好，支持多种浏览器
  • 提供丰富的图表类型
  • 高度可定制
  • 提供丰富的API和文档

代码示例：

<div id="chart_div" style="width: 900px; height: 500px;"></div>
<script type="text/javascript" src="https://www.google.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('chart_div'));
    chart.draw(data, options);
}
</script>

6. AmCharts

AmCharts是一个功能丰富的JavaScript图表库，提供多种图表类型，如地图、雷达图、仪表盘等。AmCharts适用于各种应用场景，包括网站、桌面应用程序和移动设备。

特点：

  • 丰富的图表类型
  • 高度可定制
  • 兼容性强
  • 提供丰富的API和文档

代码示例：

<div id="chartdiv"></div>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

<script>
    var chart = AmCharts.makeChart("chartdiv", {
        "type": "serial",
        "theme": "light",
        "categoryField": "category",
        "categoryAxis": {
            "gridPosition": "start"
        },
        "valueAxes": [{
            "axisAlpha": 0,
            "gridAlpha": 0
        }],
        "graphs": [{
            "fillAlphas": 0.9,
            "lineAlpha": 0.2,
            "valueField": "value"
        }],
        "data": [{
            "category": "2012",
            "value": 1
        }, {
            "category": "2013",
            "value": 2
        }, {
            "category": "2014",
            "value": 3
        }, {
            "category": "2015",
            "value": 4
        }, {
            "category": "2016",
            "value": 5
        }]
    });
</script>

7. C3.js

C3.js是一个基于D3.js的数据可视化库，它简化了D3.js的使用，使数据可视化变得更加容易。C3.js适用于各种应用场景，包括网站、桌面应用程序和移动设备。

特点：

  • 易于使用，简化了D3.js的使用
  • 丰富的图表类型
  • 高度可定制
  • 兼容性强

代码示例：

<div id="chart"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.15/c3.min.js"></script>

<script>
    var chart = c3.generate({
        bindto: "#chart",
        data: {
            columns: [
                ["data1", 30, 20, 50, 60, 80],
                ["data2", 20, 30, 40, 60, 70]
            ]
        },
        axis: {
            x: {
                type: 'category',
                categories: ['A', 'B', 'C', 'D', 'E']
            }
        }
    });
</script>

8. FusionCharts

FusionCharts是一个功能丰富的JavaScript图表库，提供多种图表类型，如折线图、柱状图、饼图等。FusionCharts适用于各种应用场景，包括网站、桌面应用程序和移动设备。

特点：

  • 丰富的图表类型
  • 高度可定制
  • 兼容性强
  • 提供丰富的API和文档

代码示例：

<div id="chart-container"></div>
<script src="https://cdn.fusioncharts.com/fusioncharts/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/fusioncharts.charts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/themes/fusioncharts.theme.fusion"></script>

<script>
    var chart = new FusionCharts({
        type: 'column2d',
        renderAt: 'chart-container',
        width: 600,
        height: 400,
        dataFormat: 'json',
        dataSource: {
            chart: {
                caption: 'Monthly Sales',
                subcaption: 'Last Year',
                xaxisname: 'Month',
                yaxisname: 'Sales',
                theme: 'fusion'
            },
            data: [
                {
                    label: 'Jan',
                    value: '66000'
                },
                {
                    label: 'Feb',
                    value: '89000'
                },
                {
                    label: 'Mar',
                    value: '105000'
                },
                {
                    label: 'Apr',
                    value: '132000'
                },
                {
                    label: 'May',
                    value: '94000'
                },
                {
                    label: 'Jun',
                    value: '95000'
                }
            ]
        }
    });
    chart.render();
</script>

9. Chartist.js

Chartist.js是一个简单易用的JavaScript图表库，提供多种图表类型，如线图、柱状图、饼图等。Chartist.js适用于快速开发和原型设计。

特点：

  • 简单易用
  • 丰富的图表类型
  • 高度可定制
  • 兼容性强

代码示例：

<canvas id="myChart" width="400" height="400"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chartist-js/dist/chartist.min.js"></script>

<script>
    var chart = new Chartist.Line('#myChart', {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        series: [
            [12, 9, 7, 8, 5, 4, 6, 4, 7, 5, 6, 10]
        ]
    }, {
        low: 0,
        showArea: true,
        showLine: false
    });
</script>

10. Plotly.js

Plotly.js是一个基于JavaScript的交互式图表库，提供多种图表类型，如散点图、柱状图、3D图表等。Plotly.js适用于各种应用场景，包括网站、桌面应用程序和移动设备。

特点：

  • 交互性强
  • 丰富的图表类型
  • 高度可定制
  • 兼容性强

代码示例：

<div id="myPlot" style="width: 600px; height: 400px;"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<script>
    var trace1 = {
        x: [1, 2, 3, 4, 5],
        y: [10, 11, 12, 13, 9],
        type: 'scatter'
    };

    var data = [trace1];

    Plotly.newPlot('myPlot', data);
</script>

以上就是10个免费又好用的图表库网站，它们可以让你轻松地完成数据分析工作。希望这篇文章能帮助你找到适合自己的图表库，让你的数据分析更加高效、直观。

-- 展开阅读全文 --