常见的图形库系列

常见的图形库概览-00-overview

常见的图形库概览-01-Chart.js 入门例子

常见的图形库概览-03-D3.js 入门例子

HighCharts 交互式图表-01-入门介绍

Plotly 函数图像绘制

ApexCharts 图表入门例子

Victory 图表基于 React，适合 React 项目，支持移动端

Recharts 入门例子

AntV G2 入门例子

图表库 C3.js 入门例子

图表库 Google Charts 入门例子

ECharts-01-图表库系列

入门例子

源码

    
    
    ApexCharts 入门示例
    
    


    

    
        // 配置选项
        const options = {
            chart: {
                type: 'line', // 图表类型：折线图
                height: 350,  // 图表高度
            },
            series: [{
                name: 'Sales', // 数据系列名称
                data: [30, 40, 35, 50, 49, 60, 70, 91, 125] // 数据值
            }],
            xaxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'] // X 轴标签
            },
            stroke: {
                curve: 'smooth' // 平滑曲线
            },
            colors: ['#008FFB'] // 折线颜色
        };

        // 创建图表
        const chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();

关键点

• type: 'line'：指定图表类型为折线图。ApexCharts 还支持其他类型，如 bar（柱状图）、pie（饼图）等。

• series：数据系列，可以包含多个数据集（例如多条折线）。

• xaxis.categories：X 轴的标签。

• stroke.curve：设置折线的样式，smooth 表示平滑曲线。

• colors：设置折线的颜色。

ApexCharts 官方文档。