时间戳

首页 > 解决方案 > 如何将图像放在圆形图上

javascript - 如何将图像放在圆形图上

问题描述

我正在尝试将图像放入我的圆形图表中，但我正在尝试的方法不起作用。我试图在 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>

标签： javascripthtmlcsschart.js

解决方案

如果您查看圆环图的 Chart.js 文档，您会注意到其中没有关于背景图像的内容。背景颜色是你得到的最好的。这可能是因为在画布上绘制实际照片可能是一项非常复杂的任务，而且通常性能并不特别好，因此他们没有开箱即用地包含它。

因此，在这种情况下，您是否仍然可以做到这一点取决于您的想法。

如果您想为甜甜圈上的每个不同值提供不同的图像，那是不会发生的，至少在使用 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>

推荐阅读