диаграмма js узел-холст пончик - PullRequest
Новая
       10

диаграмма js узел-холст пончик

0 голосов
/ 09 апреля 2020

Я использую модуль 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
});

Это то, что я получаю диаграмма

Как вы можете видеть в легенде, я вижу только один цвет, но я хотел бы видеть оба (красный и зеленый, как на графике), более того, я хотел бы также показать подсказки.

Спасибо

1 Ответ

0 голосов
/ 10 апреля 2020

  1. Существует небольшая опечатка в переменной barChartLabels. Это должно быть ['Vantaggi', 'Svantaggi'] вместо ['Vantaggi, Svantaggi']. На данный момент массив содержит только одну единственную строку 'Vantaggi, Svantaggi'.

  2. Чтобы включить всплывающие подсказки, вы можете включить tooltips:{ enabled: true } объект в свойство options.

Попробуйте следующее 

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

...