Ярлыки данных плагина ChartJS не отображают ярлыки на Ionic 3 - PullRequest
Новая
       5

Ярлыки данных плагина ChartJS не отображают ярлыки на Ionic 3

0 голосов
/ 06 февраля 2019

Я работаю с Ionic 3, у меня отображается гистограмма, и мне нужно показать метку данных рядом с гистограммой на графике, как этот вопрос как отобразить значения данных в Chart.js

Я следовал инструкциям, которые я до сих пор нашел для chartjs-plugin-datalabels, но не работает, он не отображает метки данных на моем графике.

Я установил chartjs и chartjs-plugin-datalabels через npm, и они выглядят так в моем package.json 

"chart.js": "^2.7.3",
"chartjs-plugin-datalabels": "^0.5.0",

Я сделал импорт точно так же, как в документации сказано https://chartjs -plugin-datalabels.netlify.com / guide / getting-started.html #интеграция , но строка импорта для 

import { ChartDataLabels } from 'chartjs-plugin-datalabels';

отображается в редакторе VSCode как "ChartDataLabels" объявлено, но его значение никогда не читается "

IМы также добавили в 'options' параметр 'plugin', как сказано в документации, но по-прежнему не отображаются метки данных.

Вот фрагмент моего кода. 

import { Component, ViewChild, ɵConsole } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController, App } from 'ionic-angular';
import { Chart } from 'chart.js';  
import { ChartDataLabels } from 'chartjs-plugin-datalabels';


@ViewChild('barCanvas') barCanvas;

ionViewDidLoad() {
 this.barChart = new Chart(this.barCanvas.nativeElement, {
  type: 'bar',
  data: {
    labels: [..],
    datasets: [
      {
        label: "Ok",
        data: arrayOk,
        backgroundColor: '#014582',
        borderWidth: 1,
        datalabels: {
          align: 'end',
          anchor: 'start'
        }
      },
      {
        label: "Not Okay",
        data: arrayNotOk,
        backgroundColor: '#777676',
        borderWidth: 1,
        datalabels: {
          align: 'center',
          anchor: 'center'
        }
      }],
  },
  options: {
    plugins: {
      datalabels: {
        color: 'white',
        display: function (context) {
          return context.dataset.data[context.dataIndex] > 1;
        },
        font: {
          weight: 'bold'
        },
        formatter: Math.round,

        title: false
      }
    },
    title: {
      display: true,
      position: "top",
      text: "My Bar Chart with Datalabels",
      fontSize: 18,
      fontColor: "#111"
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        ticks: {
          autoSkip: false
        }
      }]
    },
    legend: false
  }
});
}

Ответы [ 2 ]

0 голосов
/ 13 февраля 2019

Я решил свою проблему, добавив атрибут и передав ему свойство плагина ChartLabel в конструкторе классов. 

import { Chart } from 'chart.js';
import { ChartDataLabels } from 'chartjs-plugin-datalabels';

export class Chart {

  chartLabels: any;

  constructor( ... ){
    this.chartLabels = ChartDataLabels;
  }
}
0 голосов
/ 07 февраля 2019

попробуйте включить плагин 

    var chart = new Chart(ctx, {
        plugins: [ChartDataLabels],
        options: {
            // ...
        }
    })
...