web-dev-qa-db-ja.com

円グラフの凡例-Chart.js

円グラフの数を凡例に入れるには助けが必要です

グラフ画像

マウスでチャートにカーソルを合わせると、各アイテムに関連する数字が表示されます

凡例に表示したい

これまでの重要なコード：

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」です

chart.jspie-chartlegend-properties
16
dpanegassi

ユーザーが100以上のデータセットから選択できるようにしたかったのですが、自分のChartからデータセットを追加/削除するのではなく、showLine: false隠したいデータセットで。残念ながら、デフォルトのlegendでは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();

幸せなグラフ作成！

0
Boris Yakubchik