Question

我最近在工作的一个项目中从事前端工作，但遇到了一些问题。我们正在网站上显示一个图形，其中显示了一些从数据库中提取的实时数据。

这是用于创建图形的代码：

const weeklyBarData = {
  labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
  datasets: [
    {
      label: 'Pens Assembled',
      backgroundColor: 'rgba(200,10,10,0.8)',
      borderColor: 'transparent',
      datalabels:{
        align: 'end',
        anchor: 'end',
        formatter: function(value, context){
          let percent = (totalPensDaily[context.dataIndex] !== 0 ? (value / totalPensDaily[context.dataIndex])*100 : "");
          percent = Math.round(percent);
          percent = (percent !== 0) ? percent.toString() + '%' : "";
          return percent;
        }
      }
    },
    {
      label: 'Pens Disassembled',
      backgroundColor: 'rgba(10,200,10,0.8)',
      borderColor: 'transparent',
      datalabels:{
        align: 'end',
        anchor: 'end',
        formatter: function(value, context){
          let percent = (totalPensDaily[context.dataIndex] !== 0 ? (value / totalPensDaily[context.dataIndex])*100 : "");
          percent = Math.round(percent);
          percent = (percent !== 0) ? percent.toString() + '%' : "";
          return percent;
        }
      }
    },
    {
      label: 'Pens Claimed',
      backgroundColor: 'rgba(10,10,200,0.8)',
      borderColor: 'transparent',
      datalabels:{
        align: 'end',
        anchor: 'end',
        formatter: function(value, context){
          let percent = (totalPensDaily[context.dataIndex] !== 0 ? (value / totalPensDaily[context.dataIndex])*100 : "");
          percent = Math.round(percent);
          percent = (percent !== 0) ? percent.toString() + '%' : "";
          return percent;
        }
      }
    },
  ],
};

您可以在该代码中看到，我不得不将与“ datalabels”相关的代码复制了三遍，我想避免这种情况。我已经在Chart.js文档中阅读到可以将“ datalabels”应用于每个数据集，整个图表或全局图表，并且我认为在这种情况下将其应用于图表将是最佳解决方案。我试图在数组后面添加“ datalabel”代码，但仍在datasets内，但无法正常工作。我还尝试过重新设计weeklyBarData，但遇到一些错误甚至无法正确加载网站，我尝试执行以下操作：

const weeklyData = {
  labels: [],

  datasets: {
    data: [
      {
        // logic goes here
      },
      {
        // logic goes here
      },
      {
        // logic goes here
      }
    ],
    datalabels: {
        // logic goes here
    }
  }
};

我用尽了想法，无法在网上找到任何解决方案，因此我提出了一个问题：我有什么办法可以重新设计weeklyBarData代码或将datalabel属性应用于整个使用当前代码绘制图表？

（我们在前端使用React）。

第二步，使用上面提供的代码，我可以创建此图：

如您所见，我在左上角看到了一件奇怪的小东西。我放大了它，看起来像是一些带有“％”的字符串。另外，当我删除所有datalabel代码时，它也会消失。关于可能是什么以及如何消除它的任何想法？

Answer 1

将标签应用于整个图表，
将datalabels添加到plugins选项...

var ctx = document.getElementById("data");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: weeklyBarData,
  options: {
    plugins: {
      datalabels:{
        align: 'end',
        anchor: 'end',
        formatter: function(value, context){
          let percent = (totalPensDaily[context.dataIndex] !== 0 ? (value / totalPensDaily[context.dataIndex])*100 : "");
          percent = Math.round(percent);
          percent = (percent !== 0) ? percent.toString() + '%' : "";
          return percent;
        }
      }
    }
  }
});

请参阅以下工作片段...

$(document).ready(function() {
  var totalPensDaily = [100, 100, 100, 100, 100];

  const weeklyBarData = {
    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    datasets: [
      {
        label: 'Pens Assembled',
        backgroundColor: 'rgba(200,10,10,0.8)',
        borderColor: 'transparent',
        data: [100, 200, 300, 400, 500],
      },
      {
        label: 'Pens Disassembled',
        backgroundColor: 'rgba(10,200,10,0.8)',
        borderColor: 'transparent',
        data: [100, 200, 300, 400, 500],
      },
      {
        label: 'Pens Claimed',
        backgroundColor: 'rgba(10,10,200,0.8)',
        borderColor: 'transparent',
        data: [100, 200, 300, 400, 500],
      },
    ],
  };

  var ctx = document.getElementById("data");
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: weeklyBarData,
    options: {
      plugins: {
        datalabels:{
          align: 'end',
          anchor: 'end',
          formatter: function(value, context){
            let percent = (totalPensDaily[context.dataIndex] !== 0 ? (value / totalPensDaily[context.dataIndex])*100 : "");
            percent = Math.round(percent);
            percent = (percent !== 0) ? percent.toString() + '%' : "";
            return percent;
          }
        }
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
<canvas id="data"></canvas>

注意：我在这里的左上角没有看到任何奇怪的小东西 ...

“ datalabels”属性应用于所有“数据集”

1 个答案: