极地图(Polar Area)
极地面积图类似于饼图,但每个线段具有相同的角度 - 线段的半径因值而异。
当我们想要显示类似于饼图的比较数据,同时也要显示上下文的值的范围时通常使用这种类型的图表。
示例用法
new Chart(ctx, {
data: data,
type: "polarArea",
options: options
});
数据集属性
名称 | 类型 | 描述 |
---|---|---|
label |
String |
在图例和工具提示中要显示数据集的标签 |
backgroundColor |
Color[] |
填充色 参考 颜色(Colors) |
borderColor |
Color[] |
边框色 参考 颜色(Colors) |
borderWidth |
Number[] |
边框宽度 |
hoverBackgroundColor |
Color[] |
鼠标悬浮时背景色 |
hoverBorderColor |
Color[] |
鼠标悬浮时边框色 |
hoverBorderWidth |
Number[] |
鼠标悬浮时边框宽度 |
配置选项
这些是特定于极地图的自定义选项。这些选项与全局图表配置选项合并,组成图表的最终选项。
默认选项
我们还可以为每个创建的极地图类型更改这些默认值,该对象在 Chart.defaults.polarArea
处可用。更改全局选项只会影响更改后创建的图表。现有图表不会更改。
例如,要使用animateScale = false
配置所有新的极地图,可以这么做:
Chart.defaults.polarArea.animation.animateScale = false;
数据结构
对于极地图,数据集需要包含一组数据点。数据点应该是一个数字,Chart.js 将统计所有的数字并计算每个数字的相对比例。你还需要指定一个标签数组,以便 tooltips 正确显示每段数据。
data = {
datasets: [
{
data: [10, 20, 30]
}
],
// 悬停不同弧线时,这些标签出现在图例和工具提示中
labels: ["Red", "Yellow", "Blue"]
};