文章目录简介源码解析图表配置简介XY图绝对是大多数人接触到的第一种图像了与笛卡尔直角坐标系同步简单示例如下blogsJanFebMarAprMayJunJulAugSepOctNovDec14514013513012512011511010510095blogs源码解析上图源码如下--- config: xyChart: width: 600 height: 300 themeVariables: xyChart: titleColor: #ff0000 --- xychart title blogs y-axis blogs 95 -- 145 x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec] bar [125, 106, 106, 103, 100, 100, 102, 111, 100, 120, 131, 144] line [112, 112, 112, 112, 112, 112, 112, 112, 112, 112, 112, 112]该图可分为两个部分在xychart的绘图区上面是配置区将xyChart的宽度设为600高度设为300themeVariables用于设置图表颜色上图将标题颜色设为红色。绘图区有5行【title】即xychart标题可缺省【y-axis】为y坐标的标签和范围上图将其标签设为blogs范围是[ 95 , 145 ] [95,145][95,145]【x-axis】是x坐标的采样点实质上是自然序列的映射。【bar】是条形图的y yy轴数据与x-axis中的点一一对应。【line】是折线图的y yy轴数据同样与x-axis中的点一一对应。其中bar和line可以设置多个。图表配置和mermaid的其他图表一样xychart也可以指定方向缺省时默认为xychart vertical也可以设为xychart horizontal。【config: xyChart:】可设参数包括参数描述默认值width图表宽度700height图表高度500titlePadding标题上下内边距10titleFontSize标题字体大小20showTitle是否显示标题trueshowLegend是否为命名曲线显示图例truelegendFontSize图例字体大小14legendPadding图例周围的内边距10xAxisx轴配置AxisConfigyAxisy轴配置AxisConfigchartOrientation‘vertical’ 或 ‘horizontal’‘vertical’plotReservedSpacePercent图表中各图形占用的最小空间百分比50showDataLabel是否在柱状图内显示对应数值falseshowDataLabelOutsideBar如果显示数据标签则是否显示在柱外falsethemeVariables可设参数如下表所示参数设置颜色的对象backgroundColor背景色titleColor标题文字dataLabelColor数据标签legendTextColor图例文字xAxisLabelColorx 轴标签xAxisTitleColorx 轴标题xAxisTickColorx 轴刻度xAxisLineColorx 轴线yAxisLabelColory 轴标签yAxisTitleColory 轴标题yAxisTickColory 轴刻度yAxisLineColory 轴线plotColorPalette颜色字符串用逗号分隔例如 “#f3456, #43445”
用mermaid画条形图和折线图：xychart
文章目录简介源码解析图表配置简介XY图绝对是大多数人接触到的第一种图像了与笛卡尔直角坐标系同步简单示例如下blogsJanFebMarAprMayJunJulAugSepOctNovDec14514013513012512011511010510095blogs源码解析上图源码如下--- config: xyChart: width: 600 height: 300 themeVariables: xyChart: titleColor: #ff0000 --- xychart title blogs y-axis blogs 95 -- 145 x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec] bar [125, 106, 106, 103, 100, 100, 102, 111, 100, 120, 131, 144] line [112, 112, 112, 112, 112, 112, 112, 112, 112, 112, 112, 112]该图可分为两个部分在xychart的绘图区上面是配置区将xyChart的宽度设为600高度设为300themeVariables用于设置图表颜色上图将标题颜色设为红色。绘图区有5行【title】即xychart标题可缺省【y-axis】为y坐标的标签和范围上图将其标签设为blogs范围是[ 95 , 145 ] [95,145][95,145]【x-axis】是x坐标的采样点实质上是自然序列的映射。【bar】是条形图的y yy轴数据与x-axis中的点一一对应。【line】是折线图的y yy轴数据同样与x-axis中的点一一对应。其中bar和line可以设置多个。图表配置和mermaid的其他图表一样xychart也可以指定方向缺省时默认为xychart vertical也可以设为xychart horizontal。【config: xyChart:】可设参数包括参数描述默认值width图表宽度700height图表高度500titlePadding标题上下内边距10titleFontSize标题字体大小20showTitle是否显示标题trueshowLegend是否为命名曲线显示图例truelegendFontSize图例字体大小14legendPadding图例周围的内边距10xAxisx轴配置AxisConfigyAxisy轴配置AxisConfigchartOrientation‘vertical’ 或 ‘horizontal’‘vertical’plotReservedSpacePercent图表中各图形占用的最小空间百分比50showDataLabel是否在柱状图内显示对应数值falseshowDataLabelOutsideBar如果显示数据标签则是否显示在柱外falsethemeVariables可设参数如下表所示参数设置颜色的对象backgroundColor背景色titleColor标题文字dataLabelColor数据标签legendTextColor图例文字xAxisLabelColorx 轴标签xAxisTitleColorx 轴标题xAxisTickColorx 轴刻度xAxisLineColorx 轴线yAxisLabelColory 轴标签yAxisTitleColory 轴标题yAxisTickColory 轴刻度yAxisLineColory 轴线plotColorPalette颜色字符串用逗号分隔例如 “#f3456, #43445”
