数据可视化前端UI组件【免费下载链接】chart.xkcdxkcd styled chart lib项目地址https://gitcode.com/gh_mirrors/ch/chart.xkcd点击查看免费下载XY 图XY chart是 chart.xkcd 中用于按 (x, y) 坐标直接定位数据点的图表类型既可以呈现离散的散点也可以将点依次连接成折线。本篇以 docs/05-XY.md 为主线结合 XY 图表源码 与仓库内 综合示例完整讲解 XY 图的数据结构、全部可配置项、时间轴格式化技巧以及底层实现原理读完即可在自己的页面中绘制出 xkcd 手绘风格的散点图与折线图。XY 图是什么XY 图与 Line、Bar 等按标签对值的图表不同它不要求数据等间距或带标签而是直接使用每个点的 (x, y) 二维坐标进行定位因此适合表达坐标关系、散点分布、随时间变化的历史记录等场景。默认情况下图表只绘制圆点开启showLine后会把同一数据集的点按顺序连接起来形成 XY 折线图。在 chart.xkcd 中XY 图由chartXkcd.XY构造函数渲染只要在页面中准备一个空的svg节点即可。仓库的 示例页面 中同时演示了散点图.xyline-chart与时间序列折线图.xyline-chart2两种用法。快速开始渲染一张 XY 散点图XY 图的使用方式与其他图表一致先引入库再选择一个svg元素作为渲染容器。最简形式如下svg classxy-chart/svg script srchttps://cdn.jsdelivr.net/npm/chart.xkcd2/dist/chart.xkcd.min.js/script script const svg document.querySelector(.xy-chart); new chartXkcd.XY(svg, { title: Pokemon farms, // 可选图表标题 xLabel: Coordinate, // 可选x 轴标签 yLabel: Count, // 可选y 轴标签 data: { datasets: [{ label: Pikachu, data: [{ x: 3, y: 10 }, { x: 4, y: 122 }, { x: 10, y: 100 }, { x: 1, y: 2 }, { x: 2, y: 4 }], }, { label: Squirtle, data: [{ x: 3, y: 122 }, { x: 4, y: 212 }, { x: -3, y: 100 }, { x: 1, y: 1 }, { x: 1.5, y: 12 }], }], }, options: { // 可选外观与行为配置 xTickCount: 5, yTickCount: 5, legendPosition: chartXkcd.config.positionType.upRight, showLine: false, timeFormat: undefined, dotSize: 1, }, }); /script关于安装方式script 标签或 npm 两种途径以及chartXkcd.XY以外的图表类型可参考 安装文档 与 快速开始。数据格式datasets 与 {x, y} 点XY 图的数据结构与 Line、Bar 不同data下仍然是datasets数组每个 dataset 对应一条独立的数据系列但每个数据点不再是单纯的数值或标签而是形如{ x: 3, y: 10 }的对象x横坐标数值。支持小数如1.5、负数如-3若配合timeFormat还可使用可被解析的时间字符串如2015-03-01。y纵坐标数值。label数据集名称会显示在图例与悬浮提示tooltip中。多个 dataset 会使用不同的颜色区分。从 XY 源码 可以看到构造器直接把datasets存入this.data渲染时将所有 dataset 的点合并后计算比例尺因此各数据集的坐标范围会被统一缩放到同一张图表中。通过 options 定制 XY 图options用于控制 XY 图的刻度、图例、连线、时间格式与整体外观。下表完整列出文档中定义的全部配置项、默认值及说明配置项作用默认值xTickCount设置 x 轴期望显示的刻度数量3yTickCount设置 y 轴期望显示的刻度数量3showLegend是否在图表附近显示图例truelegendPosition指定图例放置位置chartXkcd.config.positionType.upLeftshowLine是否用线连接各数据点falsetimeFormat当 x 值为时间时指定时间格式化串undefineddotSize调整数据点圆点的大小1dataColors各数据系列的颜色数组内置 9 色调色板fontFamily自定义图表使用的字体xkcdunxkcdify关闭 xkcd 手绘效果转为普通精确风格falsestrokeColor描边线条、文字颜色blackbackgroundColor图表背景颜色white这些默认值都可以在 XY 源码的构造函数 中找到对应实现构造器将传入的options与默认值合并...options因此不传的配置项会使用上述默认值。刻度控制xTickCount / yTickCountxTickCount与yTickCount控制坐标轴上的刻度个数。它们不是严格的等分强制值而是传给坐标轴的比例尺期望刻度数源码中通过tickCount: this.options.xTickCount undefined ? 3 : this.options.xTickCount传入 addAxis 工具见 XY 源码。设置合理的刻度数可以让坐标轴更易读例如数据跨度较大时可适当增大刻度数。图例showLegend 与 legendPositionshowLegend: false可隐藏图例默认true。legendPosition指定图例方位取值来自chartXkcd.config.positionType在 config.js 中定义位置取值左上chartXkcd.config.positionType.upLeft右上chartXkcd.config.positionType.upRight左下chartXkcd.config.positionType.downLeft右下chartXkcd.config.positionType.downRight需要特别说明原文档中up right一行误写为upLeft与左上相同按 config.js 的定义右上角应使用upRight。图例渲染逻辑见 addLegend 工具它依据传入的position类型与图表宽高自动计算图例锚点。连线showLine设置showLine: true后同一 dataset 内的点会按顺序用曲线连接得到 XY 折线图。底层实现中连线路径使用 d3-shape 的line()配合monotoneX曲线插值生成见 XY 源码并对路径应用url(#xkcdify)滤镜来产生手绘抖动效果每个数据集的线色取自dataColors[i]。点大小dotSizedotSize是数据点圆点的缩放系数默认1。源码中普通状态下圆点半径为3.5 * dotSize鼠标悬停时放大为6 * dotSize见 XY 源码因此调大dotSize会让圆点和悬停反馈同时变大适合数据点稀疏、希望强调点位的大图。时间轴用 timeFormat 绘制时间序列当 x 值为时间字符串时可以配合timeFormat把 XY 图变成时间序列图。chart.xkcd 内部使用 dayjs 进行时间解析与格式化dayjs 作为构建依赖声明在 package.json 中处理逻辑见 XY 源码设置timeFormat后每个数据点的x会被转换为 dayjs 对象横轴比例尺从线性比例尺切换为时间比例尺scaleTime坐标轴上的刻度与悬浮提示中的时间文本都会按timeFormat指定的格式显示。仓库的 综合示例 中的xyline-chart2是标准的 XY 时间折线图const svgXY2 document.querySelector(.xyline-chart2); new chartXkcd.XY(svgXY2, { title: Github star history, xLabel: Month, yLabel: Stars abc, data: { datasets: [{ label: timqian/chart.xkcd, data: [{ x: 2015-03-01, y: 0 }, { x: 2015-04-01, y: 2 }, { x: 2015-05-01, y: 4 }, { x: 2015-06-01, y: 10 }, { x: 2015-07-01, y: 122 }], }, { label: timqian/star-history, data: [{ x: 2015-01-01, y: 0 }, { x: 2015-03-01, y: 1 }, { x: 2015-04-01, y: 12 }, { x: 2015-05-01, y: 122 }, { x: 2015-06-01, y: 212 }], }], }, options: { xTickCount: 3, yTickCount: 4, legendPosition: chartXkcd.config.positionType.upLeft, showLine: true, timeFormat: MM/DD/YYYY, dotSize: 0.5, }, });要点x 值使用可被 dayjs 解析的时间字符串如2015-03-01timeFormat采用 dayjs 的格式化占位符例如MM/DD/YYYY输出为03/01/2015showLine: true让时间点连成趋势线这是时间序列最常用的搭配当timeFormat未设置默认undefined时x 值按普通数值处理采用线性比例尺。timeFormat同样影响悬浮提示悬停圆点时tooltip 标题会使用dayjs(x).format(timeFormat)输出格式化后的时间非时间模式则直接显示原始 x 值见 XY 源码。外观定制颜色、字体与暗色主题dataColors 与默认调色板dataColors为数组第 i 个元素对应第 i 个数据系列的颜色既用于圆点填充与描边也用于折线描边和图例色块。未设置时使用 colors.js 中的内置调色板[#dd4528, #28a3dd, #f3db52, #ed84b5, #4ab74e, #9179c0, #8e6d5a, #f19839, #949494]若数据集数量超过调色板长度颜色会按索引循环或由你自行扩展数组。fontFamily 与 unxkcdifyfontFamily默认使用内置的 xkcd 手写体仓库 assets/xkcd-script.ttf 提供该字体资源。你可以改成任意系统中已加载的字体例如示例中使用的ZCOOL KuaiLe。unxkcdify: true关闭手绘效果。源码中开启后图表滤镜置为null不再抖动字体切换为系统默认的无衬线字体栈坐标轴与线条变为精确风格见 XY 源码。strokeColor 与 backgroundColorstrokeColor控制标题、轴、文字的描边颜色backgroundColor控制 SVG 背景色。仓库 综合示例 中的暗色 XY 图示范了二者配合使用new chartXkcd.XY(svgDark, { title: stars, xLabel: wo, yLabel: Stars count, data: { /* 同前 */ }, options: { xTickCount: 5, yTickCount: 5, legendPosition: chartXkcd.config.positionType.downRight, showLine: false, strokeColor: white, backgroundColor: black, }, });注意切换到暗色主题时务必同时把strokeColor调亮如white否则文字与坐标轴会与深色背景融为一体。交互行为悬停提示与图例XY 图内置了悬浮交互。源码在 XY 渲染流程 中创建了 Tooltip 组件每个数据点圆点监听mouseover/mouseout事件见 XY 源码悬停时圆点半径从3.5 * dotSize放大到6 * dotSize并弹出 tooltiptooltip 标题显示该点的 x 值时间模式下为格式化后的时间内容显示数据集名: y 值色块颜色与数据集颜色一致tooltip 会自动根据点在图表中的位置调整弹出方向右上/右下/左上/左下避免超出可视区域移出圆点后 tooltip 隐藏圆点恢复原大小。图例由showLegend控制默认开启渲染时逐数据集生成色块 名称条目颜色同样取自dataColors见 XY 源码。渲染流程与源码实现从源码结构看XY 图的渲染管线大致如下对应 XY.js 的render()方法容器初始化设置 SVG 的描边宽度、字体、背景色并以父元素宽度为基准计算宽高高度为宽度的 2/3 与窗口高度取较小值标题与轴标签存在title/xLabel/yLabel时调用 addLabels 绘制并相应调整内边距有标题时顶部边距扩大为 60有 y 轴标签时左侧边距扩大为 70见 XY 源码数据预处理设置timeFormat时先将各点的 x 转为 dayjs 对象再把所有 dataset 的点合并计算 x、y 的全局最小/最大值比例尺x 轴默认线性比例尺、时间模式下切换为时间比例尺y 轴始终为线性比例尺且 y 方向反转数据大在上方坐标轴调用 addAxis 绘制 x、y 轴刻度数由xTickCount/yTickCount控制折线与圆点showLine时生成 monotoneX 平滑曲线圆点按比例尺映射坐标渲染并绑定悬停交互图例showLegend开启时调用 addLegend 按legendPosition摆放图例。了解这条管线有助于在遇到刻度不对齐时间轴显示为数字等问题时快速定位——前者检查xTickCount/yTickCount后者检查是否遗漏了timeFormat。一个完整的可运行示例将散点、折线、时间轴与暗色主题整合得到可直接粘贴运行的完整页面!DOCTYPE html html langzh head meta charsetUTF-8 / titlechart.xkcd XY 示例/title style .charts { display: flex; flex-wrap: wrap; gap: 16px; } .charts div { width: 400px; height: 300px; } /style /head body div classcharts divsvg classxy-chart/svg/div divsvg classxy-line-chart/svg/div /div script srchttps://cdn.jsdelivr.net/npm/chart.xkcd2/dist/chart.xkcd.min.js/script script // 散点图 new chartXkcd.XY(document.querySelector(.xy-chart), { title: Pokemon farms, xLabel: Coordinate, yLabel: Count, data: { datasets: [{ label: Pikachu, data: [{ x: 3, y: 10 }, { x: 4, y: 122 }, { x: 10, y: 100 }, { x: 1, y: 2 }, { x: 2, y: 4 }], }, { label: Squirtle, data: [{ x: 3, y: 122 }, { x: 4, y: 212 }, { x: -3, y: 100 }, { x: 1, y: 1 }, { x: 1.5, y: 12 }], }], }, options: { xTickCount: 5, yTickCount: 5, legendPosition: chartXkcd.config.positionType.upRight, showLine: false, dotSize: 1, }, }); // 时间序列折线图 new chartXkcd.XY(document.querySelector(.xy-line-chart), { title: Github star history, xLabel: Month, yLabel: Stars, data: { datasets: [{ label: chart.xkcd, data: [{ x: 2015-03-01, y: 0 }, { x: 2015-04-01, y: 2 }, { x: 2015-05-01, y: 4 }, { x: 2015-06-01, y: 10 }, { x: 2015-07-01, y: 122 }], }], }, options: { showLine: true, timeFormat: MM/DD/YYYY, xTickCount: 3, yTickCount: 4, dotSize: 0.5, }, }); /script /body /html本文所有配置示例与源码结论均可在仓库中验证配置默认值见 XY.js时间轴与比例尺实现见 XY.jspositionType 定义见 config.js真实用法可对照 examples/index.js 中的xyline-chart与xyline-chart2两个实例。赞分享数据可视化前端UI组件【免费下载链接】chart.xkcdxkcd styled chart lib项目地址https://gitcode.com/gh_mirrors/ch/chart.xkcd点击查看免费下载相关推荐seaborn关系图完全教程scatterplot与lineplot绘制散点图和折线图的实战详解seaborn关系图完全教程scatterplot与lineplot绘制散点图和折线图的实战详解 seaborn 是 Python 中最流行的统计关系图绘图库数据可视化数据分析Chart.js 散点图多轴实战双 Y 轴 scatter 图表的完整配置与源码解析Chart.js 散点图多轴实战双 Y 轴 scatter 图表的完整配置与源码解析 本文围绕 Chart.js 官方示例 scatter multi axi图表库前端数据可视化Android折线图多Y轴MPAndroidChart实现左右双坐标轴完整指南Android折线图多Y轴MPAndroidChart实现左右双坐标轴完整指南 MPAndroidChart是一个功能强大的Android图表库支持多种图表图表库数据可视化上一篇插件API网关统一管理多个AI代理服务的终极指南下一篇SkyWalking OAP 与 Satellite 自可观测性SO11Y仪表盘实战指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
chart.xkcd XY 散点图与折线图实战指南：坐标点绘制、时间轴与完整配置解析
数据可视化前端UI组件【免费下载链接】chart.xkcdxkcd styled chart lib项目地址https://gitcode.com/gh_mirrors/ch/chart.xkcd点击查看免费下载XY 图XY chart是 chart.xkcd 中用于按 (x, y) 坐标直接定位数据点的图表类型既可以呈现离散的散点也可以将点依次连接成折线。本篇以 docs/05-XY.md 为主线结合 XY 图表源码 与仓库内 综合示例完整讲解 XY 图的数据结构、全部可配置项、时间轴格式化技巧以及底层实现原理读完即可在自己的页面中绘制出 xkcd 手绘风格的散点图与折线图。XY 图是什么XY 图与 Line、Bar 等按标签对值的图表不同它不要求数据等间距或带标签而是直接使用每个点的 (x, y) 二维坐标进行定位因此适合表达坐标关系、散点分布、随时间变化的历史记录等场景。默认情况下图表只绘制圆点开启showLine后会把同一数据集的点按顺序连接起来形成 XY 折线图。在 chart.xkcd 中XY 图由chartXkcd.XY构造函数渲染只要在页面中准备一个空的svg节点即可。仓库的 示例页面 中同时演示了散点图.xyline-chart与时间序列折线图.xyline-chart2两种用法。快速开始渲染一张 XY 散点图XY 图的使用方式与其他图表一致先引入库再选择一个svg元素作为渲染容器。最简形式如下svg classxy-chart/svg script srchttps://cdn.jsdelivr.net/npm/chart.xkcd2/dist/chart.xkcd.min.js/script script const svg document.querySelector(.xy-chart); new chartXkcd.XY(svg, { title: Pokemon farms, // 可选图表标题 xLabel: Coordinate, // 可选x 轴标签 yLabel: Count, // 可选y 轴标签 data: { datasets: [{ label: Pikachu, data: [{ x: 3, y: 10 }, { x: 4, y: 122 }, { x: 10, y: 100 }, { x: 1, y: 2 }, { x: 2, y: 4 }], }, { label: Squirtle, data: [{ x: 3, y: 122 }, { x: 4, y: 212 }, { x: -3, y: 100 }, { x: 1, y: 1 }, { x: 1.5, y: 12 }], }], }, options: { // 可选外观与行为配置 xTickCount: 5, yTickCount: 5, legendPosition: chartXkcd.config.positionType.upRight, showLine: false, timeFormat: undefined, dotSize: 1, }, }); /script关于安装方式script 标签或 npm 两种途径以及chartXkcd.XY以外的图表类型可参考 安装文档 与 快速开始。数据格式datasets 与 {x, y} 点XY 图的数据结构与 Line、Bar 不同data下仍然是datasets数组每个 dataset 对应一条独立的数据系列但每个数据点不再是单纯的数值或标签而是形如{ x: 3, y: 10 }的对象x横坐标数值。支持小数如1.5、负数如-3若配合timeFormat还可使用可被解析的时间字符串如2015-03-01。y纵坐标数值。label数据集名称会显示在图例与悬浮提示tooltip中。多个 dataset 会使用不同的颜色区分。从 XY 源码 可以看到构造器直接把datasets存入this.data渲染时将所有 dataset 的点合并后计算比例尺因此各数据集的坐标范围会被统一缩放到同一张图表中。通过 options 定制 XY 图options用于控制 XY 图的刻度、图例、连线、时间格式与整体外观。下表完整列出文档中定义的全部配置项、默认值及说明配置项作用默认值xTickCount设置 x 轴期望显示的刻度数量3yTickCount设置 y 轴期望显示的刻度数量3showLegend是否在图表附近显示图例truelegendPosition指定图例放置位置chartXkcd.config.positionType.upLeftshowLine是否用线连接各数据点falsetimeFormat当 x 值为时间时指定时间格式化串undefineddotSize调整数据点圆点的大小1dataColors各数据系列的颜色数组内置 9 色调色板fontFamily自定义图表使用的字体xkcdunxkcdify关闭 xkcd 手绘效果转为普通精确风格falsestrokeColor描边线条、文字颜色blackbackgroundColor图表背景颜色white这些默认值都可以在 XY 源码的构造函数 中找到对应实现构造器将传入的options与默认值合并...options因此不传的配置项会使用上述默认值。刻度控制xTickCount / yTickCountxTickCount与yTickCount控制坐标轴上的刻度个数。它们不是严格的等分强制值而是传给坐标轴的比例尺期望刻度数源码中通过tickCount: this.options.xTickCount undefined ? 3 : this.options.xTickCount传入 addAxis 工具见 XY 源码。设置合理的刻度数可以让坐标轴更易读例如数据跨度较大时可适当增大刻度数。图例showLegend 与 legendPositionshowLegend: false可隐藏图例默认true。legendPosition指定图例方位取值来自chartXkcd.config.positionType在 config.js 中定义位置取值左上chartXkcd.config.positionType.upLeft右上chartXkcd.config.positionType.upRight左下chartXkcd.config.positionType.downLeft右下chartXkcd.config.positionType.downRight需要特别说明原文档中up right一行误写为upLeft与左上相同按 config.js 的定义右上角应使用upRight。图例渲染逻辑见 addLegend 工具它依据传入的position类型与图表宽高自动计算图例锚点。连线showLine设置showLine: true后同一 dataset 内的点会按顺序用曲线连接得到 XY 折线图。底层实现中连线路径使用 d3-shape 的line()配合monotoneX曲线插值生成见 XY 源码并对路径应用url(#xkcdify)滤镜来产生手绘抖动效果每个数据集的线色取自dataColors[i]。点大小dotSizedotSize是数据点圆点的缩放系数默认1。源码中普通状态下圆点半径为3.5 * dotSize鼠标悬停时放大为6 * dotSize见 XY 源码因此调大dotSize会让圆点和悬停反馈同时变大适合数据点稀疏、希望强调点位的大图。时间轴用 timeFormat 绘制时间序列当 x 值为时间字符串时可以配合timeFormat把 XY 图变成时间序列图。chart.xkcd 内部使用 dayjs 进行时间解析与格式化dayjs 作为构建依赖声明在 package.json 中处理逻辑见 XY 源码设置timeFormat后每个数据点的x会被转换为 dayjs 对象横轴比例尺从线性比例尺切换为时间比例尺scaleTime坐标轴上的刻度与悬浮提示中的时间文本都会按timeFormat指定的格式显示。仓库的 综合示例 中的xyline-chart2是标准的 XY 时间折线图const svgXY2 document.querySelector(.xyline-chart2); new chartXkcd.XY(svgXY2, { title: Github star history, xLabel: Month, yLabel: Stars abc, data: { datasets: [{ label: timqian/chart.xkcd, data: [{ x: 2015-03-01, y: 0 }, { x: 2015-04-01, y: 2 }, { x: 2015-05-01, y: 4 }, { x: 2015-06-01, y: 10 }, { x: 2015-07-01, y: 122 }], }, { label: timqian/star-history, data: [{ x: 2015-01-01, y: 0 }, { x: 2015-03-01, y: 1 }, { x: 2015-04-01, y: 12 }, { x: 2015-05-01, y: 122 }, { x: 2015-06-01, y: 212 }], }], }, options: { xTickCount: 3, yTickCount: 4, legendPosition: chartXkcd.config.positionType.upLeft, showLine: true, timeFormat: MM/DD/YYYY, dotSize: 0.5, }, });要点x 值使用可被 dayjs 解析的时间字符串如2015-03-01timeFormat采用 dayjs 的格式化占位符例如MM/DD/YYYY输出为03/01/2015showLine: true让时间点连成趋势线这是时间序列最常用的搭配当timeFormat未设置默认undefined时x 值按普通数值处理采用线性比例尺。timeFormat同样影响悬浮提示悬停圆点时tooltip 标题会使用dayjs(x).format(timeFormat)输出格式化后的时间非时间模式则直接显示原始 x 值见 XY 源码。外观定制颜色、字体与暗色主题dataColors 与默认调色板dataColors为数组第 i 个元素对应第 i 个数据系列的颜色既用于圆点填充与描边也用于折线描边和图例色块。未设置时使用 colors.js 中的内置调色板[#dd4528, #28a3dd, #f3db52, #ed84b5, #4ab74e, #9179c0, #8e6d5a, #f19839, #949494]若数据集数量超过调色板长度颜色会按索引循环或由你自行扩展数组。fontFamily 与 unxkcdifyfontFamily默认使用内置的 xkcd 手写体仓库 assets/xkcd-script.ttf 提供该字体资源。你可以改成任意系统中已加载的字体例如示例中使用的ZCOOL KuaiLe。unxkcdify: true关闭手绘效果。源码中开启后图表滤镜置为null不再抖动字体切换为系统默认的无衬线字体栈坐标轴与线条变为精确风格见 XY 源码。strokeColor 与 backgroundColorstrokeColor控制标题、轴、文字的描边颜色backgroundColor控制 SVG 背景色。仓库 综合示例 中的暗色 XY 图示范了二者配合使用new chartXkcd.XY(svgDark, { title: stars, xLabel: wo, yLabel: Stars count, data: { /* 同前 */ }, options: { xTickCount: 5, yTickCount: 5, legendPosition: chartXkcd.config.positionType.downRight, showLine: false, strokeColor: white, backgroundColor: black, }, });注意切换到暗色主题时务必同时把strokeColor调亮如white否则文字与坐标轴会与深色背景融为一体。交互行为悬停提示与图例XY 图内置了悬浮交互。源码在 XY 渲染流程 中创建了 Tooltip 组件每个数据点圆点监听mouseover/mouseout事件见 XY 源码悬停时圆点半径从3.5 * dotSize放大到6 * dotSize并弹出 tooltiptooltip 标题显示该点的 x 值时间模式下为格式化后的时间内容显示数据集名: y 值色块颜色与数据集颜色一致tooltip 会自动根据点在图表中的位置调整弹出方向右上/右下/左上/左下避免超出可视区域移出圆点后 tooltip 隐藏圆点恢复原大小。图例由showLegend控制默认开启渲染时逐数据集生成色块 名称条目颜色同样取自dataColors见 XY 源码。渲染流程与源码实现从源码结构看XY 图的渲染管线大致如下对应 XY.js 的render()方法容器初始化设置 SVG 的描边宽度、字体、背景色并以父元素宽度为基准计算宽高高度为宽度的 2/3 与窗口高度取较小值标题与轴标签存在title/xLabel/yLabel时调用 addLabels 绘制并相应调整内边距有标题时顶部边距扩大为 60有 y 轴标签时左侧边距扩大为 70见 XY 源码数据预处理设置timeFormat时先将各点的 x 转为 dayjs 对象再把所有 dataset 的点合并计算 x、y 的全局最小/最大值比例尺x 轴默认线性比例尺、时间模式下切换为时间比例尺y 轴始终为线性比例尺且 y 方向反转数据大在上方坐标轴调用 addAxis 绘制 x、y 轴刻度数由xTickCount/yTickCount控制折线与圆点showLine时生成 monotoneX 平滑曲线圆点按比例尺映射坐标渲染并绑定悬停交互图例showLegend开启时调用 addLegend 按legendPosition摆放图例。了解这条管线有助于在遇到刻度不对齐时间轴显示为数字等问题时快速定位——前者检查xTickCount/yTickCount后者检查是否遗漏了timeFormat。一个完整的可运行示例将散点、折线、时间轴与暗色主题整合得到可直接粘贴运行的完整页面!DOCTYPE html html langzh head meta charsetUTF-8 / titlechart.xkcd XY 示例/title style .charts { display: flex; flex-wrap: wrap; gap: 16px; } .charts div { width: 400px; height: 300px; } /style /head body div classcharts divsvg classxy-chart/svg/div divsvg classxy-line-chart/svg/div /div script srchttps://cdn.jsdelivr.net/npm/chart.xkcd2/dist/chart.xkcd.min.js/script script // 散点图 new chartXkcd.XY(document.querySelector(.xy-chart), { title: Pokemon farms, xLabel: Coordinate, yLabel: Count, data: { datasets: [{ label: Pikachu, data: [{ x: 3, y: 10 }, { x: 4, y: 122 }, { x: 10, y: 100 }, { x: 1, y: 2 }, { x: 2, y: 4 }], }, { label: Squirtle, data: [{ x: 3, y: 122 }, { x: 4, y: 212 }, { x: -3, y: 100 }, { x: 1, y: 1 }, { x: 1.5, y: 12 }], }], }, options: { xTickCount: 5, yTickCount: 5, legendPosition: chartXkcd.config.positionType.upRight, showLine: false, dotSize: 1, }, }); // 时间序列折线图 new chartXkcd.XY(document.querySelector(.xy-line-chart), { title: Github star history, xLabel: Month, yLabel: Stars, data: { datasets: [{ label: chart.xkcd, data: [{ x: 2015-03-01, y: 0 }, { x: 2015-04-01, y: 2 }, { x: 2015-05-01, y: 4 }, { x: 2015-06-01, y: 10 }, { x: 2015-07-01, y: 122 }], }], }, options: { showLine: true, timeFormat: MM/DD/YYYY, xTickCount: 3, yTickCount: 4, dotSize: 0.5, }, }); /script /body /html本文所有配置示例与源码结论均可在仓库中验证配置默认值见 XY.js时间轴与比例尺实现见 XY.jspositionType 定义见 config.js真实用法可对照 examples/index.js 中的xyline-chart与xyline-chart2两个实例。赞分享数据可视化前端UI组件【免费下载链接】chart.xkcdxkcd styled chart lib项目地址https://gitcode.com/gh_mirrors/ch/chart.xkcd点击查看免费下载相关推荐seaborn关系图完全教程scatterplot与lineplot绘制散点图和折线图的实战详解seaborn关系图完全教程scatterplot与lineplot绘制散点图和折线图的实战详解 seaborn 是 Python 中最流行的统计关系图绘图库数据可视化数据分析Chart.js 散点图多轴实战双 Y 轴 scatter 图表的完整配置与源码解析Chart.js 散点图多轴实战双 Y 轴 scatter 图表的完整配置与源码解析 本文围绕 Chart.js 官方示例 scatter multi axi图表库前端数据可视化Android折线图多Y轴MPAndroidChart实现左右双坐标轴完整指南Android折线图多Y轴MPAndroidChart实现左右双坐标轴完整指南 MPAndroidChart是一个功能强大的Android图表库支持多种图表图表库数据可视化上一篇插件API网关统一管理多个AI代理服务的终极指南下一篇SkyWalking OAP 与 Satellite 自可观测性SO11Y仪表盘实战指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
