jquery 设置雷达图的步长

gab6jxml  于 2023-03-17  发布在  jQuery
关注(0)|答案(1)|浏览(161)

我用过这个雷达图. js

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>

    var options = {
          elements: {
            line: {
              borderWidth: 3
            }
          },
          scales: {
            r: {
              grid: {
                lineWidth: 4
              },
              angleLines: {
                lineWidth: 6
              },
              suggestedMin: 0,
              suggestedMax: 100,
            },                
          },            
        };

        var ctx = document.getElementById('myChart');

    var ChartData = {
      labels: [
        'Eating',
        'Drinking',
        'Sleeping',
        'Designing',
        'Coding',
        'Cycling',
        'Running'
      ],
      datasets: [{
        label: 'My First Dataset',
        data: [65, 59, 10, 21, 56, 55, 40],
        fill: true,
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgb(255, 99, 132)',
        pointBackgroundColor: 'rgb(255, 99, 132)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgb(255, 99, 132)'
      }, {
        label: 'My Second Dataset',
        data: [28, 48, 40, 19, 36, 27, 10],
        fill: true,
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        borderColor: 'rgb(54, 162, 235)',
        pointBackgroundColor: 'rgb(54, 162, 235)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgb(54, 162, 235)'
      }]
    };

  var myRadar = new Chart(ctx, {
    type: 'radar',
    data: ChartData,
    options: options
  });
</script>

我想设置刻度的stepSize,所以我在r部分中包含了它

var options = {
          elements: {
            line: {
              borderWidth: 3
            }
          },
          scales: {
            r: {
              grid: {
                lineWidth: 4
              },
              angleLines: {
                lineWidth: 6
              },
              suggestedMin: 0,
              suggestedMax: 100,
            },

              ticks: {
                stepSize: 20, // the number of step
                }, 
           
          },             
        };

但它不起作用,并给出以下错误
无法确定“”轴的类型。请提供“axis”或“position”选项。
如何设置雷达图v.4.2.1的步长?

ubbxdtey

ubbxdtey1#

刻度对象应位于r内

var options = {
          elements: {
            line: {
              borderWidth: 3
            }
          },
          scales: {
            r: {
              grid: {
                lineWidth: 4
              },
              angleLines: {
                lineWidth: 6
              },
              suggestedMin: 0,
              suggestedMax: 100,
              ticks: {
                stepSize: 20
              }
            }
          },             
        };

相关问题