常用的9个JavaScript图表库详解

1. Chart.js

Chart.js 是一个使用 HTML5 canvas 元素创建图表的 JavaScript 库。它可以绘制多种类型的图表，例如线性图、柱状图、饼图等等。

Chart.js 具有良好的文档和易于使用的 API。它适合初学者和有经验的开发者。

以下是一个简单的例子：

<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: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>

2. D3.js

D3.js 是一个 JavaScript 库，用于创建动态、交互式数据可视化的 Web 应用程序。D3.js 不是一个普通的图表库，而是一个更低级别的库。它允许开发者创建自定义图表。

D3.js 具有高度灵活的 API 和强大的选择器功能。开发者需要更多的经验才能将其应用到实际项目。

以下是一个简单的例子：

<svg width="500" height="300"></svg>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var svg = d3.select("svg");
var width = parseFloat(svg.attr("width"));
var height = parseFloat(svg.attr("height"));

var dataset = [5, 10, 15, 20, 25];

svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", function(d, i) {
        return i * (width / dataset.length);
    })
    .attr("y", function(d) {
        return height - d * 10;
    })
    .attr("width", width / dataset.length - 1)
    .attr("height", function(d) {
        return d * 10;
    })
    .attr("fill", "steelblue");
</script>

3. Highcharts

Highcharts 是一个纯 JavaScript 创建图表的库，支持多种类型的图表，例如线性图、区域图、柱状图等等。

Highcharts 具有易于使用的 API 和完善的文档。它提供了丰富的配置选项和交互功能。

以下是一个简单的例子：

<div id="container"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<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>

4. Google Charts

Google Charts 是由 Google 开发的一个 Web 应用程序图表库。它可以绘制多种类型的图表，例如线性图、饼图、柱状图等等。

Google Charts 具有易于使用的 API 和完善的文档。它还提供了一个图表编辑器，使开发者可以通过拖放和单击等方式轻松创建图表，并可直接将它们嵌入到 Web 应用程序中。

以下是一个简单的例子：

<div id="chart_div"></div>
<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: 'My Daily Activities'
        };

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

    chart.draw(data, options);
}
</script>

5. Morris.js

Morris.js 是一个基于 jQuery 的图表库，用于绘制区域图、线性图和柱状图。它使用 HTML5 和 SVG 元素绘制图表。

Morris.js 具有易于使用的 API，但文档相对简单。它适合初学者和中级开发者。

以下是一个简单的例子：

<div id="myfirstchart" style="height: 250px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script>
Morris.Bar({
    element: 'myfirstchart',
    data: [
        {x: '2011 Q1', y: 3},
        {x: '2011 Q2', y: 2},
        {x: '2011 Q3', y: 1},
        {x: '2011 Q4', y: 2},
        {x: '2012 Q1', y: 3},
        {x: '2012 Q2', y: 1},
        {x: '2012 Q3', y: 2},
        {x: '2012 Q4', y: 4},
        {x: '2013 Q1', y: 3},
        {x: '2013 Q2', y: 2}
    ],
    xkey: 'x',
    ykeys: ['y'],
    labels: ['Y'],
    barColors: function (row, series, type) {
        if (type === 'bar') {
            var red = Math.ceil(255 * row.y / this.ymax);
            return 'rgb(' + red + ', 0, 0)';
        }
        else {
            return '#000';
        }
    }
});
</script>

6. C3.js

C3.js 是一个使用 D3.js 创建可重用的交互式图表的库。它支持线性图、饼图、柱状图等。

C3.js 具有易于使用的 API 和灵活的配置选项。它提供了一组预定义的模板，使开发者能够轻松地创建图表。

以下是一个简单的例子：

<div id="chart"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.14/c3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.14/c3.min.css" rel="stylesheet">
<script>
var chart = c3.generate({
    bindto: '#chart',
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ]
    }
});
</script>

7. Chartist.js

Chartist.js 是一个使用 SVG 元素创建响应式图表的 JavaScript 库。它支持线性图、饼图和柱状图等类型的图表，并具有良好的文档和易于使用的 API。

Chartist.js 支持修改 CSS 样式，使开发者能够轻松地自定义图表的外观和感觉。

以下是一个简单的例子：

<div class="ct-chart ct-golden-section"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.4/chartist.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.4/chartist.min.css" rel="stylesheet">
<script>
new Chartist.Bar('.ct-chart', {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    series: [
        [5, 2, 4, 2, 0, 3],
        [3, 4, 2, 1, 5, 2]
    ]
});
</script>

8. FusionCharts

FusionCharts 是一个用于绘制多达 100 种图表类型的 JavaScript 库。它支持线性图、面积图、柱状图、漏斗图等等。

FusionCharts 具有完善的文档和易于使用的 API。它支持可定制的主题，使开发者可以轻松地自定义它们的图表。

以下是一个简单的例子：

<div id="chart-container"></div>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script>
FusionCharts.ready(function() {
    var revenueChart = new FusionCharts({
        type: 'column2d',
        renderAt: 'chart-container',
        width: '500',
        height: '300',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Quarterly Revenue",
                "xAxisName": "Quarter",
                "yAxisName": "Revenue (In USD)",
                "theme": "fusion"
            },
            "data": [{
                "label": "Q1",
                "value": "125000"
            }, {
                "label": "Q2",
                "value": "257000"
            }, {
                "label": "Q3",
                "value": "173000"
            }, {
                "label": "Q4",
                "value": "182000"
            }]
        }
    }).render();
});
</script>

9. ECharts

ECharts 是一个基于 JavaScript 的开源可视化库，可以处理大量的图表类型，例如地图、饼图、力导向图等等。

ECharts 具有强大的文档和易于使用的 API。它还支持响应式设计，并且支持移动设备。

以下是一个简单的例子：

<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});
</script>

以上便是常用的 9 个 JavaScript 图表库的详细讲解。