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，就会发现其中没有关于背景图像的信息。背景颜色是最好的。这很可能是因为在画布上绘制实际照片可能是一项非常复杂的任务，通常并不是很出色，因此它们并没有开箱即用。

在这种情况下，是否仍然可以做到这一点取决于您的初衷。

如果您想要对甜甜圈上的每个不同值使用不同的图像，那将不会发生，至少在使用Chart.js时不会如此。（不过，如果您整个图表都是纯CSS，则可能会这样做。）

但是，如果您只想在甜甜圈中间添加一个图像，则可以添加一个img标签或对某些元素使用CSS background-image，然后将该图像/元素定位在图表之上。由于必须始终为画布提供静态尺寸，因此可以解决您的问题；您可能只需要尝试一下就可以使位置和大小恰到好处。

在下面的代码段中，我在画布周围添加了一个包装器，并将背景图像放在该包装器的伪元素上（因为在画布本身上不能包含伪内容）。我将伪元素定位在甜甜圈的中间。

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>

如何将图像放入圆形图表

1 个答案: