foldcc/XCharts
1
0
Fork 0
mirror of https://github.com/XCharts-Team/XCharts.git synced 2026-05-14 20:00:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

增加Chart的更多快捷创建图表菜单

Browse Source
This commit is contained in:
monitor1394
2024-01-13 22:37:13 +08:00
parent fff04347fa
commit 9a56985b3a
16 changed files with 722 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
Documentation~/en/api.md
View File

@@ -645,6 +645,21 @@ Background component.
> class in XCharts.Runtime / Inherits from: [BaseChart](#basechart)
Bar chart shows different data through the height of a bar, which is used in rectangular coordinate with at least 1 category axis.
|public method|since|description|
|--|--|--|
|DefaultBarChart()||public void DefaultBarChart()<br/>default bar chart. |
|DefaultCapsuleBarChart()||public void DefaultCapsuleBarChart()<br/>default capsule bar chart. |
|DefaultCapsuleColumnChart()||public void DefaultCapsuleColumnChart()<br/>default capsule column chart. |
|DefaultGroupedBarChart()||public void DefaultGroupedBarChart()<br/>default grouped bar chart. |
|DefaultGroupedColumnChart()||public void DefaultGroupedColumnChart()<br/>default grouped column chart. |
|DefaultPercentBarChart()||public void DefaultPercentBarChart()<br/>default percent bar chart. |
|DefaultPercentColumnChart()||public void DefaultPercentColumnChart()<br/>default percent column chart. |
|DefaultStackedBarChart()||public void DefaultStackedBarChart()<br/>default stacked bar chart. |
|DefaultStackedColumnChart()||public void DefaultStackedColumnChart()<br/>default stacked column chart. |
|DefaultZebraBarChart()||public void DefaultZebraBarChart()<br/>default zebra bar chart. |
|DefaultZebraColumnChart()||public void DefaultZebraColumnChart()<br/>default zebra column chart. |
## BaseAxisTheme
@@ -765,7 +780,7 @@ Background component.
|HasChartComponent&lt;T&gt;()||public bool HasChartComponent&lt;T&gt;()|
|HasSerie()||public bool HasSerie(Type type)|
|HasSerie&lt;T&gt;()||public bool HasSerie&lt;T&gt;() where T : Serie|
|Init()||public void Init(bool defaultChart = true)|
|Init()||public void Init(bool defaultChart = true) { }|
|InitAxisRuntimeData()||public virtual void InitAxisRuntimeData(Axis axis) { }|
|InsertSerie()||public void InsertSerie(Serie serie, int index = -1, bool addToHead = false)|
|InsertSerie&lt;T&gt;()||public T InsertSerie&lt;T&gt;(int index, string serieName = null, bool show = true) where T : Serie|
@@ -977,6 +992,7 @@ The style of border.
> class in XCharts.Runtime / Inherits from: [BaseChart](#basechart)
A candlestick chart is a style of financial chart used to describe price movements of a security, derivative, or currency.
## ChartCached
@@ -1210,8 +1226,8 @@ the comment mark style.
|public method|since|description|
|--|--|--|
|ComponentHandlerAttribute()||public ComponentHandlerAttribute(Type handler)|
|ComponentHandlerAttribute()||public ComponentHandlerAttribute(Type handler, bool allowMultiple)|
|ComponentHandlerAttribute()||public ComponentHandlerAttribute(Type handler, bool allowMultiple, int order = 3)|
|ComponentHandlerAttribute()||public ComponentHandlerAttribute(Type handler, int order = 3)|
## ComponentHelper
@@ -1498,6 +1514,11 @@ Grid layout component. Used to manage the layout of multiple `GridCoord`, and th
> class in XCharts.Runtime / Inherits from: [BaseChart](#basechart)
Heat map mainly use colors to represent values, which must be used along with visualMap component. It can be used in either rectangular coordinate or geographic coordinate. But the behaviour on them are quite different. Rectangular coordinate must have two categories to use it.
|public method|since|description|
|--|--|--|
|DefaultCountHeatmapChart()||public void DefaultCountHeatmapChart()<br/>default count heatmap chart. |
## IconStyle
@@ -1829,6 +1850,18 @@ Legend component.The legend component shows different sets of tags, colors, and
> class in XCharts.Runtime / Inherits from: [BaseChart](#basechart)
Line chart relates all the data points symbol by broken lines, which is used to show the trend of data changing. It could be used in both rectangular coordinate andpolar coordinate.
|public method|since|description|
|--|--|--|
|DefaultAreaLineChart()||public void DefaultAreaLineChart()<br/>default area line chart. |
|DefaultDashLineChart()||public void DefaultDashLineChart()<br/>default dash line chart. |
|DefaultSmoothAreaLineChart()||public void DefaultSmoothAreaLineChart()<br/>default smooth area line chart. |
|DefaultSmoothLineChart()||public void DefaultSmoothLineChart()<br/>default smooth line chart. |
|DefaultStackAreaLineChart()||public void DefaultStackAreaLineChart()<br/>default stack area line chart. |
|DefaultStackLineChart()||public void DefaultStackLineChart()<br/>default stack line chart. |
|DefaultStepLineChart()||public void DefaultStepLineChart()<br/>default step line chart. |
|DefaultTimeLineChart()||public void DefaultTimeLineChart()<br/>default time line chart. |
## LineStyle
@@ -2103,6 +2136,7 @@ padding setting of item or text.
> class in XCharts.Runtime / Inherits from: [BaseChart](#basechart)
Parallel Coordinates is a common way of visualizing high-dimensional geometry and analyzing multivariate data.
## ParallelCoord
@@ -2136,6 +2170,15 @@ Grid component.
> class in XCharts.Runtime / Inherits from: [BaseChart](#basechart)
The pie chart is mainly used for showing proportion of different categories. Each arc length represents the proportion of data quantity.
|public method|since|description|
|--|--|--|
|DefaultAreaRosePieChart()||public void DefaultAreaRosePieChart()<br/>default area rose pie chart. |
|DefaultDonutPieChart()||public void DefaultDonutPieChart()<br/>default donut pie chart. |
|DefaultLabelDonutPieChart()||public void DefaultLabelDonutPieChart()<br/>default label donut pie chart. |
|DefaultLabelPieChart()||public void DefaultLabelPieChart()<br/>default label pie chart. |
|DefaultRadiusRosePieChart()||public void DefaultRadiusRosePieChart()<br/>default rose pie chart. |
## PolarAxisTheme
@@ -2150,6 +2193,13 @@ Grid component.
> class in XCharts.Runtime / Inherits from: [BaseChart](#basechart)
Polar coordinates are usually used in a circular layout.
|public method|since|description|
|--|--|--|
|DefaultHeatmapPolarChart()||public void DefaultHeatmapPolarChart()<br/>default heatmap polar chart. |
|DefaultRadialBarPolarChart()||public void DefaultRadialBarPolarChart()<br/>default radial bar polar chart. |
|DefaultTangentialBarPolarChart()||public void DefaultTangentialBarPolarChart()<br/>default tangential bar polar chart. |
## PolarCoord
@@ -2201,6 +2251,11 @@ Polar coordinate can be used in scatter and line chart. Every polar coordinate h
> class in XCharts.Runtime / Inherits from: [BaseChart](#basechart)
Radar chart is mainly used to show multi-variable data, such as the analysis of a football player's varied attributes. It relies radar component.
|public method|since|description|
|--|--|--|
|DefaultCircleRadarChart()||public void DefaultCircleRadarChart()<br/>default circle radar chart. |
## RadarCoord
@@ -2271,6 +2326,11 @@ Radial axis of polar coordinate.
> class in XCharts.Runtime / Inherits from: [BaseChart](#basechart)
Ring chart is mainly used to show the proportion of each item and the relationship between the items.
|public method|since|description|
|--|--|--|
|DefaultMultipleRingChart()||public void DefaultMultipleRingChart()<br/>default multiple ring chart. |
## RuntimeUtil
@@ -2299,6 +2359,11 @@ Radial axis of polar coordinate.
> class in XCharts.Runtime / Inherits from: [BaseChart](#basechart)
Scatter chart is mainly used to show the relationship between two data dimensions.
|public method|since|description|
|--|--|--|
|DefaultBubbleChart()||public void DefaultBubbleChart()<br/>default bubble chart. |
## SelectStyle
@@ -2773,6 +2838,7 @@ Global parameter setting component. The default value can be used in general, an
> class in XCharts.Runtime / Inherits from: [BaseChart](#basechart)
A simplified bar chart is a simplified mode of a bar chart that provides better performance by simplifying components and configurations.
## SimplifiedCandlestick
@@ -2788,6 +2854,7 @@ Global parameter setting component. The default value can be used in general, an
> class in XCharts.Runtime / Inherits from: [BaseChart](#basechart)
A simplified candlestick chart is a simplified mode of a bar chart that provides better performance by simplifying components and configurations.
## SimplifiedLine
@@ -2803,6 +2870,7 @@ Global parameter setting component. The default value can be used in general, an
> class in XCharts.Runtime / Inherits from: [BaseChart](#basechart)
A simplified line chart is a simplified mode of a bar chart that provides better performance by simplifying components and configurations.
## Since

74
Documentation~/zh/api.md
View File

@@ -645,6 +645,21 @@ slug: /api
> class in XCharts.Runtime / 继承自: [BaseChart](#basechart)
柱状图（或称条形图）是一种通过柱形的高度（横向的情况下则是宽度）来表现数据大小的一种常用图表类型。
|API|版本|描述|
|--|--|--|
|DefaultBarChart()||public void DefaultBarChart()<br/>默认条形图。 |
|DefaultCapsuleBarChart()||public void DefaultCapsuleBarChart()<br/>默认胶囊条形图。 |
|DefaultCapsuleColumnChart()||public void DefaultCapsuleColumnChart()<br/>胶囊柱状图。 |
|DefaultGroupedBarChart()||public void DefaultGroupedBarChart()<br/>默认分组条形图。 |
|DefaultGroupedColumnChart()||public void DefaultGroupedColumnChart()<br/>默认分组柱状图。 |
|DefaultPercentBarChart()||public void DefaultPercentBarChart()<br/>默认百分比条形图。 |
|DefaultPercentColumnChart()||public void DefaultPercentColumnChart()<br/>默认百分比柱状图。 |
|DefaultStackedBarChart()||public void DefaultStackedBarChart()<br/>默认堆叠条形图。 |
|DefaultStackedColumnChart()||public void DefaultStackedColumnChart()<br/>默认堆叠分组柱状图。 |
|DefaultZebraBarChart()||public void DefaultZebraBarChart()<br/>默认斑马条形图。 |
|DefaultZebraColumnChart()||public void DefaultZebraColumnChart()<br/>斑马柱状图。 |
## BaseAxisTheme
@@ -765,7 +780,7 @@ slug: /api
|HasChartComponent&lt;T&gt;()||public bool HasChartComponent&lt;T&gt;()|
|HasSerie()||public bool HasSerie(Type type)|
|HasSerie&lt;T&gt;()||public bool HasSerie&lt;T&gt;() where T : Serie|
|Init()||public void Init(bool defaultChart = true)|
|Init()||public void Init(bool defaultChart = true) { }|
|InitAxisRuntimeData()||public virtual void InitAxisRuntimeData(Axis axis) { }|
|InsertSerie()||public void InsertSerie(Serie serie, int index = -1, bool addToHead = false)|
|InsertSerie&lt;T&gt;()||public T InsertSerie&lt;T&gt;(int index, string serieName = null, bool show = true) where T : Serie|
@@ -977,6 +992,7 @@ slug: /api
> class in XCharts.Runtime / 继承自: [BaseChart](#basechart)
蜡烛图，也叫K线图，用于描述证券、衍生品或货币的价格走势的一种金融图表样式。
## ChartCached
@@ -1210,8 +1226,8 @@ slug: /api
|API|版本|描述|
|--|--|--|
|ComponentHandlerAttribute()||public ComponentHandlerAttribute(Type handler)|
|ComponentHandlerAttribute()||public ComponentHandlerAttribute(Type handler, bool allowMultiple)|
|ComponentHandlerAttribute()||public ComponentHandlerAttribute(Type handler, bool allowMultiple, int order = 3)|
|ComponentHandlerAttribute()||public ComponentHandlerAttribute(Type handler, int order = 3)|
## ComponentHelper
@@ -1498,6 +1514,11 @@ Drawing grid in rectangular coordinate. Line chart, bar chart, and scatter chart
> class in XCharts.Runtime / 继承自: [BaseChart](#basechart)
热力图主要通过颜色去表现数值的大小，必须要配合 visualMap 组件使用。 可以应用在直角坐标系以及地理坐标系上，这两个坐标系上的表现形式相差很大，直角坐标系上必须要使用两个类目轴。
|API|版本|描述|
|--|--|--|
|DefaultCountHeatmapChart()||public void DefaultCountHeatmapChart()<br/>默认计数热力图。 |
## IconStyle
@@ -1829,6 +1850,18 @@ Drawing grid in rectangular coordinate. Line chart, bar chart, and scatter chart
> class in XCharts.Runtime / 继承自: [BaseChart](#basechart)
折线图是用折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势。可用于直角坐标系和极坐标系上。 设置 areaStyle 后可以绘制面积图。
|API|版本|描述|
|--|--|--|
|DefaultAreaLineChart()||public void DefaultAreaLineChart()<br/>默认面积折线图。 |
|DefaultDashLineChart()||public void DefaultDashLineChart()<br/>默认虚线折线图。 |
|DefaultSmoothAreaLineChart()||public void DefaultSmoothAreaLineChart()<br/>默认平滑面积折线图。 |
|DefaultSmoothLineChart()||public void DefaultSmoothLineChart()<br/>默认平滑折线图。 |
|DefaultStackAreaLineChart()||public void DefaultStackAreaLineChart()<br/>默认堆叠面积折线图。 |
|DefaultStackLineChart()||public void DefaultStackLineChart()<br/>默认堆叠折线图。 |
|DefaultStepLineChart()||public void DefaultStepLineChart()<br/>默认阶梯折线图。 |
|DefaultTimeLineChart()||public void DefaultTimeLineChart()<br/>默认时间折线图。 |
## LineStyle
@@ -2103,6 +2136,7 @@ Marquee style. It can be used for the DataZoom component. 选取框样式。可
> class in XCharts.Runtime / 继承自: [BaseChart](#basechart)
平行坐标系，通过绘制垂直于坐标轴的平行线来显示数据的一种可视化图表。
## ParallelCoord
@@ -2136,6 +2170,15 @@ Drawing grid in rectangular coordinate. Line chart, bar chart, and scatter chart
> class in XCharts.Runtime / 继承自: [BaseChart](#basechart)
饼图主要用于显示不同类目占比的情况，通过弧长来反映数据的大小占比。
|API|版本|描述|
|--|--|--|
|DefaultAreaRosePieChart()||public void DefaultAreaRosePieChart()<br/>默认面积玫瑰饼图。 |
|DefaultDonutPieChart()||public void DefaultDonutPieChart()<br/>默认甜甜圈饼图。 |
|DefaultLabelDonutPieChart()||public void DefaultLabelDonutPieChart()<br/>默认带标签甜甜圈饼图。 |
|DefaultLabelPieChart()||public void DefaultLabelPieChart()<br/>默认带标签饼图。 |
|DefaultRadiusRosePieChart()||public void DefaultRadiusRosePieChart()<br/>默认玫瑰饼图。 |
## PolarAxisTheme
@@ -2150,6 +2193,13 @@ Drawing grid in rectangular coordinate. Line chart, bar chart, and scatter chart
> class in XCharts.Runtime / 继承自: [BaseChart](#basechart)
极坐标系，可以用于散点图和折线图。
|API|版本|描述|
|--|--|--|
|DefaultHeatmapPolarChart()||public void DefaultHeatmapPolarChart()<br/>默认极坐标色块图。 |
|DefaultRadialBarPolarChart()||public void DefaultRadialBarPolarChart()<br/>默认径向柱状极坐标图。 |
|DefaultTangentialBarPolarChart()||public void DefaultTangentialBarPolarChart()<br/>默认切向柱状极坐标图。 |
## PolarCoord
@@ -2201,6 +2251,11 @@ Drawing grid in rectangular coordinate. Line chart, bar chart, and scatter chart
> class in XCharts.Runtime / 继承自: [BaseChart](#basechart)
雷达图主要用于显示多变量的数据，例如足球运动员的各项属性分析。依赖雷达组件。
|API|版本|描述|
|--|--|--|
|DefaultCircleRadarChart()||public void DefaultCircleRadarChart()<br/>默认圆形雷达图。 |
## RadarCoord
@@ -2271,6 +2326,11 @@ Radar coordinate conponnet for radar charts. 雷达图坐标系组件，只适
> class in XCharts.Runtime / 继承自: [BaseChart](#basechart)
环形图主要用于显示每一项的比例以及各项之间的关系。
|API|版本|描述|
|--|--|--|
|DefaultMultipleRingChart()||public void DefaultMultipleRingChart()<br/>默认多圆环图。 |
## RuntimeUtil
@@ -2299,6 +2359,11 @@ Radar coordinate conponnet for radar charts. 雷达图坐标系组件，只适
> class in XCharts.Runtime / 继承自: [BaseChart](#basechart)
散点图主要用于展现两个数据维度之间的关系。
|API|版本|描述|
|--|--|--|
|DefaultBubbleChart()||public void DefaultBubbleChart()<br/>默认气泡图。 |
## SelectStyle
@@ -2773,6 +2838,7 @@ serie事件的数据。
> class in XCharts.Runtime / 继承自: [BaseChart](#basechart)
简化柱状图是柱状图的简化模式，通过简化组件和配置，拥有更好的性能。
## SimplifiedCandlestick
@@ -2788,6 +2854,7 @@ serie事件的数据。
> class in XCharts.Runtime / 继承自: [BaseChart](#basechart)
简化K线图是K线图的简化模式，通过简化组件和配置，拥有更好的性能。
## SimplifiedLine
@@ -2803,6 +2870,7 @@ serie事件的数据。
> class in XCharts.Runtime / 继承自: [BaseChart](#basechart)
简化折线图是折线图的简化模式，通过简化组件和配置，拥有更好的性能。
## Since

2
Documentation~/zh/changelog.md
View File

@@ -70,6 +70,8 @@ slug: /changelog
## master
* (2024.01.13) 增加`Chart`的更多快捷创建图表菜单
* (2024.01.12) 屏蔽`Chart`的`Init()`接口，动态创建图表不再需要调用
* (2024.01.09) 增加`Background`的`borderStyle`，给图表默认设置圆角
* (2024.01.07) 修复`Tooltop`的第一个`ContentLabelStyle`设置`color`无效的问题
* (2024.01.01) 增加`BorderStyle`边框样式

152
Runtime/Chart/BarChart.cs
View File

@@ -2,6 +2,10 @@ using UnityEngine;
namespace XCharts.Runtime
{
/// <summary>
/// Bar chart shows different data through the height of a bar, which is used in rectangular coordinate with at least 1 category axis.
/// || 柱状图（或称条形图）是一种通过柱形的高度（横向的情况下则是宽度）来表现数据大小的一种常用图表类型。
/// </summary>
[AddComponentMenu("XCharts/BarChart", 14)]
[ExecuteInEditMode]
[RequireComponent(typeof(RectTransform))]
@@ -22,5 +26,153 @@ namespace XCharts.Runtime
AddXAxisData("x" + (i + 1));
}
}
/// <summary>
/// default zebra column chart.
/// || 斑马柱状图。
/// </summary>
public void DefaultZebraColumnChart()
{
CheckChartInit();
var serie = GetSerie(0);
if (serie == null) return;
serie.barType = BarType.Zebra;
}
/// <summary>
/// default capsule column chart.
/// || 胶囊柱状图。
/// </summary>
public void DefaultCapsuleColumnChart()
{
CheckChartInit();
var serie = GetSerie(0);
if (serie == null) return;
serie.barType = BarType.Capsule;
}
/// <summary>
/// default grouped column chart.
/// || 默认分组柱状图。
/// </summary>
public void DefaultGroupedColumnChart()
{
CheckChartInit();
Bar.AddDefaultSerie(this, GenerateDefaultSerieName());
}
/// <summary>
/// default stacked column chart.
/// || 默认堆叠分组柱状图。
/// </summary>
public void DefaultStackedColumnChart()
{
CheckChartInit();
var serie1 = GetSerie(0);
serie1.stack = "stack1";
var serie2 = Bar.AddDefaultSerie(this, GenerateDefaultSerieName());
serie2.stack = "stack1";
}
/// <summary>
/// default percent column chart.
/// || 默认百分比柱状图。
/// </summary>
public void DefaultPercentColumnChart()
{
CheckChartInit();
var serie1 = GetSerie(0);
serie1.stack = "stack1";
serie1.barPercentStack = true;
var serie2 = Bar.AddDefaultSerie(this, GenerateDefaultSerieName());
serie2.stack = "stack1";
serie2.barPercentStack = true;
}
/// <summary>
/// default bar chart.
/// || 默认条形图。
/// </summary>
public void DefaultBarChart()
{
CheckChartInit();
CovertColumnToBar(this);
}
/// <summary>
/// default zebra bar chart.
/// || 默认斑马条形图。
/// </summary>
public void DefaultZebraBarChart()
{
CheckChartInit();
var serie = GetSerie(0);
serie.barType = BarType.Zebra;
CovertColumnToBar(this);
}
/// <summary>
/// default capsule bar chart.
/// || 默认胶囊条形图。
/// </summary>
public void DefaultCapsuleBarChart()
{
CheckChartInit();
var serie = GetSerie(0);
serie.barType = BarType.Capsule;
CovertColumnToBar(this);
}
/// <summary>
/// default grouped bar chart.
/// || 默认分组条形图。
/// </summary>
public void DefaultGroupedBarChart()
{
CheckChartInit();
Bar.AddDefaultSerie(this, GenerateDefaultSerieName());
CovertColumnToBar(this);
}
/// <summary>
/// default stacked bar chart.
/// || 默认堆叠条形图。
/// </summary>
public void DefaultStackedBarChart()
{
CheckChartInit();
var serie1 = GetSerie(0);
serie1.stack = "stack1";
var serie2 = Bar.AddDefaultSerie(this, GenerateDefaultSerieName());
serie2.stack = "stack1";
CovertColumnToBar(this);
}
/// <summary>
/// default percent bar chart.
/// || 默认百分比条形图。
/// </summary>
public void DefaultPercentBarChart()
{
CheckChartInit();
var serie1 = GetSerie(0);
serie1.stack = "stack1";
serie1.barPercentStack = true;
var serie2 = Bar.AddDefaultSerie(this, GenerateDefaultSerieName());
serie2.stack = "stack1";
serie2.barPercentStack = true;
CovertColumnToBar(this);
}
private static void CovertColumnToBar(BarChart chart)
{
chart.ConvertXYAxis(0);
var xAxis = chart.GetChartComponent<XAxis>();
xAxis.axisLine.show = false;
xAxis.axisTick.show = false;
var yAxis = chart.GetChartComponent<YAxis>();
yAxis.axisTick.alignWithLabel = true;
}
}
}

4
Runtime/Chart/CandlestickChart.cs
View File

@@ -2,6 +2,10 @@ using UnityEngine;
namespace XCharts.Runtime
{
/// <summary>
/// A candlestick chart is a style of financial chart used to describe price movements of a security, derivative, or currency.
/// || 蜡烛图，也叫K线图，用于描述证券、衍生品或货币的价格走势的一种金融图表样式。
/// </summary>
[AddComponentMenu("XCharts/CandlestickChart", 23)]
[ExecuteInEditMode]
[RequireComponent(typeof(RectTransform))]

48
Runtime/Chart/HeatmapChart.cs
View File

@@ -3,6 +3,12 @@ using UnityEngine;
namespace XCharts.Runtime
{
/// <summary>
/// Heat map mainly use colors to represent values, which must be used along with visualMap component.
/// It can be used in either rectangular coordinate or geographic coordinate. But the behaviour on them are quite different. Rectangular coordinate must have two categories to use it.
/// ||热力图主要通过颜色去表现数值的大小，必须要配合 visualMap 组件使用。
/// 可以应用在直角坐标系以及地理坐标系上，这两个坐标系上的表现形式相差很大，直角坐标系上必须要使用两个类目轴。
/// </summary>
[AddComponentMenu("XCharts/HeatmapChart", 18)]
[ExecuteInEditMode]
[RequireComponent(typeof(RectTransform))]
@@ -13,23 +19,26 @@ namespace XCharts.Runtime
protected override void DefaultChart()
{
var grid = EnsureChartComponent<GridCoord>();
grid.UpdateRuntimeData(this);
grid.left = 0.12f;
var heatmapGridWid = 18f;
int xSplitNumber = (int)(grid.context.width / heatmapGridWid);
int ySplitNumber = (int)(grid.context.height / heatmapGridWid);
var xAxis = EnsureChartComponent<XAxis>();
xAxis.type = Axis.AxisType.Category;
xAxis.splitLine.show = false;
xAxis.boundaryGap = true;
xAxis.splitNumber = 10;
xAxis.splitNumber = xSplitNumber / 2;
var yAxis = EnsureChartComponent<YAxis>();
yAxis.type = Axis.AxisType.Category;
yAxis.splitLine.show = false;
yAxis.boundaryGap = true;
yAxis.splitNumber = 10;
yAxis.splitNumber = ySplitNumber;
RemoveData();
var heatmapGridWid = 10f;
int xSplitNumber = (int) (grid.context.width / heatmapGridWid);
int ySplitNumber = (int) (grid.context.height / heatmapGridWid);
Heatmap.AddDefaultSerie(this, GenerateDefaultSerieName());
var visualMap = EnsureChartComponent<VisualMap>();
@@ -72,5 +81,32 @@ namespace XCharts.Runtime
}
}
}
/// <summary>
/// default count heatmap chart.
/// || 默认计数热力图。
/// </summary>
public void DefaultCountHeatmapChart()
{
CheckChartInit();
var serie = GetSerie<Heatmap>(0);
serie.heatmapType = HeatmapType.Count;
var xAxis = GetChartComponent<XAxis>();
xAxis.type = Axis.AxisType.Value;
xAxis.splitNumber = 4;
var yAxis = GetChartComponent<YAxis>();
yAxis.type = Axis.AxisType.Value;
yAxis.splitNumber = 2;
serie.ClearData();
for (int i = 0; i < 100; i++)
{
var x = UnityEngine.Random.Range(0, 100);
var y = UnityEngine.Random.Range(0, 100);
AddData(0, x, y);
}
}
}
}

109
Runtime/Chart/LineChart.cs
View File

@@ -2,6 +2,12 @@ using UnityEngine;
namespace XCharts.Runtime
{
/// <summary>
/// Line chart relates all the data points symbol by broken lines, which is used to show the trend of data changing.
/// It could be used in both rectangular coordinate andpolar coordinate.
/// ||折线图是用折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势。可用于直角坐标系和极坐标系上。
/// 设置 areaStyle 后可以绘制面积图。
/// </summary>
[AddComponentMenu("XCharts/LineChart", 13)]
[ExecuteInEditMode]
[RequireComponent(typeof(RectTransform))]
@@ -22,5 +28,108 @@ namespace XCharts.Runtime
AddXAxisData("x" + (i + 1));
}
}
/// <summary>
/// default area line chart.
/// || 默认面积折线图。
/// </summary>
public void DefaultAreaLineChart()
{
CheckChartInit();
var serie = GetSerie(0);
if (serie == null) return;
serie.EnsureComponent<AreaStyle>();
}
/// <summary>
/// default smooth line chart.
/// || 默认平滑折线图。
/// </summary>
public void DefaultSmoothLineChart()
{
CheckChartInit();
var serie = GetSerie(0);
if (serie == null) return;
serie.lineType = LineType.Smooth;
}
/// <summary>
/// default smooth area line chart.
/// || 默认平滑面积折线图。
/// </summary>
public void DefaultSmoothAreaLineChart()
{
CheckChartInit();
var serie = GetSerie(0);
if (serie == null) return;
serie.EnsureComponent<AreaStyle>();
serie.lineType = LineType.Smooth;
}
/// <summary>
/// default stack line chart.
/// || 默认堆叠折线图。
/// </summary>
public void DefaultStackLineChart()
{
CheckChartInit();
var serie1 = GetSerie(0);
if (serie1 == null) return;
serie1.stack = "stack1";
var serie2 = Line.AddDefaultSerie(this, GenerateDefaultSerieName());
serie2.stack = "stack1";
}
/// <summary>
/// default stack area line chart.
/// || 默认堆叠面积折线图。
/// </summary>
public void DefaultStackAreaLineChart()
{
CheckChartInit();
var serie1 = GetSerie(0);
if (serie1 == null) return;
serie1.EnsureComponent<AreaStyle>();
serie1.stack = "stack1";
var serie2 = Line.AddDefaultSerie(this, GenerateDefaultSerieName());
serie2.EnsureComponent<AreaStyle>();
serie2.stack = "stack1";
}
/// <summary>
/// default step line chart.
/// || 默认阶梯折线图。
/// </summary>
public void DefaultStepLineChart()
{
CheckChartInit();
var serie = GetSerie(0);
if (serie == null) return;
serie.lineType = LineType.StepMiddle;
}
/// <summary>
/// default dash line chart.
/// || 默认虚线折线图。
/// </summary>
public void DefaultDashLineChart()
{
CheckChartInit();
var serie = GetSerie(0);
if (serie == null) return;
serie.lineType = LineType.Normal;
serie.lineStyle.type = LineStyle.Type.Dashed;
}
/// <summary>
/// default time line chart.
/// || 默认时间折线图。
/// </summary>
public void DefaultTimeLineChart()
{
CheckChartInit();
var xAxis = GetChartComponent<XAxis>();
xAxis.type = Axis.AxisType.Time;
}
}
}

4
Runtime/Chart/ParallelChart.cs
View File

@@ -3,6 +3,10 @@ using UnityEngine;
namespace XCharts.Runtime
{
/// <summary>
/// Parallel Coordinates is a common way of visualizing high-dimensional geometry and analyzing multivariate data.
/// || 平行坐标系，通过绘制垂直于坐标轴的平行线来显示数据的一种可视化图表。
/// </summary>
[AddComponentMenu("XCharts/ParallelChart", 25)]
[ExecuteInEditMode]
[RequireComponent(typeof(RectTransform))]

68
Runtime/Chart/PieChart.cs
View File

@@ -2,6 +2,10 @@ using UnityEngine;
namespace XCharts.Runtime
{
/// <summary>
/// The pie chart is mainly used for showing proportion of different categories. Each arc length represents the proportion of data quantity.
/// || 饼图主要用于显示不同类目占比的情况，通过弧长来反映数据的大小占比。
/// </summary>
[AddComponentMenu("XCharts/PieChart", 15)]
[ExecuteInEditMode]
[RequireComponent(typeof(RectTransform))]
@@ -17,5 +21,69 @@ namespace XCharts.Runtime
RemoveData();
Pie.AddDefaultSerie(this, GenerateDefaultSerieName());
}
/// <summary>
/// default label pie chart.
/// || 默认带标签饼图。
/// </summary>
public void DefaultLabelPieChart()
{
CheckChartInit();
var serie = GetSerie(0);
serie.EnsureComponent<LabelStyle>();
serie.EnsureComponent<LabelLine>();
}
/// <summary>
/// default donut pie chart.
/// || 默认甜甜圈饼图。
/// </summary>
public void DefaultDonutPieChart()
{
CheckChartInit();
var serie = GetSerie(0);
serie.radius[0] = 0.20f;
serie.radius[1] = 0.28f;
}
/// <summary>
/// default label donut pie chart.
/// || 默认带标签甜甜圈饼图。
/// </summary>
public void DefaultLabelDonutPieChart()
{
CheckChartInit();
var serie = GetSerie(0);
serie.radius[0] = 0.20f;
serie.radius[1] = 0.28f;
serie.EnsureComponent<LabelStyle>();
serie.EnsureComponent<LabelLine>();
}
/// <summary>
/// default rose pie chart.
/// || 默认玫瑰饼图。
/// </summary>
public void DefaultRadiusRosePieChart()
{
CheckChartInit();
var serie = GetSerie(0);
serie.pieRoseType = RoseType.Radius;
serie.EnsureComponent<LabelStyle>();
serie.EnsureComponent<LabelLine>();
}
/// <summary>
/// default area rose pie chart.
/// || 默认面积玫瑰饼图。
/// </summary>
public void DefaultAreaRosePieChart()
{
CheckChartInit();
var serie = GetSerie(0);
serie.pieRoseType = RoseType.Area;
serie.EnsureComponent<LabelStyle>();
serie.EnsureComponent<LabelLine>();
}
}
}

136
Runtime/Chart/PolarChart.cs
View File

@@ -1,7 +1,12 @@
using UnityEngine;
using System.Collections.Generic;
namespace XCharts.Runtime
{
/// <summary>
/// Polar coordinates are usually used in a circular layout.
/// || 极坐标系，可以用于散点图和折线图。
/// </summary>
[AddComponentMenu("XCharts/PolarChart", 23)]
[ExecuteInEditMode]
[RequireComponent(typeof(RectTransform))]
@@ -13,7 +18,8 @@ namespace XCharts.Runtime
{
EnsureChartComponent<PolarCoord>();
EnsureChartComponent<AngleAxis>();
EnsureChartComponent<RadiusAxis>();
var radiusAxis = EnsureChartComponent<RadiusAxis>();
radiusAxis.axisLabel.show = false;
var tooltip = EnsureChartComponent<Tooltip>();
tooltip.type = Tooltip.Type.Corss;
@@ -23,6 +29,7 @@ namespace XCharts.Runtime
var serie = Line.AddDefaultSerie(this, GenerateDefaultSerieName());
serie.SetCoord<PolarCoord>();
serie.ClearData();
serie.symbol.show = false;
for (int i = 0; i <= 360; i++)
{
var t = i / 180f * Mathf.PI;
@@ -30,5 +37,132 @@ namespace XCharts.Runtime
AddData(0, Mathf.Abs(r), i);
}
}
/// <summary>
/// default radial bar polar chart.
/// || 默认径向柱状极坐标图。
/// </summary>
public void DefaultRadialBarPolarChart()
{
CheckChartInit();
RemoveData();
var polarCoord = GetChartComponent<PolarCoord>();
polarCoord.radius[0] = 20;
var categorys = new string[] { "a", "b", "c", "d" };
var radiusAxis = GetChartComponent<RadiusAxis>();
radiusAxis.splitNumber = 4;
var angleAxis = GetChartComponent<AngleAxis>();
angleAxis.type = Axis.AxisType.Category;
angleAxis.startAngle = 75;
angleAxis.boundaryGap = true;
angleAxis.splitLine.show = false;
foreach (var category in categorys)
angleAxis.AddData(category);
var serie = AddSerie<Bar>(GenerateDefaultSerieName());
serie.SetCoord<PolarCoord>();
serie.ClearData();
serie.symbol.show = false;
for (int i = 0; i < categorys.Length; i++)
{
var x = UnityEngine.Random.Range(0f, 4f);
var y = i;
AddData(0, x, y, categorys[i]);
}
}
/// <summary>
/// default tangential bar polar chart.
/// || 默认切向柱状极坐标图。
/// </summary>
public void DefaultTangentialBarPolarChart()
{
CheckChartInit();
RemoveData();
var polarCoord = GetChartComponent<PolarCoord>();
polarCoord.radius[0] = 20;
var categorys = new string[] { "a", "b", "c", "d" };
var radiusAxis = GetChartComponent<RadiusAxis>();
radiusAxis.type = Axis.AxisType.Category;
radiusAxis.splitNumber = 4;
radiusAxis.boundaryGap = true;
var angleAxis = GetChartComponent<AngleAxis>();
angleAxis.type = Axis.AxisType.Value;
radiusAxis.splitNumber = 12;
angleAxis.startAngle = 75;
angleAxis.max = 4;
foreach (var category in categorys)
radiusAxis.AddData(category);
var serie = AddSerie<Bar>(GenerateDefaultSerieName());
serie.SetCoord<PolarCoord>();
serie.ClearData();
serie.symbol.show = false;
for (int i = 0; i < categorys.Length; i++)
{
var x = UnityEngine.Random.Range(0f, 4f);
var y = i;
AddData(0, y, x, categorys[i]);
}
}
/// <summary>
/// default heatmap polar chart.
/// || 默认极坐标色块图。
/// </summary>
public void DefaultHeatmapPolarChart()
{
CheckChartInit();
RemoveData();
var visualMap = EnsureChartComponent<VisualMap>();
var colors = new List<string> { "#BAE7FF", "#1890FF", "#1028ff" };
visualMap.AddColors(colors);
visualMap.autoMinMax = true;
var polarCoord = GetChartComponent<PolarCoord>();
polarCoord.radius[0] = 20;
var categorys = new string[] { "a", "b", "c", "d" };
var radiusAxis = GetChartComponent<RadiusAxis>();
radiusAxis.type = Axis.AxisType.Category;
radiusAxis.splitNumber = 4;
radiusAxis.boundaryGap = true;
var angleAxis = GetChartComponent<AngleAxis>();
angleAxis.type = Axis.AxisType.Category;
angleAxis.boundaryGap = true;
angleAxis.splitNumber = 24;
angleAxis.startAngle = 75;
angleAxis.max = 4;
foreach (var category in categorys)
radiusAxis.AddData(category);
for (int i = 0; i < 24; i++)
{
angleAxis.AddData(i + "h");
}
var serie = AddSerie<Heatmap>(GenerateDefaultSerieName());
serie.SetCoord<PolarCoord>();
serie.ClearData();
serie.symbol.show = false;
for (int x = 0; x < 4; x++)
{
for (int y = 0; y < 24; y++)
{
AddData(0, x, y, UnityEngine.Random.Range(0f, 4f));
}
}
}
}
}

15
Runtime/Chart/RadarChart.cs
View File

@@ -2,6 +2,10 @@ using UnityEngine;
namespace XCharts.Runtime
{
/// <summary>
/// Radar chart is mainly used to show multi-variable data, such as the analysis of a football player's varied attributes. It relies radar component.
/// || 雷达图主要用于显示多变量的数据，例如足球运动员的各项属性分析。依赖雷达组件。
/// </summary>
[AddComponentMenu("XCharts/RadarChart", 16)]
[ExecuteInEditMode]
[RequireComponent(typeof(RectTransform))]
@@ -16,5 +20,16 @@ namespace XCharts.Runtime
AddChartComponent<RadarCoord>();
Radar.AddDefaultSerie(this, GenerateDefaultSerieName());
}
/// <summary>
/// default circle radar chart.
/// || 默认圆形雷达图。
/// </summary>
public void DefaultCircleRadarChart()
{
CheckChartInit();
var radarCoord = GetChartComponent<RadarCoord>();
radarCoord.shape = RadarCoord.Shape.Circle;
}
}
}

17
Runtime/Chart/RingChart.cs
View File

@@ -2,6 +2,10 @@ using UnityEngine;
namespace XCharts.Runtime
{
/// <summary>
/// Ring chart is mainly used to show the proportion of each item and the relationship between the items.
/// || 环形图主要用于显示每一项的比例以及各项之间的关系。
/// </summary>
[AddComponentMenu("XCharts/RingChart", 20)]
[ExecuteInEditMode]
[RequireComponent(typeof(RectTransform))]
@@ -15,5 +19,18 @@ namespace XCharts.Runtime
RemoveData();
Ring.AddDefaultSerie(this, GenerateDefaultSerieName());
}
/// <summary>
/// default multiple ring chart.
/// || 默认多圆环图。
/// </summary>
public void DefaultMultipleRingChart()
{
CheckChartInit();
var serie = GetSerie(0);
serie.label.show = false;
AddData(0, UnityEngine.Random.Range(30, 90), 100, "data2");
AddData(0, UnityEngine.Random.Range(30, 90), 100, "data3");
}
}
}

20
Runtime/Chart/ScatterChart.cs
View File

@@ -2,6 +2,10 @@ using UnityEngine;
namespace XCharts.Runtime
{
/// <summary>
/// Scatter chart is mainly used to show the relationship between two data dimensions.
/// || 散点图主要用于展现两个数据维度之间的关系。
/// </summary>
[AddComponentMenu("XCharts/ScatterChart", 17)]
[ExecuteInEditMode]
[RequireComponent(typeof(RectTransform))]
@@ -24,5 +28,21 @@ namespace XCharts.Runtime
RemoveData();
Scatter.AddDefaultSerie(this, GenerateDefaultSerieName());
}
/// <summary>
/// default bubble chart.
/// || 默认气泡图。
/// </summary>
public void DefaultBubbleChart()
{
CheckChartInit();
var serie = GetSerie(0);
serie.itemStyle.borderWidth = 2f;
serie.itemStyle.borderColor = theme.GetColor(0);
serie.itemStyle.opacity = 0.35f;
serie.symbol.sizeType = SymbolSizeType.FromData;
serie.symbol.dataScale = 0.3f;
serie.symbol.maxSize = 30f;
}
}
}

4
Runtime/Chart/SimplifiedBarChart.cs
View File

@@ -2,6 +2,10 @@ using UnityEngine;
namespace XCharts.Runtime
{
/// <summary>
/// A simplified bar chart is a simplified mode of a bar chart that provides better performance by simplifying components and configurations.
/// || 简化柱状图是柱状图的简化模式，通过简化组件和配置，拥有更好的性能。
/// </summary>
[AddComponentMenu("XCharts/SimplifiedBarChart", 27)]
[ExecuteInEditMode]
[RequireComponent(typeof(RectTransform))]

4
Runtime/Chart/SimplifiedCandlestickChart.cs
View File

@@ -2,6 +2,10 @@ using UnityEngine;
namespace XCharts.Runtime
{
/// <summary>
/// A simplified candlestick chart is a simplified mode of a bar chart that provides better performance by simplifying components and configurations.
/// || 简化K线图是K线图的简化模式，通过简化组件和配置，拥有更好的性能。
/// </summary>
[AddComponentMenu("XCharts/SimplifiedCandlestickChart", 28)]
[ExecuteInEditMode]
[RequireComponent(typeof(RectTransform))]

4
Runtime/Chart/SimplifiedLineChart.cs
View File

@@ -2,6 +2,10 @@ using UnityEngine;
namespace XCharts.Runtime
{
/// <summary>
/// A simplified line chart is a simplified mode of a bar chart that provides better performance by simplifying components and configurations.
/// || 简化折线图是折线图的简化模式，通过简化组件和配置，拥有更好的性能。
/// </summary>
[AddComponentMenu("XCharts/SimplifiedLineChart", 26)]
[ExecuteInEditMode]
[RequireComponent(typeof(RectTransform))]