ChartJS 雷达图

• 

  定义和使用

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

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

  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[]	鼠标悬停时，数据点的半径大小

• 

  配置选项

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

  雷达图只支持一个比例尺。该比例的选项在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]
    }]
  }