如何在圆环图中间添加图像？(Chart.js)

ddrv8njm 于 2023-10-18 发布在 Chart.js

关注(0)|答案(3)|浏览(223)

我使用Chart.js来可视化我的数据，如下图所示。

我想在图表中间加一张照片。

如何在圆环图中间添加照片？下面是我的JavaScript代码：

$.ajax({
    type: "POST",
    url: "/Plant/SunChart",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (jsonData) {
        var items = jsonData[0];
        var countOfItems = jsonData[1];
        var ctx = document.getElementById("sunPieChart");
        var myPieChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: items,
                datasets: [{
                    data: countOfItems,
                    backgroundColor: ['#ffff00', '#ffffa4', '#ced5df'],
                    hoverBackgroundColor: ['#ffff00', '#ffffa4', '#ced5df'],
                    hoverBorderColor: "rgba(234, 236, 244, 1)",
                }],
            },
            options: {
                maintainAspectRatio: false,
                tooltips: {
                    backgroundColor: "rgb(255,255,255)",
                    bodyFontColor: "#858796",
                    borderColor: '#dddfeb',
                    borderWidth: 1,
                    xPadding: 15,
                    yPadding: 15,
                    displayColors: false,
                    caretPadding: 10,
                },
                legend: {
                    display: false
                },
                cutoutPercentage: 80,
            },
        });
    }
});

chart.js

来源：https://stackoverflow.com/questions/62772795/how-do-i-add-an-image-in-the-middle-of-donut-chartchart-js

3条答案

按热度按时间

wz1wpwve1#

插件核心API提供了一系列可用于执行自定义代码的钩子。您可以使用afterDraw钩子直接在画布上使用CanvasRenderingContext2D.drawImage()绘制图像。
请看看下面的修改代码。

new Chart('myChart', {
  type: 'doughnut',
  plugins: [{
    afterDraw: chart => {
      var ctx = chart.chart.ctx;
      ctx.save();
      var image = new Image();      
      image.src = 'https://i.stack.imgur.com/S7tJH.png';      
      imageSize = 40;
      ctx.drawImage(image, chart.chart.width / 2 - imageSize / 2, chart.chart.height / 2 - imageSize / 2, imageSize, imageSize);
      ctx.restore();
    }
  }],
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      data: [50, 25, 25],
      backgroundColor: ['#ffff00', '#ffffa4', '#ced5df'],
      hoverBackgroundColor: ['#ffff00', '#ffffa4', '#ced5df'],
      hoverBorderColor: "rgba(234, 236, 244, 1)",
    }],
  },
  options: {
    maintainAspectRatio: false,
    tooltips: {
      backgroundColor: "rgb(255,255,255)",
      bodyFontColor: "#858796",
      borderColor: '#dddfeb',
      borderWidth: 1,
      xPadding: 15,
      yPadding: 15,
      displayColors: false,
      caretPadding: 10,
    },
    legend: {
      display: false
    },
    cutoutPercentage: 80,
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="180"></canvas>

赞(0）回复(0）举报 2023-10-18

vsmadaxz2#

Uminder's answer非常有用。添加到将图像放在中心更新下面的代码

afterDraw: chart => {
  var ctx = chart.chart.ctx;
  ctx.save();
  var image = new Image();      
  image.src = 'https://i.stack.imgur.com/S7tJH.png';      
  imageSize = 40;
  const {top, left, width, height} = chart.chartArea;
  const x = left + width / 2 - imageSize / 2;
  const y = top + height / 2 - imageSize / 2;
  ctx.drawImage(image, x , y, imageSize, imageSize);
  ctx.restore();
}

官方网站。我希望有人会发现它有帮助。

赞(0）回复(0）举报 2023-10-18

q8l4jmvw3#

https://dotnetfiddle.net/jJKo4I

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

归功于How to add image inside the doughnut chart using chart.js?和https://www.c-sharpcorner.com/article/charts-in-asp-net-mvc-using-chart-js/和http://jsfiddle.net/jimrhoskins/Sv87G/

赞(0）回复(0）举报 2023-10-18

我来回答

如何在圆环图中间添加图像？(Chart.js)

3条答案

相关问题

热门标签

最新问答