极地图(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"]
};

results matching ""

    No results matching ""