Używam Chartjs, aby wygenerować wykres radarowy.

Życzę ostatniej gridliny (najbardziej zewnętrznej), aby pozostać solidnym, podczas gdy wszystkie pozostałe są przerywane.

Przykład obrazu:

adoreboard radar chart on imgur

Widziałem, że możliwe jest, aby zmienić RoldDash w Ta żądanie pull Co również pokazuje wizerunek w akcji, ale jeszcze nie znajdziesz sposobu na skrypt. ( edytuj : Wydaje się, że połączone żądanie pullowe wprowadziło go na Master, planowane do wydania za pomocą V3.0 - co oznacza, że nie jest jeszcze dostępne (?))

Szybki przykład skryptu:

scale: {
gridLines: {
    borderDash: function(context) {
        return context.index % 2 === 0 ? [2, 3] : [10, 10];
    },
},
0
RuniVN 7 wrzesień 2020, 13:04

1 odpowiedź

Najlepsza odpowiedź

Możesz już użyć Chart.js w wersji 3 , jest dostępny jako Chart.js 3.0.0-beta.

Po prostu dodaj następujący znacznik script do strony HTML.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta/chart.min.js"></script>

Spójrz na poniższy fragment kodu i zobacz, jak to działa.

new Chart("radar-chart", {
  type: 'radar',
  data: {
    labels: ["A", "B", "C", "D", "E"],
    datasets: [{
      data: [25.48, 54.16, 7.61, 8.06, 4.45],
      backgroundColor: "rgba(255,99,132,0.2)",
      borderColor: "rgba(255,99,132,1)"
    }]
  },
  options: {
    legend: {
      display: false
    },
    scale: {
      ticks: {
        min: 0,
        max: 60,
        stepSize: 10
      },
      gridLines: {
        lineWidth: 2,
        color: "lightgreen",
        borderDash: context => context.index == 6 ? [] : [6, 4]
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta/chart.min.js"></script>
<canvas id="radar-chart" height="120"></canvas>
0
uminder 8 wrzesień 2020, 06:35