Как изменить метку данных линейной диаграммы на значок или изображение на диаграмме. js - PullRequest
Новая
       87

Как изменить метку данных линейной диаграммы на значок или изображение на диаграмме. js

0 голосов
/ 26 мая 2020

Я хочу изменить текст метки данных на значок или изображение.

This chart show labels with months. I want to change this label text to icon or image

На этой диаграмме показаны метки с месяцами. Я хочу изменить текст этой метки на значок или изображение

1 Ответ

0 голосов
/ 30 мая 2020

Plugin Core API предлагает ряд хуков, которые могут использоваться для выполнения пользовательского кода. Вы можете использовать хук afterDraw, чтобы рисовать изображения вместо меток-отметок прямо на холсте, используя CanvasRenderingContext2D.

Вам также нужно будет указать Chart. js не отображать метки галочки по умолчанию. Это можно сделать с помощью следующего определения внутри параметров диаграммы. 

scales: {
  xAxes: [{
    ticks: {
      display: false
    }
  }],

Далее вам необходимо определить отступы внизу и справа от диаграммы, иначе вы увидите только часть изображений. 

layout: {
  padding: {
    bottom: 30,
    right: 15
  }
},

Пожалуйста, посмотрите на приведенный ниже фрагмент исполняемого кода. 

const labels = ['2020-02-06', '2020-02-07', '2020-02-08', '2020-02-09'];
const images = ['https://i.stack.imgur.com/2RAv2.png', 'https://i.stack.imgur.com/Tq5DA.png', 'https://i.stack.imgur.com/3KRtW.png', 'https://i.stack.imgur.com/iLyVi.png'];
const values = [48, 56, 33, 44];

new Chart(document.getElementById("myChart"), {
  type: "line",
  plugins: [{
    afterDraw: chart => {      
      var ctx = chart.chart.ctx; 
      var xAxis = chart.scales['x-axis-0'];
      var yAxis = chart.scales['y-axis-0'];
      xAxis.ticks.forEach((value, index) => {  
        var x = xAxis.getPixelForTick(index);      
        var image = new Image();
        image.src = images[index],
        ctx.drawImage(image, x - 12, yAxis.bottom + 10);
      });      
    }
  }],
  data: {
    labels: labels,
    datasets: [{
      label: 'My Dataset',
      data: values,
      fill: false,
      backgroundColor: 'green',
      borderColor: 'green'
    }]
  },
  options: {
    responsive: true,
    layout: {
      padding: {
        bottom: 30,
        right: 15
      }
    },
    scales: {
      yAxes: [{ 
        ticks: {
          beginAtZero: true,
          stepSize: 20
        }
      }],
      xAxes: [{
        type: 'time',
        time: {
          unit: 'day',
          tooltipFormat: 'MMM DD'
        },
        ticks: {
          display: false
        }   
      }],
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="90"></canvas>
...