饼图图例 - Chart.js

Question

我需要帮助才能将饼图的编号放在图例中

Chart Image

如果我用鼠标悬停图表，我可以看到相对于每个项目的数字

我想在图例中显示它

到目前为止的重要代码：

var tempData = {
    labels: Status,
    datasets: [
        {
            label: "Status",
            data: Qtd,
            backgroundColor: randColor
        },

    ]
};

var ctx = $("#pieStatus").get(0).getContext("2d");
var chartInstance = new Chart(ctx, {
    type: 'pie',
    data: tempData,
    options: {
         title: {
            display: true,
            fontsize: 14,
            text: 'Total de Pedidos por Situação'
        },
        legend: {
            display: true,
            position: 'bottom',

        },
        responsive: false
    }

});

  

“Qtd”，“randColor”已经是“var”，值为

Answer 1

您需要在选项中修改options: { legend: { labels: { generateLabels: function(chart) { // Here } } } } 属性：

{{1}}

<小时/> 因为在你自己创建一个很棒的模板是相当混乱的。我建议使用与the source code中相同的功能，然后编辑所需的内容。

以下是small jsFiddle，您可以在其中查看其工作原理（已编辑的行 - 来自38 - 被评论），其结果如下：

Answer 2

也许这是一个笨拙的解决方案，但对我来说似乎更简单。

filter 参数

ChartJS legend options 有一个 filter 参数。这是一个为每个图例项目调用的函数，无论您是否想在图例中显示该项目，它都会返回真/假。

filter 有 2 个参数：

• legendItem ：要显示/省略的图例项。其属性描述为 here
• data ：传递给图表的数据对象。

黑客

由于 JS 通过引用传递对象，并且为每个图例项调用 filter，因此您可以改变 legendItem 对象以显示您想要的文本。

legend : {
  labels: {
    filter: (legendItem, data) => {
      // First, retrieve the data corresponding to that label
      const label = legendItem.text
      const labelIndex = _.findIndex(data.labels, (labelName) => labelName === label) // I'm using lodash here
      const qtd = data.datasets[0].data[labelIndex]
      
      // Second, mutate the legendItem to include the new text
      legendItem.text = `${legendItem.text} : ${qtd}`
      
      // Third, the filter method expects a bool, so return true to show the modified legendItem in the legend
      return true
    }
  }
}

Answer 3

我想让用户从100多个数据集中进行选择，但是我没有在我的图表中添加/删除它们，而是决定在要隐藏的任何数据集中设置showLine: false 。不幸的是，默认的传说会显示全部100+。因此，在我的解决方案中，我手动生成了图例，过滤出了所有具有showLine: false的数据集。

您的设置将具有以下内容：

legend: {
  labels: {
    generateLabels: (a) => {
      return a.data.labels
    }
  }

然后您将使用帮助函数生成自己的标签：

function updateAllLabels() {
  const myNewLabels = [];

  myChart.data.datasets.forEach((element) => {
    if (element.showLine) {
      myNewLabels.push(generateLabel(element));
    }
  });

  myChart.data.labels = myNewLabels;
}

然后您将使用另一个函数生成标签：

function generateLabel(data) {
  return {
    fillStyle: data.borderColor,
    lineWidth: 1,
    strokeStyle: data.borderColor,
    text: data.countyName, // I attach countryName to my datasets for convenience
  }
}

现在只是不要忘记在更新图表时调用该函数：

updateAllLabels();
myChart.update();

快乐绘图！

Answer 4

继 tektiv 的回答之后，我针对我的 linter 需要的 ES6 对其进行了修改；

options: {
  legend: {
    labels: {
      generateLabels: (chart) => {
        const { data } = chart;
        if (data.labels.length && data.datasets.length) {
          return data.labels.map((label, i) => {
            const meta = chart.getDatasetMeta(0);
            const ds = data.datasets[0];
            const arc = meta.data[i];
            const custom = (arc && arc.custom) || {};
            const { getValueAtIndexOrDefault } = Chart.helpers;
            const arcOpts = chart.options.elements.arc;
            const fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
            const stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
            const bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);
            const value = chart.config.data.datasets[arc._datasetIndex].data[arc._index];

            return {
              text: `${label}: ${value}`,
              fillStyle: fill,
              strokeStyle: stroke,
              lineWidth: bw,
              hidden: Number.isNaN(ds.data[i]) || meta.data[i].hidden,
              index: i,
            };
          });
        }
        return [];
      },
    },
  },
},