ChartJS 雷达图悬停文本

Question

当您将鼠标悬停在雷达图中的点上时，如何在点上添加自定义文本？我一直在关注这个 tutorial but the data in radar chart are in array formats instead of object as specified here 所以它不适用。

我目前的雷达图： JSfiddle

let dataValues = [100, 120, 80, 100, 90, 110, 100, 100, 100]

Answer 1

如果您等到 Chart.js 3.8 版发布，您可以在雷达图中使用对象表示法：

let dataValues = [{
    value: 100,
    text: 'f'
  },
  {
    value: 120,
    text: 'd'
  },
  {
    value: 80,
    text: 'q'
  },
  {
    value: 100,
    text: 'b'
  },
  {
    value: 90,
    text: 'z'
  },
  {
    value: 110,
    text: 'efw'
  },
  {
    value: 100,
    text: 'ffew'
  },
  {
    value: 100,
    text: 'ffdddew'
  },
  {
    value: 100,
    text: 'fffff'
  }
]

const sum = dataValues.reduce((a, b) => a.value + b.value, 0);
const avg = sum / dataValues.length;
const sorted = [...dataValues].sort(function(a, b) {
  return a.value - b.value;
})

const data = {
  labels: [
    'Signal 1',
    'Signal 2',
    'Signal 3',
    'Signal 4',
    'Signal 5',
    'Signal 6',
    'Signal 7',
    'Signal 8',
    'Signal 9'

  ],
  datasets: [{
    label: '9 signals',
    data: dataValues,
    fill: true,
    backgroundColor: 'rgba(210, 203, 203, 0.4)',
    borderColor: 'rgb(210, 203, 203, 0.6)',
    pointBackgroundColor: function(context) {
      const index = context.dataIndex;
      const value = context.dataset.data[index].value;

      return value < sorted[3].value ? 'blue' :
        value < sorted[5].value ? 'green' :
        value < sorted[7].value ? 'orange' :
        'red';
    },
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgb(255, 99, 132)'
  }]
};

const config = {
  type: 'radar',
  data: data,
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          label: (ctx) => (`${ctx.dataset.label}: ${ctx.parsed.r} ${ctx.dataset.data[ctx.dataIndex].text}`)
        }
      }
    },
    parsing: {
      key: 'value'
    },
    elements: {
      line: {
        borderWidth: 3
      },
      point: {
        pointRadius: 5
      }
    },
    scales: {

      r: {
        angleLines: {
          lineWidth: 2
        },
        grid: {
          circular: true,
          lineWidth: 2
        }
      }
    }
  }
};


let myChart = new Chart(
  document.getElementById('myChart'),
  config
);

<div class="chartBox">
  <canvas id="myChart"></canvas>
  <script src="https://www.chartjs.org/dist/master/chart.js"></script>
</div>

ChartJS 雷达图悬停文本

ChartJS radar-chart hover text

javascript

radar-chart

chart.js