Блог

У меня есть график, который состоит из react-chartjs . Прямо сейчас у него есть текстовая метка. Я хочу поместить изображение вместо текста метки. Я попытался добавить изображение в ярлык, но вместо отображения изображения он показывает путь к этому изображению.

Переменная состояния данных графика

 graphData: {
  labels: ['4 A.M', '5 A.M', '6 A.M', '7 A.M', '8 A.M', '9 A.M', '10 A.M', '11 A.M', '12 P.M', '1 P.M', '2 P.M', '3 P.M', '4 P.M', '5 P.M', '6 P.M', '7 P.M', '8 P.M', '9 P.M', '10 P.M', '11 P.M', '12 A.M', '1 A.M', '2 A.M', '3 A.M'],
  datasets: [{
      label: User, //User image is imported in this component
      backgroundColor: "#69c9e0",
      borderColor: '#69c9e0',
      borderWidth: 2,
      lineTension: 0.1,
      fill: true,
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]    
    },
    {
      label: User, //User image is imported in the label
      backgroundColor: "#f8a046",
      borderColor: '#f8a046',
      borderWidth: 2,
      lineTension: 0.1,
      fill: true,
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]    
    }
  ]
}
  

Это можно сделать с помощью плагина Core API. API предлагает различные перехваты, которые могут использоваться для выполнения пользовательского кода. В вашем случае вы можете использовать afterDraw хук для рисования изображений (значков) вместо меток непосредственно на холсте CanvasRenderingContext2D .

Плагин будет определен следующим образом:

 const plugins = [{
  afterDraw: chart => {
    let ctx = chart.chart.ctx; 
    ctx.save();
    let xAxis = chart.scales['x-axis-0'];
    let yAxis = chart.scales['y-axis-0'];
    xAxis.ticks.forEach((value, index) => {  
      let x = xAxis.getPixelForTick(index);      
      let image = new Image();
      image.src = ..., // provide the image URL
      ctx.drawImage(image, x - 12, yAxis.bottom   10);
    });  
    ctx.restore();    
}];
  

Затем сообщите Bar элементу о plugin том, что будет использоваться.

 <Bar
  ... 
  plugins={plugins}
/>
  

Также добавьте немного дополнительного пространства внизу диаграммы, определив layout.padding.bottom внутри диаграммы options , иначе текст не будет виден.

 layout: {
  padding: {
    bottom: 60
  }
},