Добавьте изображение в качестве фона в область диаграммы JS [Не на холст] - PullRequest
Новая
       42

Добавьте изображение в качестве фона в область диаграммы JS [Не на холст]

0 голосов
/ 11 июля 2020

Есть ли способ добавить изображение в область диаграммы [Я использую диаграмму JS пузырьковую диаграмму]. Сейчас я добавил изображение на холст через css.

1 Ответ

0 голосов
/ 11 июля 2020

Plugin Core API предлагает ряд перехватчиков, которые можно использовать для выполнения пользовательского кода. Вы можете использовать beforeDraw, например, для прорисовки изображений через CanvasRenderingContext2D.drawImage(). Но это эффективно отображает aws изображение прямо на холсте. 

plugins: [{
  beforeDraw: chart => {
    var ctx = chart.chart.ctx;
    ctx.save();
    var image = new Image();
    image.src = 'https://i.stack.imgur.com/S7tJH.png';
    imageSize = 250;
    ctx.drawImage(image, chart.chart.width / 2 - imageSize / 2, chart.chart.height / 2 - imageSize / 2, imageSize, imageSize);
    ctx.restore();
  }
}],

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

var myChart = new Chart('myChart', {
  type: 'bubble',
  plugins: [{
    beforeDraw: chart => {
      var ctx = chart.chart.ctx;
      ctx.save();
      var image = new Image();      
      image.src = 'https://i.stack.imgur.com/S7tJH.png';      
      imageSize = 250;
      ctx.drawImage(image, chart.chart.width / 2 - imageSize / 2, chart.chart.height / 2 - imageSize / 2, imageSize, imageSize);
      ctx.restore();
    }
  }],
  data: {
    datasets: [{
      label: 'My Dataset',
      data: [
        { x: "05:22", y: 12, r: 10 },
        { x: "12:13", y: 19, r: 12  },
        { x: "13:45", y: 3, r: 8  },
        { x: "18:31", y: 5, r: 7  },
        { x: "19:05", y: 2, r: 4  },
        { x: "22:55", y: 3, r: 8  }
      ],
      backgroundColor: [
        'rgba(255, 99, 132, 0.4)',
        'rgba(54, 162, 235, 0.4)',
        'rgba(255, 206, 86, 0.4)',
        'rgba(75, 192, 192, 0.4)',
        'rgba(153, 102, 255, 0.4)',
        'rgba(255, 159, 64, 0.4)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ]
    }]
  },
  options: {
    responsive: true,
    legend: {
        display: false
    },
    scales: {      
      xAxes: [{     
        type: 'time',
        time: {
          parser: 'HH:mm',
          unit: 'hour',
          stepSize: 1,
          displayFormats: {
            hour: 'HH:mm'   
          },          
          tooltipFormat: 'HH:mm'          
        },
        ticks: {
          min: '00:00',
          max: '24:00',
          callback: (value, index) => index == 24 ? '24:00' : value
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true,
          stepSize: 5
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="80"></canvas>
...