Нужна помощь по стилю диаграммы JS Радарная карта - PullRequest
Новая
       45

Нужна помощь по стилю диаграммы JS Радарная карта

0 голосов
/ 23 февраля 2020

Я пытаюсь стилизовать фон для связанной ниже радиолокационной карты и хотел бы иметь возможность

  • Установить цвет линий радара
  • Установить толщину
  • Установите масштаб от 0 до 100
  • Установите размер шрифта

Я думаю, что это должно быть сделано с помощью «параметров» (поскольку речь идет не о наборе данных), но Мне не хватает gr asp из JS, чтобы заставить его работать после нескольких часов попыток.

Codepen здесь Диаграмма JS инструкции радаров здесь 

new Chart(document.getElementById("radar-chart"), {
type: 'radar',
data: {
  labels: ["Business", "Brand", "Marketing", "Stakeholders", "Clients"],
  datasets: [
     {
      label: "",
      fill: true,
      backgroundColor: "rgba(255,99,132,0.2)",
      borderColor: "rgba(255,99,132,1)", 
      pointBorderColor: "#fff",
      pointBackgroundColor: "rgba(255,99,132,1)",
      pointBorderColor: "#fff",
      data: [25.48,54.16,7.61,8.06,4.45]
    }
  ]
},  

options: {

legend: {
  display: false    
},
borderWidth: 10,

}

});

1 Ответ

1 голос
/ 23 февраля 2020

Чтобы получить то, что вы просите, вы можете определить ticks, gridLines и pointLabels внутри options.scale. 

new Chart(document.getElementById("radar-chart"), {
  type: 'radar',
  data: {
    labels: ["Business", "Brand", "Marketing", "Stakeholders", "Clients"],
    datasets: [{
      data: [25.48, 54.16, 7.61, 8.06, 4.45],
      fill: true,
      backgroundColor: "rgba(255,99,132,0.2)",
      borderColor: "rgba(255,99,132,1)",
      pointBorderColor: "#fff",
      pointBackgroundColor: "rgba(255,99,132,1)"
    }]
  },
  options: {
    legend: {
      display: false
    },
    borderWidth: 10,
    scale: {
      ticks: {
        fontSize: 18,
        max: 100
      },
      gridLines: {
        lineWidth: 2,
        color: "lightgreen"
      },
      pointLabels: {
        fontSize: 18,
        fontStyle: "bold"
      }
    }  
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<canvas id="radar-chart" height="200"></canvas>
...