javascript - Chartjs: Connect canvas background image and chart (type: 'scatter') so that data points remain in

admin管理员组

文章数量:1352884

I have successfully created a canvas background image plugin for a Chart.js chart, as shown here.

It is better at staying in place than a css background image, however, when the window is resized, the data points end up in different spots relative to the image. Is there any way to make the chart change size at the same rate as the image, so that the data points stay put relative to the image?

I've tried changing the 'responsive' and 'maintainAspectRatio' settings, but they don't seem to make a difference in this regard.

My custom plugin is as shown at the link above:

const custplugin = {
  id: 'custplugin',
  beforeDraw: (chart) => {
    if (imageplete) {
      const ctx = chart.ctx;
      const {top, left, width, height} = chart.chartArea;
      const x = left + width / 2 - image.width / 2;
      const y = top + height / 2 - image.height / 2;
      ctx.drawImage(image, x, y);
    } else {
      image.onload = () => chart.draw();
    }
  }
};

Thanks for any help.

I have successfully created a canvas background image plugin for a Chart.js chart, as shown here.

It is better at staying in place than a css background image, however, when the window is resized, the data points end up in different spots relative to the image. Is there any way to make the chart change size at the same rate as the image, so that the data points stay put relative to the image?

I've tried changing the 'responsive' and 'maintainAspectRatio' settings, but they don't seem to make a difference in this regard.

My custom plugin is as shown at the link above:

const custplugin = {
  id: 'custplugin',
  beforeDraw: (chart) => {
    if (imageplete) {
      const ctx = chart.ctx;
      const {top, left, width, height} = chart.chartArea;
      const x = left + width / 2 - image.width / 2;
      const y = top + height / 2 - image.height / 2;
      ctx.drawImage(image, x, y);
    } else {
      image.onload = () => chart.draw();
    }
  }
};

Thanks for any help.

• javascript
• image
• plugins
• background
• chart.js

Share Improve this question Follow asked Apr 1 at 7:50 jamminjamesjamminjames 671212 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I was able to do this with css. Add 'overflow: scroll' to 'body' and set a size for a div containing the 'canvas' element:

body {
    background-color: white;
    overflow: scroll;
}
#canvasdiv {
    width: 1200px;
    height: 900px;
    margin: 50px 0 0;
}
#canvas {
    width: auto !important;
    height: auto !important;
}

本文标签：