Показать значения точек на радиолокационной карте, используя диаграмму. js

Question

Как я могу показать значения на графике, используя диаграмму. js?

ОБНОВЛЕНИЕ : я использую опции ниже, но я не смог найти никакого ответа.

    options: {
    scale: {
      angleLines: {
        lineWidth: 0.5,
        color: 'rgba(128, 128, 128, 0.2)'
      },
      pointLabels: {
        fontSize: 14,
        fontStyle: '300',
        fontColor: 'rgba(204, 204, 204, 1)',
        fontFamily: "'Lato', sans-serif"
      },
      ticks: {
        beginAtZero: true,
        maxTicksLimit: 4,
        min: 0,
        max: 4,
        display: false
      }
    }
}



Sample pen https://codepen.io/melvik/pen/ZEGaexy

ожидаемый результат

Заранее спасибо

Answer 1

диаграмма js -плагин-метки данных & диаграмма. js радар .

метки данных Форматер меток данных

https://chartjs-plugin-datalabels.netlify.com/guide/formatting.html#data -трансформация

1/2. Basi c пример - вернуть "привет мир"

2/2. «практический пример» - возврат value:

formatter: function(value, context) {
  return context.chart.data.labels[context.value];
}

подсказка: false

Set всплывающая подсказка к false (вместо этого используется видимое значение)

tooltips: false,

Basi c пример фрагмента:

// Change default options for ALL charts
Chart.helpers.merge(Chart.defaults.global.plugins.datalabels, {
  opacity: 1,
  textAlign: 'left',
  color: 'white',
  borderColor: '#11469e',
  borderWidth: 2,
  borderRadius: 100,
  font: {
    weight: 'bold',
    size: 12,
    lineHeight: 1 /* align v center */
  },
  padding: {
    top: 5
  },
  /* hover styling */
  backgroundColor: function(context) {
    return context.hovered ? context.dataset.borderColor : 'white';
  },
  color: function(context) {
    return context.hovered ? 'white' : context.dataset.borderColor;
  },
  listeners: {
    enter: function(context) {
      context.hovered = true;
      return true;
    },
    leave: function(context) {
      context.hovered = false;
      return true;
    }
  }
});

var data = {
  labels: ["Ball Skills", "Shooting", "Physical", "Defence", "Passing"],
  datasets: [{
    label: "De maria",
    backgroundColor: "rgba(38,120,255,0.2)",
    borderColor: "rgba(38,120,255, 1)",
    data: [90, 86, 76, 65, 82]
  }]
};

var options = {
  responsive: true,
  tooltips: false,
  title: {
    text: 'chartjs-plugin-datalabels - basic example',
    display: true,
    position: `bottom`,
  },
  plugins: {
    /* ######### https://chartjs-plugin-datalabels.netlify.com/ #########*/
    datalabels: {
      /* formatter */
      formatter: function(value, context) {
        return context.chart.data.labels[context.value];
      }
    }
  },
  /* scale: https://www.chartjs.org/docs/latest/axes/radial/linear.html#axis-range-settings */
  scale: {
    angleLines: {
      display: true
    },
    pointLabels:{
      /* https://www.chartjs.org/docs/latest/axes/radial/linear.html#point-label-options */
      fontSize: 15,
      fontColor: 'black',
      fontStyle: 'bold',
      callback: function(value, index, values) {
        return value;
      }
    },
    ticks: {
      /* https://www.chartjs.org/docs/latest/axes/styling.html#tick-configuration */
      /* suggestedMax and suggestedMin settings only change the data values that are used to scale the axis */
      suggestedMin: 0,
      suggestedMax: 100,
      stepSize: 25, /* 25 - 50 - 75 - 100 */
      maxTicksLimit: 11, /* Or use maximum number of ticks and gridlines to show */
      display: false, // remove label text only,
    }
  },
  legend: {
    labels: {
      padding: 10,
      fontSize: 14,
      lineHeight: 30,
    },
  },
};

var myChart = new Chart(document.getElementById("chart"), {
  type: 'radar',
  data: data,
  options: options
});

<canvas id="chart" width="500" height="350"></canvas>
<br>
<br>
<a href="https://chartjs-plugin-datalabels.netlify.com/" target="_blank">chartjs-plugin-datalabels</a>


<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0/dist/chartjs-plugin-datalabels.min.js"></script>

codepen: https://codepen.io/ezra_siton/pen/bGdYaLd

Answer 2

Хорошо. Я нашел свой ответ, потратив еще 2 часа на исследования с помощью этого пакета. Диаграмма js -plugin-datalabels