Chart js - 仅在一个数据集上渲染图像

Question

我需要一个包含 2 个数据集的圆环图，我需要在其中 1 个数据集中渲染图像。我能够渲染 2 个数据集并使用 chartjs-plugin-labels 渲染图像，但这会将图像添加到两个数据集。有没有办法告诉图表 js 哪个数据集需要图像？

var config = {
  type: 'doughnut',
  data: {
    datasets: [
     /* Outer doughnut data starts*/
    {
      data: [
        10,
        20,
        30
      ],
      backgroundColor: [
        "rgb(255, 0, 0)", // red
        "rgb(0, 255, 0)", // green
        "rgb(0, 0, 255)", //blue
      ],
      label: 'Doughnut 1'
    },
    /* Outer doughnut data ends*/
    /* Inner doughnut data starts*/
    {
      data: [
        45,
        25,
        11
      ],
      backgroundColor: [
        "rgb(255, 0, 0)", // red
        "rgb(0, 255, 0)", // green
        "rgb(0, 0, 255)", //blue
      ],
      label: 'Doughnut 2'
    }
    /* Inner doughnut data ends*/
    ],
    labels: [
      "Info 1",
      "Info 2",
      "Info 3"
    ]
  },
  options: {
    responsive: true,
    legend: {
      position: 'top',
    },
    plugins: {
      labels: {
        render: 'image',
        images: [
          null, 
          null, 
          {
            src: 'https://i.stack.imgur.com/9EMtU.png',
            width: 20,
            height: 20
          }
        ]
      }
    },
    title: {
      display: true,
      text: 'Chart.js Doughnut Chart'
    },
    animation: {
      animateScale: true,
      animateRotate: true
    },
    tooltips: {
      callbacks: {
        label: function(item, data) {
        console.log(data.labels, item);
            return data.datasets[item.datasetIndex].label+ ": "+ data.labels[item.index]+ ": "+ data.datasets[item.datasetIndex].data[item.index];
        }
    }
}
  }
};
window.onload = function() {
  var ctx = document.getElementById("myChart")
    .getContext("2d");
  window.myDoughnut = new Chart(ctx, config);
};

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
</head>

<body>
  <canvas id="myChart"></canvas>
</body>

</html>

Answer 1

基于documentation，您可以使用：

labels: {
  render: function (args) {
    // { label: 'Label', value: 123, percentage: 50, index: 0, dataset: {...} }
    // index - datasetIndex
    if (args.index == 1) {
       return { src: 'url', width: 25, height: 25 };
    }

    return undefined;
  },
},

Chart js - 仅在一个数据集上渲染图像

Chart js - render images on only one dataset

javascript

chart.js