reactjs - Chartjs 3.5.0 - 雷达图 - 将标签转换为图像

Question

我正在尝试用图像替换雷达图的标签， 我看了看 How to add an images as labels to Canvas Charts using chart.js 但这没有帮助，我已经设法从 get canvas 获取图表

const callback = [
    {
      id: "custom",
      afterDraw: chart => {
      var ctx = chart.canvas.getContext("2d");
      console.log(chart) // logs the chart object
      var xAxis = chart.scales['r'];}
    },
];

Chartjs 3.5.0 - 雷达图 - 将标签转换为图像。我正在使用这个 https://github.com/reactchartjs/react-chartjs-2

Answer 1

这是我曾经做过的一个例子，如果你只想要一张图片，你可以在函数中取出绘制图表上标签值的部分:

const image = new Image();
image.src = "http://www.lunapic.com/editor/premade/transparent.gif";

var ctx = document.getElementById("chart").getContext("2d");
var chart = new Chart(ctx, {
  type: "radar",
  data: {
    labels: [
      ['', ''],
      ['', ''],
      ['', '']
    ],
    datasets: [{
      label: "material font",
      backgroundColor: "rgb(255, 99, 132, 0.5)",
      borderColor: "rgb(255, 99, 132)",
      borderWidth: 1,
      data: [10, 20, 30],
    }, ]
  },
  options: {},
  plugins: [{
    id: 'custom_labels',
    afterDraw: (chart, args) => {
      if (image.complete) {
        const scale = chart.scales.r;
        drawTextAtIndex(scale, 0, 'headset', 'test0', 10);
        drawTextAtIndex(scale, 1, '3d_rotation', 'test1', 20);
        drawTextAtIndex(scale, 2, 'done', 'test2', 30);
      } else {
        image.onload = () => chart.draw();
      }
    }
  }]
});

function drawTextAtIndex(scale, index, icon, text) {
  const offset = 36;
  const r = scale.drawingArea + offset;
  const angle = scale.getIndexAngle(index) - Math.PI / 2;
  const x = scale.xCenter + Math.cos(angle) * r;
  const y = scale.yCenter + Math.sin(angle) * r;
  const ctx = scale.ctx;
  ctx.save();
  ctx.translate(x, y);
  //ctx.rotate(angle + Math.PI / 2);
  ctx.textAlign = 'center';

  ctx.fillStyle = 'blue';
  ctx.font = '20px material-icons'
  ctx.drawImage(image, -15, -2, 30, 30);

  ctx.font = "12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif";
  ctx.fillStyle = 'black';
  ctx.fillText(text, 0, -5);
  ctx.restore();
}

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