How do I add an image in the middle of Donut Chart?(Chart.js)(如何在甜甜圈图表中间添加图像？(Chart.js))

转载 作者：bug小助手 更新时间：2023-10-25 14:38:20 30 4

$.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,
            },
        });
    }
});

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>

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();
}

<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>

30 4 0

• charts - 如何在 Google Charts Org Chart 小部件中获取有关所选节点的信息？

  我有一个通过 Google Charts Org Chart API 呈现的图表。当用户单击节点时，如何获取有关所选节点的数据。我理解到我进行“getSelection”调用以将选择信息输出到 Jav

• charts - Chart.js和长标签

  我使用Chart.js显示雷达图。我的问题是某些标签很长: 图表无法显示或显得很小。 那么，有没有办法换行或为标签分配最大宽度？ 感谢您的帮助! 最佳答案 对于Chart.js 2.0+，您可以使用数

• charts - Chart.js如何获得组合条形图和折线图？

  我想问一下使用Chart.js http://www.chartjs.org/ 可以吗？获得组合条形图和折线图？ 感谢您的任何建议。 最佳答案 下面的答案与chart.js 1.x有关。 Chart.

• charts - Chart.js 总是在 Chart.resize() 上增加高度

  我在addData和removeData函数中添加了chart.resize()，但它总是增加高度并且永远不会减少! 当用户单击菜单项时，我正在更新图表。有些项目有超过 100 个数据，有些项目只有

• charts - Chart.js : bar spacing in horizontal bar chart

  horizontal bar chart var barOptions_stacked1 = { tooltips: { e

• chart.js - Clojurescript/Reagent/Chart.js - 试剂生命周期 - Chart.update()

  我们将 Chart.js 与 clojurescript 和 Reagent 一起使用。现在我知道 Chart.js 有一个 Chart.update() 方法来用新数据更新图表。所以问题是，如何设置

• Bar chart with multiple datasets - Chart.JS(包含多个数据集的条形图--Chart.JS)

  我想显示一个包含多个数据集的条形图，如下所示，。。我可以获取如下所示的数据。。而是如何转换这个JSON数组，如下所示。我需要显示过去7天每个班次的出勤百分比。。感谢你在这方面的帮助。谢谢!。=编辑=

• Bar chart with multiple datasets - Chart.JS(具有多个数据集的条形图-chart.JS)

  I want to display a bar chart with multiple datasets as shown below,我想显示一个包含多个数据集的条形图，如下所示， I'

• vb.net - 在 Excel.Chart 中导出 VB.NET Charting.Chart

  假设我有一个 Charting.Chart : 我想导出到 Excel.Workbook.Worksheet以便我稍后可以“播放”数据(例如在 Excel 图表上拖放更多数据等): 请不要介意第二张图

• javascript - 我想在我的应用程序中使用ng2-charts。尽管我已正确导入它，但仍然给我一个错误。找不到模块“ng2-charts/ng2-charts”

  离子性： ionic（Ionic CLI）：4.10.3（/Users/faiz/.nvm/versions/node/v8.9.4/lib/node_modules/ionic） 离子框架：离子角3

• How do I add an image in the middle of Donut Chart?(Chart.js)(如何在甜甜圈图表中间添加图像？(Chart.js))

  我正在使用Chart.js来可视化我的数据，如下图所示。。。我想在图表中间加一张照片。。。如何在甜甜圈图表的中间添加照片？下面是我的javascript代码：

• charts - Kendo Chart - 无数据讯息

  我正在使用 Kendo 饼图，我想将其配置为在没有数据可显示时显示一条消息。我正在使用以下 js 函数配置饼图 - 变量“JsPieChartDataSet”是一组 JSON 格式的数据。 是否有可以

• chart.js - Chart.JS间距和填充

  是否可以在图表和x轴之间获得更多空间？ 是否可以在图表的右侧和 Canvas 区域的末端之间留出更多的空间？我想在图表旁边的 Canvas 中添加更多元素，但是这是不可能的，因为图表占用了整个 Can

• chart.js - chart.js中缺失数据之间的连接点

  我正在使用chart.js，在图表的某些点的多日条目之间缺少一些数据。我已将这些值分配为null，但希望图表在缺失点之间绘制一条连接线。这是我所拥有的： 有没有办法将chart.js中的点连接起来？也

• charts - 两个数据集的堆积柱形图 - Google Charts

  我正在生成一些谷歌图表，但我被困在这里。 Google 允许您将列堆叠起来。但它要么受到限制，要么我无法将其配置为工作。取自谷歌，这里有一个例子，显示了两个国家每年生产的咖啡杯数: 假设我有另一个相同

• charts - Google Charts - 更改单个条形颜色

  使用 Google Charts 条形图，是否可以更改一个条形的颜色。例如，我想将 2006 年的数据设为红色(其他条形为蓝色)。 function drawVisualization() {

• charts - Flutter Charts - 在线图上着色和添加轴

  我目前正在尝试重新设计设计布局。我通过尝试和错误得到了大部分。我唯一不明白的部分是: 1.) 左侧和底部的黑色轴。所以只有那些是黑色的2.) 里面的浅灰色轴。如何在颜色上应用不透明度或使用我自己的颜色

• charts - 创建后如何重命名 Helm chart ？

  我使用以下命令创建了一个名为“abc”的 Helm 图表helm create abc现在，当我安装此图表时，所有创建的kuberenets资源将具有一个包含“abc”的名称。 现在，我必须将图表“a

• charts - AM Chart - ChartScrollbar 标签可以隐藏或旋转吗？

  我正在构建一个折线图，除了 ChartScrollbar 中的标签之外，一切正常，因为类别名称有点长，cahrtScrollbar 中的标签相互堆叠使其无法读取。我想知道是否可以隐藏标签、仅显示一些标

• charts - Chart.js LineChart如何仅显示数据集的一部分并支持水平滚动

  我正在使用 Chart.js 2.5。我的情况是，我有一个包含 40 个数据的数据集，但我只想在折线图中显示 7 个数据，但仍然可以水平向左/向右移动以发现其余数据。 我尝试了ticks.maxTic