更改海图起始角时如何使雷达海图刻度线居中?

时间:2019-10-30 16:07:03

标签: javascript chart.js

*编辑 看来我在向他们寻找的是他们参考并已在此处修复的错误。 https://github.com/chartjs/Chart.js/pull/4682

我已经使用chart.js创建了一个雷达图,并且一直希望该图的平坦侧面是水平的。我将选项下的startAngle设置为750以旋转图表,使其符合该要求。不幸的是,刻度线也旋转并停留在数据点第一个索引的“脊线”上。我不知道如何从第一根书脊中分离出刻度线,并使它们始终是垂直列。

在该文档中似乎找不到很多,但我注意到某些示例具有此功能!唯一的区别是版本号。

https://codepen.io/etcetera/pen/WNNZYBo-这是我想要的功能,并且是较旧的版本。

var config = {
  type: 'radar',
  data: {
    labels: [
      "Happiness", "Loneliness", "Health","Managing at Home", "Finances", "sdf"],
    datasets: [{
      label: 'hi',
      data: [8, 8, 7, 10, 10, 9],
    }]
  },
  options: {
    startAngle: 750,
    legend: {
      display: false,
    },
    scale: {
      beginAtZero: true,
      ticks: {
        max: 10,
        suggestedMin: 7,
        min: 0,
      }
    },
  }
};

window.onload = function() {
  window.myRadar = new Chart(document.getElementById("canvas"), config);
};

https://codepen.io/etcetera/pen/QWWqJep-这是我正在运行的版本,无法分开。

var ctx = document.getElementById("myChart");
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  "type":"radar",
  "data": {
    "labels":["Online safety group","Online safety responsibilities","Governors","Policy development","Policy Scope",],
    "datasets":[
      {
        "label":"Current Level","backgroundColor":"rgba(30,150,0,0.1)",
        "borderColor":"#1E9600","pointBorderColor":"#1E9600","pointBackgroundColor":"#1E9600",
        "data":[4,1,1,1,4,3],
        "hitRadius":10,
        "hoverRadius":10
      },
    ]
  },
  "options":  {
    "startAngle": 750,
    "aintainAspectRatio": false,
    "animationSteps":60,
    "scale":{
      "pointLabels":{
        "fontSize":14
      },
      "gridLines":  {
        "color":"#CCC",
        "circular":false,
       },
      "ticks":{
        "stepSize":2,
        "fontSize":14,
        "fontColor":"#000",
        "reverse":true,
        "min":1,
        "max":6
      }
    },
    "legend":{
      "labels":{
        "fontSize":10,
      }
    }
  }
});

我尝试安装较旧的版本,但无济于事,滴答声仍然“绑在”第一个索引“ spine”上。

1 个答案:

答案 0 :(得分:0)

*编辑看起来我在向他们寻找的是他们参考并已在此处修复的错误。 https://github.com/chartjs/Chart.js/pull/4682