chartjs-node-canvas甜甜圈图

Question

我正在使用节点画布模块导出甜甜圈图。

这是我的代码：

const barChartOptions = {
responsive: true,
aspectRatio: 1,
cutoutPercentage: 75,
maintainAspectRatio: true,
legend: {
    position: 'bottom',
    labels: {
        boxWidth: 10,
        fontSize: 11,
        color: '#959ead'
    }
}
};
const barChartLabels = ['Vantaggi, Svantaggi'];
const barChartType = 'doughnut';

export const getBarConfiguration = (data: any[]) => ({
type: barChartType,
data: {
    labels: barChartLabels,
    datasets: [{
        data: [50, 20],
        backgroundColor: ['#69c499', '#fb5b5b']
}]
},
options: barChartOptions
});

这就是我得到的chart

如您在图例中看到的，我只能看到一种颜色，但我想同时看到两种颜色（如图中的红色和绿色），此外，我还要显示工具提示。

谢谢

Answer 1

1. barChartLabels变量中有一个较小的错字。它应该是['Vantaggi', 'Svantaggi']而不是['Vantaggi, Svantaggi']。目前，该数组仅包含一个单个字符串'Vantaggi, Svantaggi'。

2. 要启用工具提示，您可以在选项属性中包含tooltips:{ enabled: true }对象。

尝试以下操作

const barChartOptions = {
  responsive: true,
  aspectRatio: 1,
  cutoutPercentage: 75,
  maintainAspectRatio: true,
  legend: {
    display: true,
    position: 'bottom',
    labels: {
      boxWidth: 10,
      fontSize: 13,
      color: '#959ead'
    }
  },
  tooltips:{           // <-- to enable tooltips
    enabled: true
  }
};
const barChartLabels = ['Vantaggi', 'Svantaggi'];  // <-- to fix labels in legend
const barChartType = 'doughnut';

this.chart = new Chart('canvas', {
  type: barChartType,
  data: {
    labels: barChartLabels,
    datasets: [
      { 
        data: [50, 20],
        backgroundColor: ['#69c499', '#fb5b5b'],
        fill: true
      },
    ]
  },
  options: barChartOptions
});

工作示例：Stackblitz