雷达图(Radar)

雷达图是显示多个数据点和它们之间的差异的一种方式。

通常用于比较两个或更多不同数据集的点。

示例用法

var myRadarChart = new Chart(ctx, {
    type: "radar",
    data: data,
    options: options
});

数据集属性

雷达图允许为每个数据集指定一些属性显示特定数据集。

所有 point *属性都可以被指定为一个数组。如果这些设置为数组值，则第一个值应用于第一个点，第二个值应用于第二个点，依此类推。

名称 类型 描述
label String 图例和工具提示中的数据集的标签名
backgroundColor Color/Color[] 填充色 参考 颜色(Colors)
borderColor Color/Color[] 线的颜色 参考颜色(Colors)
borderWidth Number/Number[] 线宽度(以像素为单位)
borderDash Number[] 破折号的长度和间距 参考 MDN
borderDashOffset Number 偏移量 参考 MDN
borderCapStyle String 线冒样式 参考 MDN
borderJoinStyle String Line joint 样式 参考 MDN
fill Boolean/String 区域填充色 更多...
lineTension Number 贝塞尔曲线张力。0 为直线。
pointBackgroundColor Color/Color[] 数据点填充色
pointBorderColor Color/Color[] 数据点边框色
pointBorderWidth Number/Number[] 数据点边框宽度(以像素为单位)
pointRadius Number/Number[] 数据点半径。0 为不显示点
pointStyle String/String[]/Image/Image[] 数据点样式 更多...
pointHitRadius Number/Number[] 对鼠标事件作出响应的非显示点的像素大小。
pointHoverBackgroundColor Color/Color[] 鼠标悬浮时，数据点背景颜色
pointHoverBorderColor Color/Color[] 鼠标悬浮时，数据点边框色
pointHoverBorderWidth Number/Number[] 鼠标悬浮时数据点的边框宽度
pointHoverRadius Number/Number[] 鼠标悬停时，数据点的半径大小

数据点风格

数据点风格选项：

  • 'circle'
  • 'cross'
  • 'crossRot'
  • 'dash'.
  • 'line'
  • 'rect'
  • 'rectRounded'
  • 'rectRot'
  • 'star'
  • 'triangle'

如果是使用图片，则使用drawImage在 canvas 上绘制该图像。

配置选项

与其他图表不同，雷达图表没有图表特定选项。

比例选项

雷达图只支持一个比例尺。该比例的选项在scale属性中定义。

options = {
    scale: {
        // Hides the scale
        display: false
    }
};

默认选项

通常要将配置设置应用于所有创建的雷达图表。全局雷达图表设置在Chart.defaults.radar中。更改全局选项只会影响更改后创建的图表。现有图表不会更改。

数据结构

雷达图表数据集的data属性被指定为一个数字数组。数据数组中的每个点对应于 x 轴上相同索引处的标签。

data: [20, 10];

对于雷达图表，为了表达每个点的含义，我们在图表中的每个点周围都包含一个字符串数组。

data: {
    labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
    datasets: [{
        data: [20, 10, 4, 2]
    }]
}

results matching ""

    No results matching ""