chartjs-node-canvas 甜甜圈图答案

【问题标题】：chartjs-node-canvas doughnut chartchartjs-node-canvas 甜甜圈图
【发布时间】：2020-04-09 19:30:10
【问题描述】：

我正在使用 node-canvas 模块导出圆环图。

这是我的代码：

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

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

谢谢

【问题讨论】：

标签： angular charts chart.js

【解决方案1】：

barChartLabels 变量中有一个小错字。它应该是['Vantaggi', 'Svantaggi'] 而不是['Vantaggi, Svantaggi']。目前该数组只包含一个字符串'Vantaggi, Svantaggi'。
要启用工具提示，您可以在 options 属性中包含 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

【讨论】：