ApexCharts 图表入门例子

常见的图形库系列

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

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

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

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

Plotly 函数图像绘制

ApexCharts 图表入门例子

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

Recharts 入门例子

AntV G2 入门例子

图表库 C3.js 入门例子

图表库 Google Charts 入门例子

ECharts-01-图表库系列

入门例子

源码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ApexCharts 入门示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@latest/dist/apexcharts.css">
    <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
</head>
<body>
    <div id="chart"></div>

    <script>
        // 配置选项
        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();
    </script>
</body>
</html>

关键点

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

  • series:数据系列,可以包含多个数据集(例如多条折线)。

  • xaxis.categories:X 轴的标签。

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

  • colors:设置折线的颜色。

ApexCharts 官方文档

相关推荐
我真的是大笨蛋1 小时前
K8S-Pod(下)
java·笔记·云原生·容器·kubernetes
碳水加碳水1 小时前
Java代码审计实战:XML外部实体注入(XXE)深度解析
java·安全·web安全·代码审计
努力也学不会java3 小时前
【设计模式】 原型模式
java·设计模式·原型模式
方渐鸿3 小时前
【2024】k8s集群 图文详细 部署安装使用(两万字)
java·运维·容器·kubernetes·k8s·运维开发·持续部署
学亮编程手记3 小时前
K8S v1.33 版本主要新特性介绍
java·容器·kubernetes
Haven-4 小时前
Java-面试八股文-JVM篇
java·jvm·面试
我真的是大笨蛋4 小时前
JVM调优总结
java·jvm·数据库·redis·缓存·性能优化·系统架构
wjs0404 小时前
Git常用的命令
java·git·gitlab
superlls5 小时前
(算法 哈希表)【LeetCode 349】两个数组的交集 思路笔记自留
java·数据结构·算法
田里的水稻5 小时前
C++_队列编码实例,从末端添加对象,同时把头部的对象剔除掉,中的队列长度为设置长度NUM_OBJ
java·c++·算法