@ aparte/ 插图图
图表 独立 通过 图.js。 。 。 .
模型中的图.js配置 ```chartjs 栅栏,或工具返回,是
绘制为图表 —— 因为它流出, 哪个 Markdown 提供者安装, 或者没有 .
npm install @aparte/plugin-chartjs @aparte/core chart.js
import { setupChartjs } from '@aparte/plugin-chartjs';
setupChartjs();
@aparte/core 财务报告和审定财务报表 chart.js (4.4或以后,以下为5个) 同行依赖关系。图.js是
在第一个图表上加载,不是在之前,一个图表只有在接近屏幕时才被绘制出来,
所以重开长话短说.
栅栏
尸体是Chart.js自己的配置, { type, data, options }作为JSON——一个模特儿可以
学习。 两者 ```chartjs 财务报告和审定财务报表 ```chart.js 绘制(CHARTJS_LANGUAGES) (中文(简体) ).
```chartjs
{
"type": "bar",
"data": {
"labels": ["Jan", "Feb", "Mar"],
"datasets": [{ "label": "Sales", "data": [12, 19, 7] }]
},
"options": { "plugins": { "title": { "display": true, "text": "Sales by month" } } }
}
```
虽然答复流出,但该图表是从JSON的到来部分重新绘制的,最多是 每300 ms, 只有当到达时, 才能改变图表—— 所以它的线条或分点显示为 是模特儿写的 在它的第一点之前,它是一个安静的盒子,这个盒子的体积与图表的大小相同。 一次 栅栏关闭, 一个不是图表的身体 显示一个注释及其来源.
返回图表的工具
将结果为 Chart.js 配置的工具命名, 并绘制图表取而代之
行数:其 structuredContent,否则其文本读作JSON. 一个静静的盒子在呼叫运行时显示;
拒绝或失败的电话则显示一行.
setupChartjs({ tool: ['plot_sales', /^chart_/] });
返回自己的数据而不是图表的工具需要 map -结果和呼叫
输入,一个图.js 配置
setupChartjs({
tool: 'get_revenue',
map: (result, input) => {
const rows = result as Array<{ month: string; total: number }>;
return {
type: 'line',
data: {
labels: rows.map((r) => r.month),
datasets: [{ label: String(input.region ?? 'Revenue'), data: rows.map((r) => r.total) }],
},
};
},
});
聊天的样子
如果一个配置不包含它们, 图表会占用聊天的符号: text in --aparte-text键
选项和标题 --aparte-text-muted中,网格和轴线 --aparte-border,工具提示打开
--aparte-surface-1,聊天的字体,和透明的背景。 每个配置集的值
自己赢了。 轻型/暗式开关(data-aparte-theme,或系统的颜色方案) 重新主题
每个图表都放在原地,不再绘制.
无自有颜色的数据集被其系列所取色: --aparte-primary 首先,然后是一个
一组固定的八块花被选择在光和暗上读取(蓝、橙、水、黄、红花等),
绿色 紫色 红色 SERIES_HUES) (中文(简体) ). 放弃了可以选取的主音 接下来每个
系列是第一个明显区别于它之前的, 在正常的视觉和下
模拟出蛋白质氨酸和去子氨酸. 在已变音的文字中绘制出上一行字串
颜色而不是回收的: 分组此类序列( “ 其他” ) . seriesPalette(primary)
返回该列表.
相同的主题是一个纯粹的函数,所以您可以检查一个配置——或者一个主题来查看您的图表 拥有——没有DOM:
import { themeChartjsConfig, seriesPalette } from '@aparte/plugin-chartjs';
const config = { type: 'bar', data: { labels: ['Jan', 'Feb'], datasets: [{ data: [12, 19] }] } };
const themed = themeChartjsConfig(config, {
text: '#241f2b', muted: '#6d6479', border: '#e5ddce', surface: '#fffdf8',
background: '#f6f2ea', primary: '#b07d33', fontFamily: 'Inter, sans-serif',
});
seriesPalette('#b07d33'); // ['#b07d33', '#2a78d6', '#199e70', …]
ChartjsTokens 是第二个论点的形状.
大小
一张图填满了气泡的宽度,直到 40rem,高度为 18rem设置高度与
height 选项,或者插件在自定义属性上的 CSS 读取 :
.aparte-chartjs {
--aparte-chartjs-height: 22rem;
--aparte-chartjs-max-width: 48rem;
}
设定的配置 aspectRatio (持有时间为1:4至4:1)或 maintainAspectRatio: true 作为
它的宽度是很高的 插件将每个图表与框架本身相匹配, 并有一个
ResizeObserver 并公布图表chart.destroy()一旦它离开了
页: 1 responsive 模式每张图表将整个文档设置一个观察员并保留一个
图表从页面取出,直到被销毁。 稍后会收到消息的图表(列表)
虚拟化其行,重开对话)一旦有大小就再次被绘制
最后32人被释放 被监视着 一个写着 responsive: false 保持大小
Chart.js给它.
无障碍
一个图表是 figure - 形状和 @aparte/plugin-echarts 图表——以其名称命名
(单位:千美元)options.plugins.title.text),其他聊天语言中的"Chart". 在其中,画布是
role="img" 它的数据是同名的,在画布旁,可视地隐藏着它作为一个表格的数据——a
每个标签行,每个有数据的数据集一列——用于屏幕阅读器. (不在画布里作为
倒闭内容:图像的孩子是呈现性的,所以屏幕阅读器永远无法到达
桌子那边。 ) 表格以50个数据集列和10 000个单元格停止,无论配置要求如何; a
最后一行,也隐藏,当它只列出部分数据时。 下 prefers-reduced-motion, (中文(简体) ),
没有动画。 仍然到达的海图从不出现,除非其
配置要求动画——没有动画循环永远: loop 从每个
动画一个配置集.
它以十种语言从语言中取出默认读取的词; 设置其中任何一种
extendLocale()数字 :
aparteGlobalConfig.extendLocale({
chartjsChart: 'Figure', // the name of a chart with no title
chartjsError: 'This chart could not be drawn.', // the note over a fence that is not a chart
chartjsUnavailable: 'Chart not available', // a chart tool refused or failed
chartjsSeries: 'Series {n}', // a table column for a dataset with no label
chartjsTableCut: 'Only part of the data is listed.', // the table's last line, when it is cut
});
警卫
配置来自一个模型或工具,因此被视为不可信数据:
- 里面什么都没有变成HTML. Chart.js在画布上绘制标题,标签和工具提示. 这个 配置到页面标记一次, 因为图上的属性的逃出值 元素(一个栅栏手心标记,而非节点标记),数据表按每个值写入 逃脱了.
- 没有代码可以到达. JSON 没有函数, 所以没有回调、 可脚本选项或工具提示
external处理器可以被通过——在其中,图.js呼唤它发现的东西,在每一个盘旋上,a 替换字符串:工具提示external, (中文(简体) ),filter, (中文(简体) ),itemSort财务报告和审定财务报表callbacks,则 图例标签'generateLabels, (中文(简体) ),filter财务报告和审定财务报表sort工具提示position其他average或者说nearest。这个配置本身plugins列表已全部删除 : 图.js 运行 条目的钩子,而来自JSON的条目是一个没有功能的对象,所以列表可以做到 没有,也没有移交。 插件的选项 你们 登记 (单位:千美元)options.plugins.legend, (中文(简体) ),.title, (中文(简体) ),.tooltip)保留. - 没有图像 没有请求. A 类
pointStyle绘制为图像时HTMLImageElement或者画布,只有代码才能制作 关键词图.js要求 对象(toString, (中文(简体) ),valueOf)被删除,如同__proto__, (中文(简体) ),prototype财务报告和审定财务报表constructor。 。 。 . - 浏览器无法分配到任何东西 .
options.devicePixelRatio被丢弃,options.aspectRatio以 1: 4– 4:1 为标准ticks.count财务报告和审定财务报表ticks.maxTicksLimit改为 100 (图.js 使勾点数量与count说,一张图表最多可携带5000个点 最多5000个标签和5000个数据集(maxPoints将所有三个都限制在内)——和一个地方Intl拒绝被丢弃,而不是被丢弃到每一滴.
一个配置图.js仍然拒绝——一个类型是您的 Chart 未注册, 时间尺度为无
日期适配器——显示音符,并在控制台上警告一次.
选项
setupChartjs(options?, config?) 带 ChartjsOptions数字 :
| 选项 | 默认 | |
|---|---|---|
progressive | true | false 栅栏关闭后绘制图表 |
height | '18rem' | 图表的高度,作为 CSS 长度 |
tool | —— 说 | 将结果绘制为图表的工具:名称、RegExp或列表 |
map | —— 说 | (result, input) => config,用于返回自身数据的工具 |
maxPoints | 5000 | 图表可能携带的最多数据点,所有数据集并存——和最多的标签和数据集 |
readChartConfig(value) 是读取器使用两种路径: 已复制并无害化的配置
以上,或 null 当它不是一个图.js可以绘制. ChartjsConfig 是它的类型.
两个切入点
@aparte/plugin-chartjs 进口 chart.js/auto ——每个已注册的图表类型,比例和插件——
在第一个图表。 只能用你的海图 把这些部分登记在海图上 Chart
并把它交给通过 进口没有从 chart.js数字 :
import {
Chart, BarController, LineController, BarElement, LineElement, PointElement,
CategoryScale, LinearScale, Legend, Title, Tooltip,
} from 'chart.js';
import { setupChartjsWith } from '@aparte/plugin-chartjs/core';
Chart.register(
BarController, LineController, BarElement, LineElement, PointElement,
CategoryScale, LinearScale, Legend, Title, Tooltip,
);
setupChartjsWith(Chart, { tool: 'plot_sales' });
setupChartjsWith 拿着 Chart 类,或 a ChartjsLoader 函数返回承诺
它的,或载着它的一个舱室的() => import('chart.js/auto')) (中文(简体) ). 任何构造像
ChartjsConstructor 并返回 a ChartjsChart (单位:千美元)options, (中文(简体) ), data, (中文(简体) ), update, (中文(简体) ), resize, (中文(简体) ),
destroy会的。 您没有注册的类型的图表显示注释。 两个函数返回 a
处置者对制作者不进行登记,并释放所绘制的每一张图表.
插件从不触碰 Chart.defaults: 页面上的其他图表不是聊天的, 所以每个
图表会用它自己的配置来查看聊天.
仅限无害环境管理.