javascript - 如何将图像放入圆形图表

Question

我正在尝试将图像放入我的圆形图表中，但我正在尝试的方法不起作用。我试图在 div html5 中放置一个“img src”，但这不起作用。

如果有人能帮助我，那就太好了。

var htmlDoughnut = document.getElementById("html").getContext("2d");
var htmlData = [
  {
    value: 90,
    color:"#74cfae"
  },
  {
    value : 10,
    color : "#f2f2f2"
  }
];
var myHTMLdoughnut = new Chart(htmlDoughnut).Doughnut(htmlData, {
  percentageInnerCutout : 80
});

<div id="skills">
  <div class="container">
    <div class="row center-block">
      <h3 class="text-center">Dev Skills</h3>
      
      <div class= html5>
      <div class="col-xs-6 col-sm-3 col-sm-offset-1">
        <canvas id="html" height="150" width="150" ></canvas>
        
        <p>HTML5</p>
        <br>
      </div>
      </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js'></script>

Answer 1

如果你看一下 Chart.js documentation for doughnut charts ，您会注意到其中没有任何关于背景图像的内容。背景颜色是最好的。这可能是因为在 Canvas 上绘制实际照片可能是一项非常复杂的任务，而且通常性能不是特别好，因此他们没有开箱即用。

既然如此，您是否仍能实现这一目标取决于您当时的想法。

如果您想为 donut 上的每个不同值使用不同的图像，那是不会发生的，至少在使用 Chart.js 时不会发生。 (不过，如果整个图表都是纯 CSS，您可能会这样做。)

如果您只想在 donut 中间放一张图片，您可以添加一个 img 标签或使用 CSS background-image一些元素并将该图像/元素放置在图表顶部。由于无论如何都必须给 Canvas 一个静态大小，这对你来说可能没问题；您可能只需要稍微试验一下，就能获得恰到好处的位置和大小。

在下面的代码片段中，我在 Canvas 周围添加了一个包装器，并将背景图像放在该包装器的一个伪元素上(因为 Canvas 本身不能有伪内容)。我已将伪元素定位在 donut 的中间。

var htmlDoughnut = document.getElementById("html").getContext("2d");
var htmlData = [
  {
    value: 90,
    color:"#74cfae"
  },
  {
    value : 10,
    color : "#f2f2f2"
  }
];
var myHTMLdoughnut = new Chart(htmlDoughnut).Doughnut(htmlData, {
  percentageInnerCutout : 80
});

#canvas-wrapper {
  position: relative;
}
#canvas-wrapper::after {
  content: '';
  display: block;
  position: absolute;
  top: 19px;
  left: 19px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background-image: url('https://picsum.photos/id/1042/300/450');
  background-size: 140px auto;
  background-position: center center;
  background-repeat: no-repeat;
}

<div id="skills">
  <div class="container">
    <div class="row center-block">
      <h3 class="text-center">Dev Skills</h3>
      
      <div class= html5>
      <div class="col-xs-6 col-sm-3 col-sm-offset-1">
        <div id="canvas-wrapper">
          <canvas id="html" height="150" width="150" ></canvas>
        </div>
        <p>HTML5</p>
        <br>
      </div>
      </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js'></script>