chartjs-plugin-datalabels不显示在堆叠的水平条上

Question

我试图制作一个简单的水平堆叠条形图，并添加标签。我不确定我在这里做错了什么，任何意见都将不胜感激。

我可以通过降级到更低版本的chart.js和datalabel插件来实现它。

这里有一个jsfiddle：https://jsfiddle.net/chrispret/szLgyu2j/24/

还有一些测试代码...

const testData = {
    set1: '4',
    set2: '3',
    set3: '1',
    set4: '3',
  };

const data = {
  labels: ["test"],
  datasets: [
    {
      label: 'set1',
      data: [testData.set1],
      backgroundColor: 'red',
      datalabels: {
        anchor: 'center',
        align: 'center',
      }
    },
    {
      label: 'set2',
      data: [testData.set2],
      backgroundColor: 'blue',
      datalabels: {
        anchor: 'center',
        align: 'center',
      }
    },
    {
      label: 'set3',
      data: [testData.set3],
      backgroundColor: 'green',
      datalabels: {
        anchor: 'center',
        align: 'center',
      }
    },
    {
      label: 'set4',
      data: [testData.set4],
      backgroundColor: 'gray',
      datalabels: {
        anchor: 'center',
        align: 'center',
      }
    }
  ]
};

const config = {
    type: 'bar',
    data: data,
    options: {
        aspectRatio: 15 / 3,
        indexAxis: 'y',
      elements: {
        bar: {
          borderWidth: 2,
        }
      },
      responsive: true,
      scales: {
        x: {
          stacked: true,
        },
        y: {
          stacked: true
        }
      },
      plugins: {
        datalabels: {
          color: 'white',
          font: {
            weight: 'bold'
          },
          formatter: Math.round
        },
        legend: {
          position: 'right',
        },
        title: {
          display: true,
          text: 'Chart.js Horizontal Bar Chart'
        },
      }
    },
  };

  const myChart = new Chart(
    document.getElementById('chartDemo'),
    config
  );

Answer 1

将标签添加到标签数组。

  const data = {
  labels:  ["hrZone1","hrZone2","hrZone3","hrZone4"],
  datasets: [
    {
      label: 'peak',
      data: [hrData.peak,0,0,0],
      backgroundColor: 'red'
    },
    {
      label: 'cardio',
      data: [0,hrData.cardio,0,0],
      backgroundColor: 'blue'
    },
    {
      label: 'fatBurn',
      data: [0,0,hrData.fatBurn,0],
      backgroundColor: 'green'
    },
    {
      label: 'under',
      data: [0,0,0,hrData.under],
      backgroundColor: 'gray'
    }
  ]
};

Answer 2

从1.x版开始，< code > chart js-plugin-data labels 插件不再自动注册自己。必须在全局或本地手动注册，如下所述。

因此，为了使其工作，您可以在创建图表之前将以下行添加到您的代码中。

Chart.register(ChartDataLabels);

请看看你修改后的代码，看看它是如何工作的。

const testData = {
  set1: '4',
  set2: '3',
  set3: '1',
  set4: '3',
};

const data = {
  labels: ["test"],
  datasets: [{
      label: 'set1',
      data: [testData.set1],
      backgroundColor: 'red'
    },
    {
      label: 'set2',
      data: [testData.set2],
      backgroundColor: 'blue'
    },
    {
      label: 'set3',
      data: [testData.set3],
      backgroundColor: 'green',
      datalabels: {
        anchor: 'center',
        align: 'center'
      }
    },
    {
      label: 'set4',
      data: [testData.set4],
      backgroundColor: 'gray'
    }
  ]
};

const config = {
  type: 'bar',
  data: data,
  options: {
    aspectRatio: 15 / 3,
    indexAxis: 'y',
    elements: {
      bar: {
        borderWidth: 2
      }
    },
    responsive: true,
    scales: {
      x: {
        stacked: true
      },
      y: {
        stacked: true
      }
    },
    plugins: {
      datalabels: {
        anchor: 'center',
        align: 'center',
        color: 'white',        
        font: {
          weight: 'bold'
        },
        formatter: Math.round
      },
      legend: {
        position: 'right'
      },
      title: {
        display: true,
        text: 'Chart.js Horizontal Bar Chart'
      },
    }
  },
};

Chart.register(ChartDataLabels);
const myChart = new Chart(
  document.getElementById('chartDemo'),
  config
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js"></script>
<canvas id="chartDemo"></canvas>