增加圆环饼图的圆角支持

This commit is contained in:
monitor1394
2019-12-03 09:34:18 +08:00
parent 74b304a72d
commit b29fc0ed02
3 changed files with 136 additions and 60 deletions

View File

@@ -1,6 +1,7 @@
# 更新日志 # 更新日志
* (2019.12.03) 增加圆环饼图的圆角支持
* (2019.12.03) 增加数据更新动画 * (2019.12.03) 增加数据更新动画
* (2019.11.30) 增加`GaugeChart`仪表盘 * (2019.11.30) 增加`GaugeChart`仪表盘
* (2019.11.22) 修复`BarChart`清空数据重新赋值后`SerieLabel`显示异常的问题 * (2019.11.22) 修复`BarChart`清空数据重新赋值后`SerieLabel`显示异常的问题

View File

@@ -12,7 +12,13 @@
* [Legend 图例](#Legend) * [Legend 图例](#Legend)
* [Radar 雷达](#Radar) * [Radar 雷达](#Radar)
* [Series 系列](#Series) * [Series 系列](#Series)
* [Serie.Gauge 仪表盘](#Serie.Gauge) * [Serie-Line 折线图](#Serie-Line)
* [Serie-Bar 柱形图](#Serie-Bar)
* [Serie-Pie 饼图](#Serie-Pie)
* [Serie-Radar 雷达图](#Serie-Radar)
* [Serie-Scatter 散点图](#Serie-Scatter)
* [Serie-Heatmap 热力图](#Serie-Heatmap)
* [Serie-Gauge 仪表盘](#Serie-Gauge)
* [Settings 设置](#Settings) * [Settings 设置](#Settings)
* [Theme 主题](#Theme) * [Theme 主题](#Theme)
* [Tooltip 提示框](#Tooltip) * [Tooltip 提示框](#Tooltip)
@@ -40,7 +46,6 @@
## `Theme` ## `Theme`
---
主题组件。主题用来配置图表的全局配色等其他参数。 主题组件。主题用来配置图表的全局配色等其他参数。
相关参数: 相关参数:
@@ -73,7 +78,6 @@
## `Title` ## `Title`
---
标题组件,包含主标题和副标题。 标题组件,包含主标题和副标题。
相关参数: 相关参数:
@@ -99,7 +103,6 @@
## `Legend` ## `Legend`
---
图例组件。图例组件展现了不同系列的标记,颜色和名字。可以通过点击图例控制哪些系列不显示。 图例组件。图例组件展现了不同系列的标记,颜色和名字。可以通过点击图例控制哪些系列不显示。
相关参数: 相关参数:
@@ -131,8 +134,6 @@
## `Radar` ## `Radar`
---
* `shape`:雷达图绘制类型。 * `shape`:雷达图绘制类型。
* `Polygon`:多边形。 * `Polygon`:多边形。
* `Circle`:圆形。 * `Circle`:圆形。
@@ -149,8 +150,6 @@
## `Radar.Indicator` ## `Radar.Indicator`
---
* `name`:指示器名称。 * `name`:指示器名称。
* `max`:指示器的最大值,默认为 0 无限制。 * `max`:指示器的最大值,默认为 0 无限制。
* `min`:指示器的最小值,默认为 0 无限制。 * `min`:指示器的最小值,默认为 0 无限制。
@@ -158,8 +157,6 @@
## `TextStyle` ## `TextStyle`
---
* `rotate`:旋转。 * `rotate`:旋转。
* `offset`:偏移。 * `offset`:偏移。
* `color`:颜色。 * `color`:颜色。
@@ -168,8 +165,6 @@
## `Tooltip` ## `Tooltip`
---
提示框组件。 提示框组件。
相关参数: 相关参数:
@@ -195,8 +190,6 @@
## `DataZoom` ## `DataZoom`
---
区域缩放组件。用于区域缩放,从而能自由关注细节的数据信息,或者概览数据整体,或者去除离群点的影响。 区域缩放组件。用于区域缩放,从而能自由关注细节的数据信息,或者概览数据整体,或者去除离群点的影响。
目前只支持控制 `X` 轴。 目前只支持控制 `X` 轴。
@@ -229,8 +222,6 @@
## `VisualMap` ## `VisualMap`
---
视觉映射组件。用于进行『视觉编码』,也就是将数据映射到视觉元素(视觉通道)。 视觉映射组件。用于进行『视觉编码』,也就是将数据映射到视觉元素(视觉通道)。
* `enable`:开启或关闭视觉映射功能。 * `enable`:开启或关闭视觉映射功能。
@@ -261,8 +252,6 @@
## `Grid` ## `Grid`
---
网格组件。直角坐标系内绘图网格,单个 `grid` 内最多可以放置上下两个 `X` 轴,左右两个 `Y` 轴。可以在网格上绘制折线图,柱状图,散点图(气泡图)。目前最多只能存在一个 `grid` 组件。 网格组件。直角坐标系内绘图网格,单个 `grid` 内最多可以放置上下两个 `X` 轴,左右两个 `Y` 轴。可以在网格上绘制折线图,柱状图,散点图(气泡图)。目前最多只能存在一个 `grid` 组件。
相关参数: 相关参数:
@@ -293,8 +282,6 @@
## `XAxis` ## `XAxis`
---
直角坐标系 `grid` 中的 `X` 轴。单个 `grid` 组件最多只能放上下两个 `X` 轴。两个 `X` 轴存储在 `xAxises` 中。 直角坐标系 `grid` 中的 `X` 轴。单个 `grid` 组件最多只能放上下两个 `X` 轴。两个 `X` 轴存储在 `xAxises` 中。
相关参数: 相关参数:
@@ -336,8 +323,6 @@
## `YAxis` ## `YAxis`
---
直角坐标系 `grid` 中的 `Y` 轴。单个 `grid` 组件最多只能放左右两个 `Y` 轴。两个 `Y` 轴存储在 `yAxises` 中。 直角坐标系 `grid` 中的 `Y` 轴。单个 `grid` 组件最多只能放左右两个 `Y` 轴。两个 `Y` 轴存储在 `yAxises` 中。
相关参数: 相关参数:
@@ -378,8 +363,6 @@
## `Series` ## `Series`
---
系列列表。每个系列通过 type 决定自己的图表类型。 系列列表。每个系列通过 type 决定自己的图表类型。
相关参数: 相关参数:
@@ -436,17 +419,141 @@
* `pieSpace`:饼图项间的空隙留白。 * `pieSpace`:饼图项间的空隙留白。
* `pieCenter`:饼图的中心点。 * `pieCenter`:饼图的中心点。
* `pieRadius`:饼图的半径。`radius[0]` 表示内径,`radius[1]` 表示外径。 * `pieRadius`:饼图的半径。`radius[0]` 表示内径,`radius[1]` 表示外径。
* `arcShaped`:启用弧形圆角效果。目前只在仪表盘和圆环饼图中有效。
* `label`:图形上的文本标签 [SerieLabel](#SerieLabel),可用于说明图形的一些数据信息,比如值,名称等。 * `label`:图形上的文本标签 [SerieLabel](#SerieLabel),可用于说明图形的一些数据信息,比如值,名称等。
* `emphasis`:高亮样式 [Emphasis](#Emphasis)。 * `emphasis`:高亮样式 [Emphasis](#Emphasis)。
* `animation`:起始动画 [SerieAnimation](#SerieAnimation)。 * `animation`:起始动画 [SerieAnimation](#SerieAnimation)。
* `lineArrow`:折线图的箭头 [LineArrow](#LineArrow)。 * `lineArrow`:折线图的箭头 [LineArrow](#LineArrow)。
* `data`:系列中的数据项 [SerieData](#SerieData) 数组,可以设置`1``n`维数据。 * `data`:系列中的数据项 [SerieData](#SerieData) 数组,可以设置`1``n`维数据。
相关接口: ## `Serie-Line`
## `Serie.Gauge` 折线图系列。
--- * `show`:系列是否显示在图表上。
* `type``Line`
* `name`:系列名称。用于 `tooltip` 的显示,`legend` 的图例筛选。
* `stack`:数据堆叠。同个类目轴上系列配置相同的 `stack` 值后,后一个系列的值会在前一个系列的值上相加。
* `axisIndex`:使用的坐标轴轴的 `index`,在单个图表实例中存在多个坐标轴轴的时候有用。
* `minShow`:系列显示数据的最小索引。
* `maxShow`:系列显示数据的最大索引。
* `maxCache`:系列中可缓存的最大数据量。默认为`0`没有限制大于0时超过指定值会移除旧数据再插入新数据。
* `sampleDist`采样的最小水平像素距离,默认为`0`时不采样。当两个数据点间的水平像素距离小于该值时,开启采样,保证两点间的水平像素距离不小于该值。
* `sampleType`:采样类型。当`sampleDist`大于`0`时有效。支持以下五种采样类型:
* `Peak`:取峰值。当过滤点的平均值大于等于`sampleAverage`时,取最大值;反之取最小值。
* `Average`:取过滤点的平均值。
* `Max`:取过滤点的最大值。
* `Min`:取过滤点的最小值。
* `Sum`:取过滤点之和。
* `sampleAverage`:设定的采样平均值。当 `sampleType``Peak` 时,用于和过滤数据的平均值做对比是取最大值还是最小值。默认为`0`时会实时计算所有数据的平均值。
* `areaStyle`:区域填充样式 [AreaStyle](#AreaStyle)。
* `symbol`:标记的图形 [SerieSymbol](#SerieSymbol)。
* `lineType`:折线图样式类型。支持以下十种类型:
* `Normal`:普通折线图。
* `Smooth`:平滑曲线。
* `SmoothDash`:平滑虚线。
* `StepStart`:阶梯线图:当前点。
* `StepMiddle`:阶梯线图:当前点和下一个点的中间。
* `StepEnd`:阶梯线图:下一个拐点。
* `Dash`:虚线。
* `Dot`:点线。
* `DashDot`:点划线。
* `DashDotDot`:双点划线。
* `lineStyle`:线条样式 [LineStyle](#LineStyle)。
* `label`:图形上的文本标签 [SerieLabel](#SerieLabel),可用于说明图形的一些数据信息,比如值,名称等。
* `emphasis`:高亮样式 [Emphasis](#Emphasis)。
* `animation`:起始动画 [SerieAnimation](#SerieAnimation)。
* `lineArrow`:折线图的箭头 [LineArrow](#LineArrow)。
* `data`:系列中的数据项 [SerieData](#SerieData) 数组,可以设置`1``n`维数据。
## `Serie-Bar`
折线图系列。
* `show`:系列是否显示在图表上。
* `type``Bar`
* `name`:系列名称。用于 `tooltip` 的显示,`legend` 的图例筛选。
* `stack`:数据堆叠。同个类目轴上系列配置相同的 `stack` 值后,后一个系列的值会在前一个系列的值上相加。
* `axisIndex`:使用的坐标轴轴的 `index`,在单个图表实例中存在多个坐标轴轴的时候有用。
* `minShow`:系列显示数据的最小索引。
* `maxShow`:系列显示数据的最大索引。
* `maxCache`:系列中可缓存的最大数据量。默认为`0`没有限制大于0时超过指定值会移除旧数据再插入新数据。
* `barType`:柱状图类型。以下几种类型:
* `Normal`:普通柱状图。
* `Zebra`:斑马柱状图。
* `Capsule`:胶囊柱状图。
* `barPercentStack`:是否百分比堆叠柱状图,相同 `stack``serie` 只要有一个 `barPercentStack``true`,则就显示成百分比堆叠柱状图。
* `barWidth`:柱条的宽度,不设时自适应。支持设置成相对于类目宽度的百分比。
* `barGap`:不同系列的柱间距离。为百分比(如 `'0.3f'`,表示柱子宽度的 `30%`)。如果想要两个系列的柱子重叠,可以设置 `barGap``'-1f'`。这在用柱子做背景的时候有用。在同一坐标系上,此属性会被多个 `'bar'` 系列共享。此属性应设置于此坐标系中最后一个 `'bar'` 系列上才会生效,并且是对此坐标系中所有 `'bar'` 系列生效。
* `barCategoryGap`同一系列的柱间距离默认为类目间距的20%,可设固定值。在同一坐标系上,此属性会被多个 `'bar'` 系列共享。此属性应设置于此坐标系中最后一个 `'bar'` 系列上才会生效,并且是对此坐标系中所有 `'bar'` 系列生效。
* `barZebraWidth`:斑马线的粗细。`barType``Zebra` 时有效。
* `barZebraGap`:斑马线的间距。`barType``Zebra` 时有效。
* `symbol`:标记的图形 [SerieSymbol](#SerieSymbol)。
* `itemStyle`:柱条样式 [ItemStyle](#ItemStyle)。
* `areaStyle`:区域填充样式 [AreaStyle](#AreaStyle)。
* `label`:图形上的文本标签 [SerieLabel](#SerieLabel),可用于说明图形的一些数据信息,比如值,名称等。
* `emphasis`:高亮样式 [Emphasis](#Emphasis)。
* `animation`:起始动画 [SerieAnimation](#SerieAnimation)。
* `data`:系列中的数据项 [SerieData](#SerieData) 数组,可以设置`1``n`维数据。
## `Serie-Pie`
饼图系列。
* `show`:系列是否显示在图表上。
* `type``Pie`
* `name`:系列名称。用于 `tooltip` 的显示,`legend` 的图例筛选。
* `pieRoseType`:南丁格尔玫瑰图类型,支持以下类型:
* `None`:不展示成南丁格尔玫瑰图。
* `Radius`:扇区圆心角展现数据的百分比,半径展现数据的大小。
* `Area`:所有扇区圆心角相同,仅通过半径展现数据大小。
* `space`:扇区间隙。
* `center`中心点坐标。当值为0-1的浮点数时表示百分比。
* `radius`:半径。`radius[0]`为内径,`radius[1]`为外径。当内径大于0时即为圆环图。
* `arcShaped`:是否启用圆角效果。只在圆环图中有效。
* `label`:图形上的文本标签 [SerieLabel](#SerieLabel),可用于说明图形的一些数据信息,比如值,名称等。
* `emphasis`:高亮样式 [Emphasis](#Emphasis)。
* `animation`:起始动画 [SerieAnimation](#SerieAnimation)。
* `data`:系列中的数据项 [SerieData](#SerieData) 数组,可以设置`1``n`维数据。
## `Serie-Radar`
雷达图系列。
* `show`:系列是否显示在图表上。
* `type``Radar`
* `name`:系列名称。用于 `tooltip` 的显示,`legend` 的图例筛选。
* `radarIndex`:雷达图所使用的 `radar` 组件的 `index`
* `symbol`:标记的图形 [SerieSymbol](#SerieSymbol)。
* `animation`:起始动画 [SerieAnimation](#SerieAnimation)。
* `data`:系列中的数据项 [SerieData](#SerieData) 数组,可以设置`1``n`维数据。
## `Serie-Scatter`
散点图系列。
* `show`:系列是否显示在图表上。
* `type``Scatter`
* `name`:系列名称。用于 `tooltip` 的显示,`legend` 的图例筛选。
* `symbol`:标记的图形 [SerieSymbol](#SerieSymbol)。
* `label`:图形上的文本标签 [SerieLabel](#SerieLabel),可用于说明图形的一些数据信息,比如值,名称等。
* `emphasis`:高亮样式 [Emphasis](#Emphasis)。
* `animation`:起始动画 [SerieAnimation](#SerieAnimation)。
* `data`:系列中的数据项 [SerieData](#SerieData) 数组,可以设置`1``n`维数据。
## `Serie-Heatmap`
热力图系列。
* `show`:系列是否显示在图表上。
* `type``Scatter`
* `name`:系列名称。用于 `tooltip` 的显示,`legend` 的图例筛选。
* `label`:图形上的文本标签 [SerieLabel](#SerieLabel),可用于说明图形的一些数据信息,比如值,名称等。
* `emphasis`:高亮样式 [Emphasis](#Emphasis)。
* `animation`:起始动画 [SerieAnimation](#SerieAnimation)。
* `data`:系列中的数据项 [SerieData](#SerieData) 数组,可以设置`1``n`维数据。
## `Serie-Gauge`
仪表盘系列。 仪表盘系列。
@@ -475,8 +582,6 @@
## `Settings` ## `Settings`
---
全局参数设置组件。一般情况下可使用默认值,当有需要时可进行调整。 全局参数设置组件。一般情况下可使用默认值,当有需要时可进行调整。
* `lineSmoothStyle`:曲线平滑系数。通过调整平滑系数可以改变曲线的曲率,得到外观稍微有变化的不同曲线。 * `lineSmoothStyle`:曲线平滑系数。通过调整平滑系数可以改变曲线的曲率,得到外观稍微有变化的不同曲线。
@@ -486,8 +591,6 @@
## `SerieAnimation` ## `SerieAnimation`
---
* `enable`:是否开起始画效果。 * `enable`:是否开起始画效果。
* `easing`:动画的缓动效果。支持以下动画效果: * `easing`:动画的缓动效果。支持以下动画效果:
* `Linear`:线性效果。 * `Linear`:线性效果。
@@ -499,8 +602,6 @@
## `AreaStyle` ## `AreaStyle`
---
* `show`:是否显示区域填充。 * `show`:是否显示区域填充。
* `origin`:区域填充的起始位置 `AreaOrigin`。有以下三种填充方式: * `origin`:区域填充的起始位置 `AreaOrigin`。有以下三种填充方式:
* `Auto`:填充坐标轴轴线到数据间的区域。 * `Auto`:填充坐标轴轴线到数据间的区域。
@@ -515,8 +616,6 @@
## `AxisLabel` ## `AxisLabel`
---
* `show`:是否显示刻度标签。 * `show`:是否显示刻度标签。
* `interval`坐标轴刻度标签的显示间隔在类目轴中有效。0表示显示所有标签1表示隔一个隔显示一个标签以此类推。 * `interval`坐标轴刻度标签的显示间隔在类目轴中有效。0表示显示所有标签1表示隔一个隔显示一个标签以此类推。
* `inside`:刻度标签是否朝内,默认朝外。 * `inside`:刻度标签是否朝内,默认朝外。
@@ -530,8 +629,6 @@
## `AxisLine` ## `AxisLine`
---
* `show`:是否显示坐标轴轴线。 * `show`:是否显示坐标轴轴线。
* `onZero`X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上,只有在另一个轴为数值轴且包含 0 刻度时有效。 * `onZero`X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上,只有在另一个轴为数值轴且包含 0 刻度时有效。
* `width`:坐标轴线线宽。 * `width`:坐标轴线线宽。
@@ -543,8 +640,6 @@
## `AxisName` ## `AxisName`
---
* `show`:是否显示坐标名称。 * `show`:是否显示坐标名称。
* `name`:坐标轴名称。 * `name`:坐标轴名称。
* `location`:坐标轴名称的位置。支持以下类型: * `location`:坐标轴名称的位置。支持以下类型:
@@ -559,15 +654,11 @@
## `AxisSplitArea` ## `AxisSplitArea`
---
* `show`:是否显示坐标分割区域。 * `show`:是否显示坐标分割区域。
* `color`:分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。 * `color`:分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
## `AxisTick` ## `AxisTick`
---
* `show`:是否显示坐标轴刻度。 * `show`:是否显示坐标轴刻度。
* `alignWithLabel`:类目轴中在 boundaryGap 为 true 的时候有效,可以保证刻度线和标签对齐。 * `alignWithLabel`:类目轴中在 boundaryGap 为 true 的时候有效,可以保证刻度线和标签对齐。
* `inside`:坐标轴刻度是否朝内,默认朝外。 * `inside`:坐标轴刻度是否朝内,默认朝外。
@@ -575,16 +666,12 @@
## `Emphasis` ## `Emphasis`
---
* `show`:是否启用高亮样式。 * `show`:是否启用高亮样式。
* `label`:图形文本标签样式 [SerieLabel](#SerieLabel)。 * `label`:图形文本标签样式 [SerieLabel](#SerieLabel)。
* `itemStyle`:图形样式 [ItemStyle](#ItemStyle)。 * `itemStyle`:图形样式 [ItemStyle](#ItemStyle)。
## `ItemStyle` ## `ItemStyle`
---
* `show`:是否启用。 * `show`:是否启用。
* `color`:颜色。 * `color`:颜色。
* `borderType`:边框的类型。 * `borderType`:边框的类型。
@@ -594,8 +681,6 @@
## `LineArrow` ## `LineArrow`
---
* `show`:是否显示箭头。 * `show`:是否显示箭头。
* `position`:箭头显示位置。支持以下两种位置: * `position`:箭头显示位置。支持以下两种位置:
* `End`:末端显示。最后一个数据上显示箭头。 * `End`:末端显示。最后一个数据上显示箭头。
@@ -607,8 +692,6 @@
## `LineStyle` ## `LineStyle`
---
* `show`:是否显示线条。在折线图中无效。 * `show`:是否显示线条。在折线图中无效。
* `type`:线条类型。支持以下五种类型: * `type`:线条类型。支持以下五种类型:
* `None`:不显示分割线。 * `None`:不显示分割线。
@@ -623,8 +706,6 @@
## `Location` ## `Location`
---
* `align`:对齐方式。有以下对齐方式。 * `align`:对齐方式。有以下对齐方式。
* `TopLeft`:左上角对齐。 * `TopLeft`:左上角对齐。
* `TopRight`:右上角对齐。 * `TopRight`:右上角对齐。
@@ -642,8 +723,6 @@
## `SerieData` ## `SerieData`
---
* `name`:数据项名称。 * `name`:数据项名称。
* `selected`:该数据项是否被选中。 * `selected`:该数据项是否被选中。
* `radius`:自定义半径。可用在饼图中自定义某个数据项的半径。 * `radius`:自定义半径。可用在饼图中自定义某个数据项的半径。
@@ -656,8 +735,6 @@
## `SerieLabel` ## `SerieLabel`
---
* `show`:是否显示文本标签。 * `show`:是否显示文本标签。
* `position`:标签的位置。折线图时强制默认为 `Center`,支持以下 `5` 种位置: * `position`:标签的位置。折线图时强制默认为 `Center`,支持以下 `5` 种位置:
* `Outside`:饼图扇区外侧,通过视觉引导线连到相应的扇区。只在饼图种可用。 * `Outside`:饼图扇区外侧,通过视觉引导线连到相应的扇区。只在饼图种可用。
@@ -692,8 +769,6 @@
## `SerieSymbol` ## `SerieSymbol`
---
* `type`:标记类型。支持以下六种类型: * `type`:标记类型。支持以下六种类型:
* `EmptyCircle`:空心圆。 * `EmptyCircle`:空心圆。
* `Circle`:实心圆。 * `Circle`:实心圆。

View File

@@ -184,7 +184,7 @@ namespace XCharts
private void DrawArcShape(VertexHelper vh, Serie serie, SerieData serieData, Vector3 centerPos, private void DrawArcShape(VertexHelper vh, Serie serie, SerieData serieData, Vector3 centerPos,
Color color, ref float drawStartDegree, ref float drawEndDegree) Color color, ref float drawStartDegree, ref float drawEndDegree)
{ {
if (serie.arcShaped) if (serie.arcShaped && serieData.runtimePieInsideRadius > 0)
{ {
var width = (serieData.runtimePieOutsideRadius - serieData.runtimePieInsideRadius) / 2; var width = (serieData.runtimePieOutsideRadius - serieData.runtimePieInsideRadius) / 2;
var radius = serieData.runtimePieInsideRadius + width; var radius = serieData.runtimePieInsideRadius + width;