企业官网建设流程全解析

ContEx入门指南：如何在Elixir中快速创建服务器端SVG图表

【免费下载链接】contexCharting and graphing library for Elixir项目地址: https://gitcode.com/gh_mirrors/co/contex

ContEx是一个专为Elixir设计的服务器端图表库，能够帮助开发者轻松生成高质量的SVG图表。无论是数据可视化需求还是动态图表展示，ContEx都提供了简单而强大的解决方案，让Elixir开发者无需依赖前端技术即可实现专业的数据可视化。

为什么选择ContEx？

ContEx作为Elixir生态系统中的图表工具，具有以下显著优势：

• 纯Elixir实现：无需引入JavaScript依赖，完全在服务器端生成SVG图表
• 简单易用的API：通过直观的函数调用即可创建复杂图表
• 多样化图表类型：支持柱状图、散点图、折线图、甘特图等多种图表形式
• Phoenix LiveView兼容：完美支持实时更新的动态图表展示

ContEx示例图表组合

快速开始：安装与基本配置

安装ContEx

要在Elixir项目中使用ContEx，只需在mix.exs文件中添加以下依赖：

def deps do [ {:contex, "~> 0.5.0"} ] end

然后运行mix deps.get命令安装依赖。

项目仓库克隆

如果需要查看完整示例，可以克隆官方仓库：

git clone https://gitcode.com/gh_mirrors/co/contex

ContEx核心概念解析

Dataset：数据基础

ContEx使用Dataset结构来管理图表数据，它由数据列表和列名列表组成。例如：

data = [{1, 1}, {2, 2}] ds = Contex.Dataset.new(data, ["x", "y"])

这个简单的数据集可以用于创建各种类型的图表。

Charts：图表类型

ContEx支持多种图表类型，主要包括：

• BarChart：柱状图，支持分组和堆叠样式
• PointPlot：散点图，适合展示数据分布
• LinePlot：折线图，适用于趋势分析
• GanttChart：甘特图，用于项目进度展示
• Sparkline：迷你图，适合在表格中嵌入

创建图表非常简单，以散点图为例：

point_plot = Contex.PointPlot.new(ds)

Plots：图表容器

Plot是图表的容器，负责管理标题、边距、坐标轴标题和图例位置等元素：

plot = Contex.Plot.new(600, 400, point_plot) |> Contex.Plot.titles("我的第一个图表", "使用ContEx创建")

最后通过Plot.to_svg/1方法生成SVG代码：

svg = Contex.Plot.to_svg(plot)

实际应用：创建你的第一个SVG图表

完整示例代码

以下是一个创建散点图的完整示例：

# 准备数据 data = Enum.map(1..100, fn i -> {i, :rand.uniform() * 100} end) ds = Contex.Dataset.new(data, ["x", "value"]) # 创建图表和容器 plot = Contex.Plot.new(ds, Contex.PointPlot, 600, 400) |> Contex.Plot.titles("随机数据散点图", "展示随机生成的数据分布") # 生成SVG svg = Contex.Plot.to_svg(plot)

这段代码将生成一个600x400像素的散点图，展示100个随机数据点的分布情况。

在Phoenix LiveView中使用

ContEx与Phoenix LiveView完美兼容，可以轻松实现动态更新的图表：

defmodule MyAppWeb.ChartLive do use MyAppWeb, :live_view alias Contex.{Plot, PointPlot, Dataset} def mount(_params, _session, socket) do # 初始化数据和图表 data = generate_data() ds = Dataset.new(data, ["x", "y"]) plot = Plot.new(ds, PointPlot, 600, 400) {:ok, assign(socket, plot: plot)} end def render(assigns) do ~H""" <div class="chart-container"> <%= @plot |> Plot.to_svg() %> </div> """ end # 其他回调函数... end

高级功能与自定义选项

图表样式自定义

ContEx允许通过选项自定义图表外观，例如柱状图的样式设置：

bar_chart = Contex.BarChart.new(ds, type: :stacked, padding: 10, colour_palette: Contex.CategoryColourScale.new(["#ff6b6b", "#4ecdc4", "#ffd166"]) )

多系列数据展示

ContEx支持在同一图表中展示多个数据系列，只需在映射中指定多个Y列：

chart = Contex.PointPlot.new(dataset, mapping: %{x_col: :date, y_cols: [:sales, :revenue, :profit]} )

总结与资源

ContEx为Elixir开发者提供了一个强大而简单的服务器端图表解决方案。通过其直观的API和丰富的功能，你可以轻松创建各种专业的SVG图表，而无需依赖前端技术。

学习资源

• 源代码：lib/contex.ex
• 图表类型实现：lib/chart/
• 测试示例：test/

无论你是需要在Phoenix应用中展示数据，还是构建数据可视化工具，ContEx都是一个值得尝试的选择。立即开始使用，体验Elixir服务器端图表的强大功能！

【免费下载链接】contexCharting and graphing library for Elixir项目地址: https://gitcode.com/gh_mirrors/co/contex