象限图 🌐 Quadrant Chart
象限图是一种将数据分为四个象限的可视化表示。它用于在二维网格上绘制数据点，一个变量表示在 x 轴上，另一个变量表示在 y 轴上。象限的划分是根据特定于所分析数据的一组标准，将图表分为四等份来确定的。象限图常用于识别数据中的模式和趋势，并根据数据点在图表中的位置来确定行动的优先级。它们通常用于商业、营销和风险管理等字段。
示例 🌐 Example
语法 🌐 Syntax
信息
如果图表中没有可用的数据点，坐标轴文本和象限名称将渲染在各自象限的中心位置。 如果有数据点，x 轴标签将从各自象限的左侧渲染，并显示在图表底部，y 轴标签将渲染在各自象限的底部，象限文本将渲染在各自象限的顶部。
信息
对于点 x 和 y，最小值为 0，最大值为 1。
标题 🌐 Title
标题是对图表的简短描述，它将始终显示在图表的顶部。
🌐 The title is a short description of the chart and it will always render on top of the chart.
示例 🌐 Example
quadrantChart
title This is a sample examplex-axis x 轴决定了要在 x 轴上显示什么文本。在 x 轴上有两个部分 左 和 右，你可以传入 两者 或者只传入 左。语句应以 x-axis 开头，然后是 left axis text，接着是分隔符 -->，最后是 right axis text。
🌐 The x-axis determines what text would be displayed in the x-axis. In x-axis there is two part left and right you can pass both or you can pass only left. The statement should start with x-axis then the left axis text followed by the delimiter --> then right axis text.
示例 🌐 Example
x-axis
🌐 The y-axis determines what text would be displayed in the y-axis. In y-axis there is two part top and bottom you can pass both or you can pass only bottom. The statement should start with y-axis then the bottom axis text followed by the delimiter --> then top axis text.
示例 🌐 Example
y-axis
quadrant-[1,2,3,4] 决定了每个象限中显示的文本内容。
🌐 The quadrant-[1,2,3,4] determine what text would be displayed inside the quadrants.
示例 🌐 Example
quadrant-1
点用于在象限图中绘制一个圆。语法是
🌐 Points are used to plot a circle inside the quadrantChart. The syntax is
示例 🌐 Example
Point 1: [0.75, 0.80] 这里点 1 将绘制在右上象限。Point 2: [0.35, 0.24]，这里的点 2 将绘制在左下象限。图表配置 🌐 Chart Configurations
ParameterDescriptionDefault valuechartWidthWidth of the chart500chartHeightHeight of the chart500titlePaddingTop and Bottom padding of the title10titleFontSizeTitle font size20quadrantPaddingPadding outside all the quadrants5quadrantTextTopPaddingQuadrant text top padding when text is drawn on top ( not data points are there)5quadrantLabelFontSizeQuadrant text font size16quadrantInternalBorderStrokeWidthBorder stroke width inside the quadrants1quadrantExternalBorderStrokeWidthQuadrant external border stroke width2xAxisLabelPaddingTop and bottom padding of x-axis text5xAxisLabelFontSizeX-axis texts font size16xAxisPositionPosition of x-axis (top , bottom) if there are points the x-axis will always be rendered in bottom'top'yAxisLabelPaddingLeft and Right padding of y-axis text5yAxisLabelFontSizeY-axis texts font size16yAxisPositionPosition of y-axis (left , right)'left'pointTextPaddingPadding between point and the below text5pointLabelFontSizePoint text font size12pointRadiusRadius of the point to be drawn5图表主题变量 🌐 Chart Theme Variables
ParameterDescriptionquadrant1FillFill color of the top right quadrantquadrant2FillFill color of the top left quadrantquadrant3FillFill color of the bottom left quadrantquadrant4FillFill color of the bottom right quadrantquadrant1TextFillText color of the top right quadrantquadrant2TextFillText color of the top left quadrantquadrant3TextFillText color of the bottom left quadrantquadrant4TextFillText color of the bottom right quadrantquadrantPointFillPoints fill colorquadrantPointTextFillPoints text colorquadrantXAxisTextFillX-axis text colorquadrantYAxisTextFillY-axis text colorquadrantInternalBorderStrokeFillQuadrants inner border colorquadrantExternalBorderStrokeFillQuadrants outer border colorquadrantTitleFillTitle color配置和主题示例 🌐 Example on config and theme
点样式 🌐 Point styling
点可以直接设置样式，也可以使用已定义的共享类
🌐 Points can either be styled directly or with defined shared classes
直接样式mdPoint A: [0.9, 0.0] radius: 12
Point B: [0.8, 0.1] color: #ff3300, radius: 10
Point C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
Point D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0类样式mdPoint A:::class1: [0.9, 0.0]
Point B:::class2: [0.8, 0.1]
Point C:::class3: [0.7, 0.2]
Point D:::class3: [0.7, 0.2]
classDef class1 color: #109060
classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
classDef class3 color: #f00fff, radius : 10可用样式： 🌐 Available styles:
参数描述color点的填充颜色radius点的半径stroke-width点的边框宽度stroke-color点的边框颜色（当未指定 stroke-width 时无效）信息
优先顺序：
直接样式类样式主题样式样式示例 🌐 Example on styling