Chart
让你 VuePress 站点中的 Markdown 文件支持 Chart 图表。
使用 chart.js 提供相应功能。
文档
相关详情，详见 Chart.js 文档.
Visual Studio Code Plugin
语法
```chart:json 标题
{
// 此处为图表配置
}
```
我们也支持 js 和 javascript 的代码块，你应当将导出对象赋值给 module.exports。
案例
块状图
一个块状图案例
{
"type": "bar",
"data": {
"labels": ["红色", "蓝色", "黄色", "绿色", "紫色", "橙色"],
"datasets": [
{
"label": "投票数",
"data": [12, 19, 3, 5, 2, 3],
"backgroundColor": [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)"
],
"borderColor": [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)"
],
"borderWidth": 1
}
]
},
"options": {
"scales": {
"y": {
"beginAtZero": true
}
}
}
}
对应代码
```chart:json 一个块状图案例
{
"type": "bar",
"data": {
"labels": ["红色", "蓝色", "黄色", "绿色", "紫色", "橙色"],
"datasets": [
{
"label": "投票数",
"data": [12, 19, 3, 5, 2, 3],
"backgroundColor": [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)"
],
"borderColor": [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)"
],
"borderWidth": 1
}
]
},
"options": {
"scales": {
"y": {
"beginAtZero": true
}
}
}
}
```
气泡图
一个气泡图案例
{
"type": "bubble",
"data": {
"datasets": [
{
"label": "第一个数据集",
"data": [
{ "x": 20, "y": 30, "r": 15 },
{ "x": 40, "y": 10, "r": 10 }
],
"backgroundColor": "rgb(255, 99, 132)"
}
]
}
}
对应代码
```chart:json 一个气泡图案例
{
"type": "bubble",
"data": {
"datasets": [
{
"label": "第一个数据集",
"data": [
{ "x": 20, "y": 30, "r": 15 },
{ "x": 40, "y": 10, "r": 10 }
],
"backgroundColor": "rgb(255, 99, 132)"
}
]
}
}
```
线状图
一个线状图案例
{
"type": "line",
"data": {
"labels": ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
"datasets": [
{
"label": "我的第一个数据集",
"data": [65, 59, 80, 81, 56, 55, 40],
"fill": false,
"borderColor": "rgb(75, 192, 192)",
"tension": 0.1
}
]
}
}
代码
```chart:json 一个线状图案例
{
"type": "line",
"data": {
"labels": ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
"datasets": [
{
"label": "我的第一个数据集",
"data": [65, 59, 80, 81, 56, 55, 40],
"fill": false,
"borderColor": "rgb(75, 192, 192)",
"tension": 0.1
}
]
}
}
```
玫瑰图
一个玫瑰图案例
{
"type": "polarArea",
"data": {
"labels": ["红色", "绿色", "黄色", "灰色", "蓝色"],
"datasets": [
{
"label": "My First Dataset",
"data": [11, 16, 7, 3, 14],
"backgroundColor": [
"rgb(255, 99, 132)",
"rgb(75, 192, 192)",
"rgb(255, 205, 86)",
"rgb(201, 203, 207)",
"rgb(54, 162, 235)"
]
}
]
}
}
代码
```chart:json 一个玫瑰图案例
{
"type": "polarArea",
"data": {
"labels": ["红色", "绿色", "黄色", "灰色", "蓝色"],
"datasets": [
{
"label": "My First Dataset",
"data": [11, 16, 7, 3, 14],
"backgroundColor": [
"rgb(255, 99, 132)",
"rgb(75, 192, 192)",
"rgb(255, 205, 86)",
"rgb(201, 203, 207)",
"rgb(54, 162, 235)"
]
}
]
}
}
```
雷达图
一个雷达图案例
{
"type": "radar",
"data": {
"labels": ["吃饭", "喝水", "睡觉", "设计", "编程", "骑车", "跑步"],
"datasets": [
{
"label": "我的第一个数据集",
"data": [65, 59, 90, 81, 56, 55, 40],
"fill": true,
"backgroundColor": "rgba(255, 99, 132, 0.2)",
"borderColor": "rgb(255, 99, 132)",
"pointBackgroundColor": "rgb(255, 99, 132)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgb(255, 99, 132)"
},
{
"label": "我的第二个数据集",
"data": [28, 48, 40, 19, 96, 27, 100],
"fill": true,
"backgroundColor": "rgba(54, 162, 235, 0.2)",
"borderColor": "rgb(54, 162, 235)",
"pointBackgroundColor": "rgb(54, 162, 235)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgb(54, 162, 235)"
}
]
},
"options": {
"elements": {
"line": {
"borderWidth": 3
}
}
}
}
代码
```chart:json 一个雷达图案例
{
"type": "radar",
"data": {
"labels": ["吃饭", "喝水", "睡觉", "设计", "编程", "骑车", "跑步"],
"datasets": [
{
"label": "我的第一个数据集",
"data": [65, 59, 90, 81, 56, 55, 40],
"fill": true,
"backgroundColor": "rgba(255, 99, 132, 0.2)",
"borderColor": "rgb(255, 99, 132)",
"pointBackgroundColor": "rgb(255, 99, 132)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgb(255, 99, 132)"
},
{
"label": "我的第二个数据集",
"data": [28, 48, 40, 19, 96, 27, 100],
"fill": true,
"backgroundColor": "rgba(54, 162, 235, 0.2)",
"borderColor": "rgb(54, 162, 235)",
"pointBackgroundColor": "rgb(54, 162, 235)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgb(54, 162, 235)"
}
]
},
"options": {
"elements": {
"line": {
"borderWidth": 3
}
}
}
}
```
散点图
一个散点图案例
{
"type": "scatter",
"data": {
"datasets": [
{
"label": "散点数据集",
"data": [
{ "x": -10, "y": 0 },
{ "x": 0, "y": 10 },
{ "x": 10, "y": 5 },
{ "x": 0.5, "y": 5.5 }
],
"backgroundColor": "rgb(255, 99, 132)"
}
]
},
"options": {
"scales": {
"x": {
"type": "linear",
"position": "bottom"
}
}
}
}
代码
```chart:json 一个散点图案例
{
"type": "scatter",
"data": {
"datasets": [
{
"label": "散点数据集",
"data": [
{ "x": -10, "y": 0 },
{ "x": 0, "y": 10 },
{ "x": 10, "y": 5 },
{ "x": 0.5, "y": 5.5 }
],
"backgroundColor": "rgb(255, 99, 132)"
}
]
},
"options": {
"scales": {
"x": {
"type": "linear",
"position": "bottom"
}
}
}
}
```